Register Now: Use Visual Dev + AI to Ship 10x Faster on July 24

Announcing Visual Copilot - Figma to production in half the time logo
Contact Sales
Contact Sales










Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required



Get StartedLogin

enterprise plans

enterprise add-on

With the White-label Add-on, Enterprise customers and partners can deeply customize the Builder interface to achieve a bespoke experience such as:

  • Enabling completely custom user flows
  • Using your own branding
  • Embedding within your own application(s), leveraging your own authentication system

In the images below, Builder is completely customized with Enterprise branding, also known as white-labeling:

An image of the Builder UI that is made to look like the company's site.
An image of the Builder Visual Editor that is made to look like the company's site.

White-labeling in Builder is to change the look and feel of the visual editor to fit with the system you're embedding Builder in, which you can do with plugins.

Partners can integrate Builder into their own applications and tools as an optional add-on for their users.

Plugins help you deeply customize Builder UIs and flows. White-label plugins enable even deeper customization to modify core user flows.

import { Builder } from '';

// Register some app settings
Builder.register('appSettings', {
  settings: {
    hideLeftSidebar: true, // Remove the default navigation
    defaultRoute: '/apps/our-custom-app', // Replace the default content route
  theme: {
    colors: {
      primary: 'rgb(220 130 86)',
    // Provide any theme configuration for material UI v3
    mui: {
      typography: {
        fontFamily: 'Arial',

This is an enterprise add-on, please talk with your account manager to get this set up.

You can embed your custom Builder space in your dashboard using the builder-app custom element:

<script async src=""></script>
<builder-app api-key="YOUR_KEY" token="YOUR_EMBED_TOKEN"></builder-app>

This loads the space you specify and has some requirements.

The first requirement is getting an embed token in each session to verify the ability to embed the space under a specific domain, for example, passing the current domain to the following function:

import { createAdminApiClient } from ''

async function generateEmbedToken(
  rootPrivateKey: string,
  claims: { spaceId: string; domain: string }
) {
  const rootAdminSDK = createAdminApiClient(rootPrivateKey)
  const { token, expires } = await rootAdminSDK.chain.mutation

  return { token, expires }

The second requirement is configuring an SSO provider on the embedded space programmatically prior to embedding; for example when creating the space:

import { createAdminApiClient } from ''

export default async function configureSSO(
  spacePrivateKey: string,
  config: { clientId: string; issuer: string }
) {
  const spaceAdminSDK = createAdminApiClient(spacePrivateKey)

  const response = await spaceAdminSDK.chain.mutation
      settings: {
        displayName: 'Auth0 connection',
        issuer: config.issuer,
        clientId: config.clientId,

  return response

As an added bonus, authentication is seamless with Single Sign-On (OAuth or SAML) with embedding.

For the full code check this example on the Builder GitHub repository.

Was this article helpful?


Visual CMS

Theme Studio for Shopify

Sign up


Featured Integrations





Get In Touch

Chat With Us




© 2020, Inc.


Privacy Policy

Terms of Service


Get the latest from

By submitting, you agree to our Privacy Policy