Add HTML and JavaScript to a component
How to include HTML and JavaScript elements in your XM Cloud Components.
XM Cloud Components is a flexible tool that lets you include HTML and JavaScript elements on your website, which are rendered in real time.
Add an HTML element
To add HTML to a component:
-
In the Component builder, click anywhere on the canvas of the component that you want to add HTML to.
NoteLean more about creating the layout of a component.
-
On the context bar, click Add element.
-
Click HTML block.
NoteYou can achieve a similar result when you add a Component instead of an HTML block, and click HTML Content in the right-hand panel.
-
Double-click on the canvas where you want the HTML component to be, or, click the section and click Append inside Section on the context bar.
-
In the right-hand pane, click HTML Content.
-
Click one of the tabs and configure as needed:
-
None - no code is added. You can use this option to clear out any previous configurations applied to this component.
-
Static - enter the HTML you want to include in the component.
-
Mapped - in the Data source drop-down menu, select the data source with the HTML you want to include. Then, click the data path that has the HTML code you want to include. For example, you can use this to load a rich text field from an external system, such as Content Hub, and preserve the original structure and styling.
-
You can now further style and edit the layout of the embedded element.
Add a web component
You can import interactive JavaScript into an XM Cloud Component, where you can further apply designs and styling, and include it in a page layout in XM Cloud Pages. A web component usually consists of the markup written in HTML, styling defined by CSS, and interactivity handled by JavaScript. Web components have the following advantages:
-
They are automatically rendered in the Component builder preview.
-
Several web components on the same canvas that use the same source will load the source once.
To add JavaScript to a web component, the code of the component has to meet the following requirements:
-
The JavaScript file is hosted online and is accessible using a component-specific URL, or is included in a dynamic data source.
-
The JavaScript code includes a registration name for the component that is later used as its reference point:
MyComponent.register(“my-component”).
To add a web component:
-
In the Component builder, click anywhere on the canvas that you want to add a web component to.
NoteLean more about creating the layout of a component.
-
On the context bar, click Add element, then click Component.
-
Double-click on the canvas where you want the HTML component to be, or, click the section and click Append inside Section.
-
In the right-hand pane, click Component Settings.
-
On the Web tab, enter the name of this component. Click Back
to return to the right-hand configuration pane. -
Click JavaScript code.
-
Click one of the tabs and configure as needed:
-
None - no code is added. You can use this option to clear out any previous configurations applied to this component.
-
From URL - enter the URL where the JavaScript is hosted.
-
Mapped - in the Data source drop-down menu, select the data source with the JavaScript you want to include. Then, click the data path that has the JavaScript code you want to include.
-
-
When you've finished configuring, click Back
to return to the right-hand configuration pane. -
If you want, you can add additional attributes in JSON format that apply to the JavaScript code you added. For example, if you added a component that includes collapsible accordions, you can configure the default behavior of the accordion sections. To do so, click Attributes, and enter the JSON.
The web component is now added to the Component builder. You can edit it or style it using the styles and themes of your Styles library.