# Custom HTML

## Overview <a href="#overview" id="overview"></a>

This tool gives you the ability to build a unique experience inside your widgets using custom HTML. You can add any type of content into this widget tool if it can be built with HTML

The HTML Conversion Tool™ **DOES NOT** render custom CSS or custom JavaScript from embedded elements.

* Any custom CSS you would like to add needs to be added directly in the HTML.
* Custom Javascript is **NOT** supported at this time.

***

## Use Cases <a href="#use-cases" id="use-cases"></a>

* Add interactive experiences to your widgets using HTML, CSS, and JavaScript
* Bring HTML email templates into your widgets as Call To Actions
* Show HTML websites or funnel pages inside of your widgets

***

## Configure Custom HTML Tool <a href="#configure-custom-html-tool" id="configure-custom-html-tool"></a>

### Step 1: Open Tool <a href="#step-1-open-tool" id="step-1-open-tool"></a>

Navigate to your widget management area in your CRM software and open the Custom HTML tool.

<figure><img src="/files/loI9sKT29hc6buuStvEN" alt=""><figcaption></figcaption></figure>

If you have not added this tool to your widget yet, add the tool first, then you can configure the tool settings. [Click here to learn how to add new Conversion Tools™](https://widgets.yourhelpcenter.net/conversion-tools/add-reorder-and-delete-tools)

***

### **Step 2: Set Tool Titles** <a href="#step-2-set-tool-titles" id="step-2-set-tool-titles"></a>

* **Title:** Set the name of the Custom HTML tool that will be displayed on the initial widget view.
* **Panel Title:** Define the text that appears at the top of the Custom HTML tool once it's activated by a visitor.

<figure><img src="/files/rBNOUw4RI5nNaTlnVfWF" alt=""><figcaption></figcaption></figure>

[For more information on Title and Panel Title, please view the help article here.](https://widgets.yourhelpcenter.net/conversion-tools/title-and-panel-title)

***

### Step 3: Configure Tool Visibility <a href="#step-3-configure-tool-visibility" id="step-3-configure-tool-visibility"></a>

In the **Tool Visibility** section, specify when the Custom HTML tool should be visible based on your office hours found in the widget settings.

<figure><img src="/files/W7oackp9Jeas3x8ry4kH" alt=""><figcaption></figcaption></figure>

[For more information on Tool Visibility, please view the help article here.](https://widgets.yourhelpcenter.net/conversion-tools/tool-visibility)

***

### **Step 4: Add HTML** <a href="#step-4-add-html" id="step-4-add-html"></a>

Paste your HTML code directly into the provided field in the tool configuration area.

* If you want to upload the code, click the **UPLOAD** button.
* To save your existing HTML code, use the **EXPORT** button to download your code.

<figure><img src="/files/bbC3VCSsz9sEb5ILpvaD" alt=""><figcaption></figcaption></figure>

<div><figure><img src="/files/UGyhmcafGyq52NCrbxSU" alt=""><figcaption></figcaption></figure> <figure><img src="/files/RpPBYDT7kQahG2zE89XF" alt=""><figcaption></figcaption></figure></div>

{% hint style="warning" %}
**Remember:** Custom JavaScript is not supported, and any CSS must be included within the HTML code block itself.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.chathq.io/engagement-widgets/conversion-tools-tm/conversion-tools-library/custom-html.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.