> For the complete documentation index, see [llms.txt](https://docs.chathq.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.chathq.io/engagement-widgets/conversion-tools-tm/conversion-tools-library/custom-html.md).

# 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="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2Fs4tLqxtXUmW7Yu6vDgKL%2FConversion%20Tools_Custom%20HTML_Configure.jpg?alt=media&amp;token=cbb77844-5666-427d-ae73-29e3819b8915" 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="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FURFRFHa2WiRJobcbxE4V%2FConversion%20Tools_Custom%20HTML_Titles.jpg?alt=media&amp;token=0fc2c30c-aa37-460a-b873-186d0dd63a3a" 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="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FeZ0UsMLSZBVbmypxmLIT%2FConversion%20Tools_Custom%20HTML_Visibility.jpg?alt=media&amp;token=ad969168-69aa-45df-bb5b-16f59f924c46" 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="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2Feajhb828uW7I0EeBgSaI%2FConversion%20Tools_Custom%20HTML_Input%20HTML.jpg?alt=media&amp;token=74440971-2476-48c6-8cc3-00381f7b6559" alt=""><figcaption></figcaption></figure>

<div><figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2FoLA4OwDgN6dVbEXsEIdz%2FConversion%20Tools_Custom%20HTML_Import%20HTML.jpg?alt=media&amp;token=b6f39d35-2518-4f0e-af07-d44a9adcebbf" alt=""><figcaption></figcaption></figure> <figure><img src="https://2949826416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mh0SIdnTfBpdN11l3wk%2Fuploads%2F8ZP8yvdtHEZR1qbsTD6A%2FConversion%20Tools_Custom%20HTML_Export%20HTML.jpg?alt=media&amp;token=eed1050a-f5e9-4bcc-94ae-45ff5c7b25e6" 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 %}