What is it?

The HTML component creates content using code such as HTML, Javascript, and CSS. This component can be used to create content using web languages and can also be used to embed other web applications.

If you are having trouble getting your custom HTML/Javascript working please see the HTML Component tips page.

When do I use it?

You can add the HTML component anywhere in a layout. It allows contributors to add: HTML code to layouts and pages, JavaScript to create interaction and monitor events, and embedding of external web applications. This allows for the creation of a more seamless user interface.

Adding the HTML component to a site layout:

Note: you need to have a security level of Contributor or higher in order to edit a layout.

1. Navigate to the site where you want to add the HTML component. 

2. Go to the top toolbar and select Edit > Live and select Components.

3. From the Add Components list, select Text > HTML and drag it to the desired location on your layout.

Setting properties for the HTML component

You can select the HTML component to directly add HTML code and view output from the component in your layout.

You can also select the HTML component to edit Component Properties, such as the spacing around the HTML component and how it looks in your layout.

HTML component:

In the layout, click the HTML component. The HTML component populates a working HTML code window to write and paste HTML code into.

1 - Coding area with numbered lines for coding/reference

2 - Code View: Toggle between code and preview mode

3 - Undo

4 - Redo

5 - Fullscreen

HTML Component Properties:

1. In the layout, click the HTML component, the properties are displayed on the left.

2. Click the Edit button.

3. (Optional) Add a Heading. You can include a heading for the HTML component. If left blank, no heading will appear.

4. Select Padding. Increase or decrease the padding as desired.

5. Click Save.