Can I whitelabel Storyblok?

FAQ
Can I whitelabel Storyblok?

Are you interested in whitelabeling Storyblok? Just create a new HTML page on your server and insert the following HTML code. Then, customize the Storyblok styling to your liking.

If you want to use Storyblok on your own domain, remember to use https for both the editor and the preview. This will ensure a secure and seamless user experience.

Here is an example for an imaginary company Acme:

Section titled Step 1: Create a index.html fileundefined Step 1: Create a index.html fileundefined

        
      <!DOCTYPE html>
<html>
  <head>
    <title>Acme Company</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://app.storyblok.com/f/app-latest.js" type="text/javascript"></script>
  </body>
</html>

Section titled Step 2: Adapt the index.html to include your logo Step 2: Adapt the index.html to include your logo

The next step is to replace the Storyblok logo with your own logo, you can do that by adding some CSS in the head or a seperate CSS file.

        
        <head>
    <title>Acme Company</title>
    <style>
      .logo-storyblok,
      .login__header {
        display: none;
      }

      .login__container {
        position: relative;
      }

      .login__container::before {
        content: '';
        position: absolute;
        top: -70px;
        left: calc(50% - 100px);
        width: 200px;
        height: 60px;
        background-size: contain;
        background-repeat: no-repeat;
        background-image: url("https://raw.githubusercontent.com/mackenziechild/Acme-Logos/gh-pages/images/logo-1.svg")
      }
    </style>
  </head>

By adding your own logo through CSS, the Storyblok logo will be hidden, like in the image below:

Section titled Whitelabeling inside the app Whitelabeling inside the app

For our enterprise customer we offer the feature of setting their own logo in the Organization settings. This replaces the Storyblok logo in the sidebar and the visual editor: