Made in Builder.io

Join us for the biggest Figma-to-code launch of the year

Builder.io logo
Talk to Us
Platform
Developers
Talk to Us

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

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

Resources

Blog

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 '@builder.io/react';

// 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
    // https://v3.material-ui.com/customization/themes/#theme-configuration-variables
    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="https://cdn.builder.io/js/embedded-app"></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 '@builder.io/admin-sdk'

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

  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 '@builder.io/admin-sdk'

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

  const response = await spaceAdminSDK.chain.mutation
    .addOIDCProvider({
      settings: {
        displayName: 'Auth0 connection',
        issuer: config.issuer,
        clientId: config.clientId,
      },
    })
    .execute()

  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.


Looking to hire a third party to help with your project?

Submit a project request and our partnerships team will reach out to connect you with an Expert from our partner ecosystem.

Connect with us

Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Get the latest from Builder.io

Newsletter

Developer Newsletter

Latest tips, tricks, and news for frontend developers from our blog

Product Newsletter

Latest features and updates on the Builder.io platform

By submitting, you agree to our Privacy Policy