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>

Was this article helpful?