Skip to main content
[StoryblokStoryID:245122130]

Live article: https://www.storyblok.com/faq/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:

Step 1: Create a index.html file

Copy to clipboard 
        
      <!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>

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.

Copy to clipboard 
        
        <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:

1

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:

1
2