Add an external component to the Components builder
After activating a form in XM Cloud Forms, or after registering a BYOC component such as a React component or web component, you can add it to the Components builder canvas. You add the external component the same way you usually work with elements. However, you won't be able to see a visual preview of the component in the canvas or in Pages, but you can open a preview of the component with all its element and layout, in a separate browser tab.
-
Register the BYOC component you want to add.
-
Activate the form you want to add.
Add an external component
-
In the Components builder, open a component or create a new one.
-
In the context bar of the section or the element you want to add the external component to, click Add element > Component.
-
In the context bar, click Append inside an existing element, or click and drag to create a container on the grid of the component section.
-
On the right-hand side, open the Collection where the component you previously registered is located.
-
Click the component you want to add.
-
If the component includes input fields, you can configure the input in the right-hand pane.
Preview the external component
After you stage the component, you can open its preview in a separate browser tab. If several versions of the component are staged, the preview tab will render the version that corresponds to the configured screen size. If many versions correspond to the screen size, it will render the first one.
To open an external component preview:
-
In the components builder, when working with a configured and staged external component, click Preview external components.
