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
<!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.
<head>
<title>Acme Company</title>
<style>
.logo-storyblok,
.login__header {
display: none;
}
.login-form__container {
position: relative;
}
.login-form__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:

Whitelabeling inside the app
For enterprise customers, we offer a whitelabeling feature that allows you to set your own logo in the Organization settings. This replaces the default Storyblok logo in the sidebar and Visual Editor. You can also configure a custom domain for the editor, which will be used in email invitations sent to users when inviting them to your organization or spaces — ensuring they access the app through your branded domain.
