After you've set up your code base to use your custom components within Builder, you can test it out and organize your components in the Visual Editor.
To get the most our of this tutorial, you should have already done the following:
When you've successfully registered your custom components with Builder, you'll find your components in the Insert tab in the Custom Components section.
The following image shows the Custom Components section expanded within the Visual Editor for this page. In this example, within the Custom Components section, are eleven custom components that Builder developers have registered. The contents of your Custom Components section depends on which components you've registered, so yours might look different than this screenshot.
You can create a section in the Visual Editor Insert tab just for your custom components. The following image shows a custom section in the Insert Tab called Our Components, which contains four custom components; a hero, double columns, triple columns, and dynamic columns.
Insert menus contain several keys which can be used to customize the description and appearance of the menu.
| Key | Type | Description |
|---|---|---|
| string | Defines the name of the section in the Insert tab. For example, you could name a section "Our Components" or "Builder components" to organize your custom components in the Visual Editor. |
| number | An optional value that determines the order in which this menu section appears in the Insert tab. Lower priority values will cause the section to appear vertically higher in the list of available sections. The lowest priority menu will be open by default, excluding the Import and Basics panels. |
| boolean | An optional value that controls whether this menu section remains visible after the user navigates away from the page. If set to true, the menu configuration will be stored and maintained between sessions. |
| boolean | An optional value that indicates whether this menu section should be considered "advanced" and potentially hidden by default in the basic view of the Insert tab. Users typically need to expand or enable advanced options to see these components. |
| array | An array of items to include in this menu section. These are the actual components that will be displayed in the section for users to insert into their content. Each item in this array represents a component that can be added to the page. |
Before your team starts using your custom component, you can test it out in the Visual Editor. When developing locally, update the preview URL in the top right corner of the preview from your production URL to your local development URL.
Tip: When developing locally, you are mostly likely developing on a non-ssl http:// url within Builder, which is an https:// site. Browsers don't allow https:// sites to make insecure http:// requests unless you explicitly allow it.
To allow access to your local http URL in Chrome, click the shield icon on the right side of the address bar, and choose load unsafe scripts. The page will reload and you might have to enter your local URL a second time for Chrome to allow its content to load.
The following video shows you how to set your preview URL by clicking the URL setting and typing in your local URL for development. This URL is temporary and does not persist when you leave the page, which makes it ideal for testing out your new component.
Now that you've integrated custom components with Builder, you can go further by even limiting page building to only your custom code components. For more information, refer to components-only mode.