Add HTML and JavaScript to a component

XM Cloud Components is a flexible tool that lets you include HTML and JavaScript elements on your website, which are rendered in real time.

You can link the JavaScript file to be used together with an HTML block or a web component. Some example use cases would be:

  • Adding a Google Analytics tracking snippet.

  • Creating custom code for running animations.

  • Manipulating the rendered HTML dynamically.

Note

The option to include JavaScript in a component doesn't provide any extra capabilities, besides ensuring that the script file is present on the page and is loaded only once.

To have better control over displayed elements in JavaScript, use a web component that will provide reference to HTML element instances, to listen for events and manipulate them.

You can also use an HTML block in cases where you want to add dynamic data from a data source that, along other properties, has rich text in it. The HTML block lets you display the data mapped along with paragraphs, headings and any other HTML elements included to the text, as opposed to what happens when choosing to add Paragraph or Heading elements whose text would be mapped to a rich text property. In this latter case, the data mapping system will remove all the structural elements from data-mapped HTML, such as other paragraphs, headings and list items, but leave links and formatting in place. This is done so that original element remains paragraph or heading.

Add an HTML block element

The content of an HTML block is not accessible for direct editing or manipulation, but will inherit the styles provided by the Style Guide. You can use HTML blocks to call a JavaScript function by using a <script> tag inside its content.

To add HTML to a component:

  1. In the Component builder, open the component that you want to add an HTML block to.

  2. In the context bar of the section or the element you want to append the external component to, click Add element > HTML block.

  3. 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.

  4. To configure the block content, in the right-hand pane, in the Content section, click HTML Content.

  5. Click the desired configuration:

    • 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 - select the data source and the property you want to use to populate the HTML block.

You can now further style and edit the layout and alignment of the embedded element.

Add JavaScript code

 To add JavaScript to a web component or an HTML block, the code of the component has to meet one of following requirements:

  • The JavaScript file is hosted online and is accessible using a component-specific URL.

  • The JavaScript code is included in a dynamic data source.

To add JavaScript code to a component: 

  1. In the Component builder, open a component and click the component element you want to add your JavaScript code to.

  2. To configure the block content, in the right-hand pane, in the Content section, click JavaScript code.

  3. Click the desired configuration:

    • 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, then click Back to return to the initial right-hand configuration pane.

    • 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, and click Complete.

The JavaScript code is now added to your component element.

Do you have some feedback for us?

If you have suggestions for improving this article,