Skip to main content

​
Common HTML Formatting for Webchat Content in Fliqr AI

You can use the following guidelines to format your text in Fliqr 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: Main Heading (H1)
Subheading (H2)
Sub-subheading (H3)

​
2. Paragraphs

Use for blocks of text. Here’s the code: 
<p>This is a paragraph of text.</p>
Example: This is a paragraph of text.

​
3. Bold Text

Emphasize important words. Here’s the code: 
<b>This is bold text.</b>
Example: This is bold text.

​
4. Italic Text

Use for emphasis or titles of works. Here’s the code: 
<i>This is italicized text.</i>
Example: This is italicized text.

​
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:
  • Item 1
  • Item 2
  1. First Item
  2. Second Item
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: Click here to visit example.com.

​
7. Images

Embed images. Here’s the code: 
<img src="image.jpg" alt="Description of image">
Example: Sample image.

​
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: Section Heading
Content inside the div.

​
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: This text is red.

​
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:
Header 1Header 2
Data 1Data 2

​
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: This paragraph has a line-height of 1.5. The space between the lines is 1.5 times the size of the font. This paragraph has a line-height of 2. The space between the lines is double the size of the font.

​
Helpful Table for HTML Elements

ElementPurposeExample
CSS Reset for WidthEnsures all elements stay within the parent container’s width, useful for landing pages and email in Fliqr AI.
Headings (H1-H6)Use to define the hierarchy of content.
ParagraphsUse for blocks of text.
Bold TextEmphasize important words.
Italic TextUse for emphasis or titles of works.
ListsOrganize content into lists.
Links (Anchors)Create clickable links to other pages or resources.
ImagesEmbed images.
DivsCreate container sections to group elements together.
SpanInline container for text or content, mainly for styling purposes.
TablesDisplay data in tabular format.
ButtonsTrigger actions like JavaScript events.
IframesEmbed external content like videos, websites, or widgets.
Audio/VideoEmbed audio or video content.
Line Breaks (br)Insert single line breaks within text content.
Horizontal Rule (hr)Add a thematic break (horizontal line) to separate sections.
BlockquoteHighlight quoted text.
CodeDisplay preformatted or inline code snippets.
Preformatted Text (pre)Preserve whitespace and formatting for code or plain text.

​
Wrapping It Up

By following these guidelines and examples, you’ll ensure your content is structured, visually appealing, and compatible with Fliqr 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.