# Channel: Web Chat

<figure><img src="/files/pBQ8ACGJuPJG7eEHgXBq" alt="In the Chat Flow creation process, after selecting your AI Chatbot in &#x22;Step 1: AI Assistant,&#x22; select &#x22;Web Chat&#x22; in &#x22;Step 2: Select Channel&#x22; to start the Web Chat creation process."><figcaption><p>In the Chat Flow creation process, after selecting your AI Chatbot in "Step 1: AI Assistant," select "Web Chat" in "Step 2: Select Channel" to start the Web Chat creation process.</p></figcaption></figure>

After ***Select Channel > Web Chat***, you will be taken to the ***Configure Web Chat*** view. This is where you will set up your Chatbot to make it compatible with your website.&#x20;

{% hint style="info" %}
**SUMMARY**

Creating a Web Chat as a Chat Flow involves these steps:

1. **Choose Web Chat:** In *Step 2: Select Channel*, choose "Web Chat." This brings you to the *Configure Web Chat* window.
2. **Add preset text:** Use the *Text Options* to modify the Web Chat's public name and default message.
3. **Add colors:** Use the *Color Options* to change the overall color palette of your Web Chat.
4. **Change images:** Use the *Image Options* to personalize your Web Chat further with images, logos, and headers.&#x20;
5. **Set a schedule:** Use the *Working Hours* to select times of the day and days of the week that the Web Chat will be active.
6. **Copy the Web Chat Embed Code:** The *Embed Web Chat* will provide a working code that you can give to your web administrator for implementation in your website.
   {% endhint %}

***

## Configure Web Chat

### Text Options

<figure><img src="/files/rhXEPFLek8JcN6SLFpUw" alt="A Web Chat is edited through the &#x22;Configure Web Chat&#x22; page. The &#x22;Text Options&#x22; lets users edit the basic components of the Web Chat before it&#x27;s interacted with by customers."><figcaption><p>A Web Chat is edited through the "Configure Web Chat" page. The "Text Options" lets users edit the basic components of the Web Chat before it's interacted with by customers.</p></figcaption></figure>

in ***Text Options***, you can customize the basic text that appears with your Chatbot once it becomes a Web Widget or an In Page bot. This portion has the following components:

* **Title:** This is the "main greeting" that the AI Chatbot will provide before starting a conversation.
* **Group Name:** This is the "public name of the Chatbot. You can name this after yourself, your team, or your company. In the image above, its name is *"Captivate Chat Test Widget*&#x20;
* **Widget Text Description:** This is the invitational message your Chatbot reveals when users click it for the first time.&#x20;

### Color Options

<figure><img src="/files/iLAMeaQAiOMTwA5lxguI" alt="&#x22;Color Options&#x22; under the &#x22;Configure Web Chat&#x22; page lets users customize the Web Chat&#x27;s basic color palette assigned to its visual components. This doesn&#x27;t contain the icons and uploadable assets of the Web Chat."><figcaption><p>"Color Options" under the "Configure Web Chat" page lets users customize the Web Chat's basic color palette assigned to its visual components. This doesn't contain the icons and uploadable assets of the Web Chat.</p></figcaption></figure>

In ***Color Options***, you can customize how your AI Chatbot appears in your website using a wide array of color options:

* **Primary Color**
* **Bubble Background** (User, Bot, Agent)
* **Chat Text** (User, Bot, Agent)
* **Chat Buttons** (Background, Text)

{% hint style="info" %}
**Fit your Web Widget colors to your branding!**

Switch up your Web Widget colors to match your branding. Select the square icon beside the hexcodes to open a color palette where you can choose your preferred colors.&#x20;
{% endhint %}

### Image Options

<figure><img src="/files/GKnR2RVLk75VQJxfHhsk" alt="In &#x22;Configure Web Chat&#x22; page, the &#x22;Image Options&#x22; is the place where users can upload assets and icons for their Web Chat."><figcaption><p>In "Configure Web Chat" page, the "Image Options" is the place where users can upload assets and icons for their Web Chat.</p></figcaption></figure>

In ***Image Options***, customize your Chatbot further with options that add "personality" to them. These include:

* **AI Chatbot Avatar:** This is how your Chatbot appears in the Web Widget.
* **Widget Icon:** This is how your Chatbot appears as an icon before expanding into a chat box. It can be the same icon as your AI Chatbot Avatar.&#x20;
* **AI Chatbot Business Image:** This represents the icon or logo of your branding or business.&#x20;
* **AI Chatbot Chat Header Image:** This is the unique background that comes with your AI Chatbot Avatar.

{% hint style="info" %}
**Use high-quality resources**

Since your Chatbot is an extension of your branding, it's important to use high-quality resources such as images for elements such as your AI Chatbot Avatar and Business Image.
{% endhint %}

### Other Options

<figure><img src="/files/r3Xl1pM5ySuivdcpF5sJ" alt="In &#x22;Configure Web Chat&#x22; page, the &#x22;Other Options&#x22; tab lets you add more customization options to your Web Chat, such as  what text to put on certain cues and buttons in your Web Widget or In Page bot."><figcaption><p>In "Configure Web Chat" page, the "Other Options" tab lets you add more customization options to your Web Chat, such as  what text to put on certain cues and buttons in your Web Widget or In Page bot.</p></figcaption></figure>

The ***Other Options*** section allows you to customize your Web Chat even further with other labelling and text options for other components of the Web Widget or In Page bot's appearance. These mostly deal with the **text to appear for functionalities that state:**

* **Text sent by:** Text to appear to indicate who sent the message.
* **Text download transcript:** Text to appear on the hyperlink that users will click to download the transcript.
* **Text today:** Text to appear to state the date today.
* **Text chat to person:** Text to appear on the hyperlink that initiates the Live Chat process.
* **Text send a message:** Text to appear on the button that sends the message.
* **Text start:** Text that appears to start the conversation.
* **Text is always active:** Text that appears to indicate the bot is always active.
* **Text is processing:** Text that appears to indicate the bot is processing a response.

There are also checklists where you can set the Web Chat to:

* **Hide AI Chatbot Avatar**
* **Hide File Attach Button**
* **Hide Business Image**
* **Hide Emoji Button**
* **Enable Full Screen**

### Working Hours

<figure><img src="/files/NJHpMzx5jFGFzbUL7kiL" alt="In &#x22;Configure Web Chat&#x22; page, the &#x22;Working Hours&#x22; section lets users assigns days of the week and hours of the day that the Web Widget will be active and available for interaction."><figcaption><p>In "Configure Web Chat" page, the "Working Hours" section lets users assigns days of the week and hours of the day that the Web Widget will be active and available for interaction.</p></figcaption></figure>

In ***Working Hours***, determine your Chatbot's working hours. You can choose its **Start Time** and **End Time**, and specific days of the week you want it to function. Here are your main considerations:

* **Disable Working Hours:** Toggling ![Tick the "Enable Work Hours" toggle to restrict the Web Widget into appearing on certain times of the day and days of the week. Toggle it off to make it available 24/7.](/files/9dMXK86WiB1FKGvuOdXW) off means the Web Widget won't follow a schedule and **provide 24/7 coverage**. This is perfect if your Web Widget is designed solely to answer questions and not connect users with live agents.
* If you want your Chatbot to connect users to Live Agents, try to set the Chatbot's schedule to match that of your team's for a more seamless experience.

{% hint style="info" %}
**You can keep your Web Widget live 24/7 even with work hours toggled**

If you don't want to toggle *"Enable Work Hours,"* you can still keep your Web Widget live indefinitely. You can do this by adjusting the "Start Time" and "End Time" to 00:00.&#x20;
{% endhint %}

***

### Embed Code

<figure><img src="/files/T5APYE5cip1wTTv0V9Hi" alt="After modifying all options in &#x22;Configure Web Chat&#x22; page, users will see &#x22;Embed Web Widget.&#x22; This has the code that Web Administrators need to put in the user&#x27;s website for the Web Chat to appear as a Web Widget or In Page."><figcaption><p>After modifying all options in "Configure Web Chat" page, users will see "Embed Web Widget." This has the code that Web Administrators need to put in the user's website for the Web Chat to appear as a Web Widget or In Page.</p></figcaption></figure>

After configuring your Web Chat, it becomes available for deployment with code provided in the ***Embed Code*** section. It has two variants:

* **Web Widget:** This is the traditional form of AI Chatbots in websites, where you click an icon that expands into a conversation window.
* **In Page:** This is an alternate version of the AI Chatbot deployment where you can use it directly from within your website.

#### Embed as Web Widget

<figure><img src="/files/jT7qGoJzSi6KMa2YEwwD" alt="Pasting the code from the &#x22;Embed Web Widget&#x22; stage of the &#x22;Configure Web Chat&#x22; page into your HTML will give your webpage a Web Widget AI Chatbot. You have to click their icon on the lower-right portion of the screen for the interface to appear."><figcaption><p>Pasting the code from the "Embed Web Widget" stage of the "Configure Web Chat" page into your HTML will give your webpage a Web Widget AI Chatbot. You have to click their icon on the lower-right portion of the screen for the interface to appear.</p></figcaption></figure>

Using the HTML code from the "Embed Web Widget" stage will give your webpage access to a **traditional web widget**. This takes the form of an icon on the lower left of your screen that transforms into a chat when clicked.&#x20;

These traditional web widgets are often used as customer assistants in most websites that provide products and services.

The ***Embed Web Widget*** section has this code:

{% hint style="info" %}
**Traditional Embed Web Widget HTML Code:**

\<script src="<https://widget.prod.captivat.io/captivate.min.js>">\</script>\
&#x20; \<script>\
&#x20;  function callWidget(data) {\
&#x20;   Captivate.init({\
&#x20;    apiKey: "YOUR\_API\_KEY\_IS\_HERE",\
&#x20;   )}\
&#x20;  }\
&#x20;  callWidget();\
&#x20; \</script>
{% endhint %}

Please take note that `apiKey: "`**`YOUR_API_KEY_IS_HERE`**`"` contains your Web Widget's API Key, which you can use in other Captivate Chat features such as full screen embeds and potential future additions.&#x20;

#### In Page

<figure><img src="/files/5C8G0fTcOsAYpZBV6U6z" alt="To access a full screen version of the AI Chatbot, add the desired Web Widget API into the full screen iframe code from the &#x22;Full Screen Embeds&#x22; section of the Captivate Chat Manual. "><figcaption><p>To access a full screen version of the AI Chatbot, add the desired Web Widget API key into the full screen iframe code from the "Full Screen Embeds" section of the Captivate Chat Manual. </p></figcaption></figure>

Alternatively, users can also insert their Web Widget Chat Flows into their websites as **full screen embeds**. Unlike traditional web widgets that take the form of an icon that expands into an AI Chatbot, a full screen embed takes up the size specified in a special `<iframe>` code.

Full screen embeds are perfect for websites that want to have a dedicated page where users can interact with AI Chatbots.&#x20;

To transform your Web Widget Chat Flow into a full screen embed, simply copy this code:

{% hint style="info" %}
**Full Screen Embed HTML Code:**

\<iframe\
&#x20;  src="<https://your-deployed-url/?apiKey=YOUR_API_KEY>"\
&#x20;  width="100%"\
&#x20;  height="100%"\
&#x20;  frameborder="0"\
&#x20;  allow="clipboard-write"\
\>\</iframe>
{% endhint %}

When modifying this `<iframe>` code, take note of these things:

1. Replace [**`your-deployed-url`**](https://your-deployed-url/?apiKey=YOUR_API_KEY) with the link of the webpage where you want to deploy the full-screen widget.
2. Replace **`YOUR_API_KEY_HERE`** with the API key of your Web Widget, as seen in the "Embed Web Widget" stage of the "Configure Web Widget" page.
3. Ensure the `allow="clipboard-write"` attribute is included if you need to enable clipboard functionality within the widget.
4. Ensure the `width` and `height` attributes are at 100% to fit the widget into your layout appropriately.

{% hint style="warning" %}
**Give your HTML embed code to your Web Administrator**

Make sure that your embed is pasted **before the closing \</body> tag** on pages of your website where you want the AI Assistant to show up. Your Web Administrator should know how to make this work.&#x20;
{% endhint %}

***

## You're all set!

Doing all the steps above should get your Chatbot ready to be used with a Web Widget.


---

# 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://manual.captivatechat.ai/start-creating/create-a-chat-flow/select-channel/channel-web-chat.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.