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:
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.
