# Custom HTML

## Overview

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

{% hint style="warning" %}
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.
  {% endhint %}

***

## Use Cases

* 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

### Step 1: Open Tool

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

<figure><img src="https://2512448455-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmBU4FIU4nEIoGXqPzkoT%2Fuploads%2FQkyzzQp1pPUNVBYCPaT4%2FXnip2024-02-18_21-56-16.jpg?alt=media&#x26;token=d74b005d-17be-4fa1-a1be-dbfeed39fb96" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
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)
{% endhint %}

***

### **Step 2: Set Tool Titles**

* **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://2512448455-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmBU4FIU4nEIoGXqPzkoT%2Fuploads%2FKdCMGeyslBccd3DY4eLh%2FXnip2024-02-19_13-52-31.jpg?alt=media&#x26;token=b5a1c4fc-b50e-46ff-9054-c041507fc3e5" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
[For more information on Title and Panel Title, please view the help article here.](https://widgets.yourhelpcenter.net/conversion-tools/title-and-panel-title)
{% endhint %}

***

### Step 3: Configure Tool Visibility

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://2512448455-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmBU4FIU4nEIoGXqPzkoT%2Fuploads%2F4U8Ch9NqQeuhKP6tmlWy%2FXnip2024-02-19_13-52-45.jpg?alt=media&#x26;token=5cfe4e7b-c054-4468-a813-a6e590a1b3b3" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
[For more information on Tool Visibility, please view the help article here.](https://widgets.yourhelpcenter.net/conversion-tools/tool-visibility)
{% endhint %}

***

### **Step 4: Add HTML**

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://2512448455-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmBU4FIU4nEIoGXqPzkoT%2Fuploads%2FIL8DEOmFnRA4pwUmA4Gx%2FXnip2024-02-19_13-52-59.jpg?alt=media&#x26;token=21312fb7-5868-452f-9441-00d65146e1be" alt=""><figcaption></figcaption></figure>

<div><figure><img src="https://2512448455-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmBU4FIU4nEIoGXqPzkoT%2Fuploads%2FVqdP4N5sdyhOAMtJwRAz%2FXnip2024-02-19_13-53-35.jpg?alt=media&#x26;token=ee17a08b-1a70-46bd-ab4f-ed2a670cf50b" alt=""><figcaption></figcaption></figure> <figure><img src="https://2512448455-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmBU4FIU4nEIoGXqPzkoT%2Fuploads%2FIxuldnpOXaatFEGgUiWF%2FXnip2024-02-19_13-53-50.jpg?alt=media&#x26;token=60838f2e-19df-4934-8b36-b814a745c4a6" 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 %}