Builder apps & embedding
Select enterprise customers and partners can deeply customize the editor interface, enabling completely custom user flows, white labeling, and embedding within other dashboards
👉Note: The contents below require custom partnerships or enterprise agreements
Apps
Apps allow you to completely skin Builder. You can replace the default user flows with your own entirely custom ones, and customize the editor deeply. Authentication is seamless via Single Sign-On (Oauth or SAML)
In the below example, Builder is white labeled completely
Integration Partners
Partners can integrate Builder into their own applications and tools as an optional add-on for their users
Plugins
Plugins allow deep customization of the Builder UIs and flows. App plugins allow 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',
},
},
},
})
Embedding
You can embed your custom Builder space in your dashboard using the builder-editor
custom element:
<script async src="https://cdn.builder.io/js/app"></script>
<builder-app api-key="YOUR_KEY" space="YOUR_SPACE_id"></builder-app>
This will load up the space you specify with any customization you apply - such as configuration, content/models, plugins, etc
For partnerships where useres can opt-in to using Builder for your product and should get their own space each time, you can also use space templates
<script async src="https://cdn.builder.io/js/app"></script>
<builder-app api-key="YOUR_KEY" space-template="YOUR_SPACE_id"></builder-app>