Common HTML Formatting for Webchat Content in CBB

You can use the following guidelines to format your text in Chatbot Builder AI’s webchat. Please remember to use both conversation examples and instructions to follow the show-and-tell method, which demonstrates proper formatting through clear examples alongside explanations. 

This approach will help users better understand how to structure and present their content effectively in the webchat. 

Important note, if you are looking for how to ensure your links in Webchat are properly linked, click here.

1. Headings (H1-H6)

Use to define the hierarchy of content. Here’s the code:

<h1>Main Heading (H1)</h1>
<h2>Subheading (H2)</h2>
<h3>Sub-subheading (H3)</h3>

Example:

2. Paragraphs

Use for blocks of text. Here’s the code:

<p>This is a paragraph of text.</p>

Example:

3. Bold Text

Emphasize important words. Here’s the code:

<b>This is bold text.</b>

Example:

4. Italic Text

Use for emphasis or titles of works. Here’s the code:

<i>This is italicized text.</i>

Example:

5. Lists (Ordered and Unordered)

Organize content into lists. Here’s the code:

Unordered List:
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

Ordered List:
<ol>
    <li>First item</li>
    <li>Second item</li>
</ol>

Example:

6. Links (Anchors)

Create clickable links to other pages or resources. Here’s the code:

<a href="https://example.com">Click here to visit Example.com</a>

Example:

7. Images

Embed images. Here’s the code:

<img src="image.jpg" alt="Description of image">

Example:

8. Divs

Create container sections to group elements together. Here’s the code:

<div>
    <h2>Section Heading</h2>
    <p>Content inside the div.</p>
</div>

Example:

9. Span

Inline container for text or content, mainly for styling purposes. Here’s the code:

<span style="color: red;">This text is red.</span>

Example:

10. Tables

Display data in tabular format. Here’s the code:

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>

Example:

Line Spacing

Line spacing (or line-height in CSS) determines the amount of vertical space between lines of text. Here’s how to control line spacing using CSS:

<style>
    p {
        line-height: 1.5; /* Adjust this value to control line spacing */
    }
</style>

In this example, line-height: 1.5 makes the space between lines 1.5 times the size of the font. Larger values increase spacing, and smaller values decrease it.

Example:

Helpful Table for HTML Elements

Wrapping It Up

By following these guidelines and examples, you’ll ensure your content is structured, visually appealing, and compatible with Chatbot Builder AI’s webchat. Whether it’s enhancing readability with proper headings or ensuring functional links and images, these HTML formatting techniques will elevate the user experience in your webchat.