# AI Chat Widget

### <mark style="color:green;">Customize Chat Widget Apperance</mark>

This allows you to full customize the look, color, appearance and feel of the embeddable chat widget.

To customize the appearance of your AI agent's chat widget, click into any AI agent and then navigate to the Appearance tab. Here you will see a whole suite of options to customize pretty much every aspect of the chat widget.

On the right hand side there is a live preview of what your changes will look like.

<figure><img src="/files/JXdg21e3ygMHSIxMPamy" alt=""><figcaption><p>Appereance</p></figcaption></figure>

### <mark style="color:green;">Font Size</mark>

Font size for the chat text in pixels.

### <mark style="color:green;">Font Family</mark>

Font family for the chat text.

### <mark style="color:green;">Subheading</mark>

Subheading for the chat widget, such as 'Online', 'Available', etc.

### <mark style="color:green;">Chatbot Icon</mark>

Displayed in the chat widget header as the chatbot image.

Supported file extensions are png, jpg, jpeg and Ideal logo size is 32x32 pixels.

### <mark style="color:green;">Chat Input Placeholder</mark>

Enter the text that will be displayed as a hint in the chat input field.

### <mark style="color:green;">Send Message Button</mark>

Upload a custom send message button. Defaults to a standard button if not provided. Supported file extensions are png, jpg, jpeg and Ideal logo size is 32x32 pixels.

### <mark style="color:green;">Customize Colors</mark>

This section allows you to customize all the different colors of the platform.

### <mark style="color:green;">Widget Boarder</mark>

Border radius of the widget in pixels.

### <mark style="color:green;">Widget Background</mark>

Widget Background Preference.

### <mark style="color:green;">Response Typing Speed</mark>

Simulated typing pace of the bot.

### <mark style="color:green;">AI Agent Status Messages</mark>

Enable to show status messages from the AI agent in the chat widget which are displayed to the user while the AI is processing a response.

<figure><img src="/files/Nuuu8SECyUtZNVmDLHom" alt=""><figcaption><p>AI Agent Status</p></figcaption></figure>

### <mark style="color:green;">Chat Widget Pop-Up</mark>

The chat widget window will automatically open fully after a certain amount of seconds. This is a larger interface to get user's attention to engage with the bot.

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

### <mark style="color:green;">How to Enable</mark>

In the Update section of any AI agent you can open the dropdown under 'Select Popup Type' and select the option you want to enable.

**Alternative Option - Initial Messages Pop-Up**

The initial messages are shown to the user as being "from" the AI agent in the chat widget interface and in this case as a way to get user's attention to engage with the bot.

### <mark style="color:green;">Initial Messages Pop-Up</mark>

When enabled this will show a small pop-up message to users who land on a webpage with the chat widget installed after a variable amount of seconds.

<figure><img src="/files/8uhwzAE5j5sIxyMkCtIK" alt=""><figcaption><p>Chat Widget Pop-up</p></figcaption></figure>

### <mark style="color:green;">Chat Widget Voice</mark>

Information about how to enable voice in & out for the website chat widget.

**What is Chat Widget Voice?**

There is now the ability to have voice functionality within your website chat widget.

This means that, when enabled there will be the option to click a voice icon and speak into the bot, as well as be able to hear the AI's response verbally.

Voice In = Voice to Text

Voice Out = Text to Voice

**How much does it cost?**

This version of voice inside the chat widget is completely free to use for both agencies and sub-accounts.

**How to Enable Voice**

1. Navigate to the update tab for any AI agent
2. Click into the advanced settings
3. Enable/ Disable this feature based on what you want the user to be able to do

<figure><img src="/files/l5YxYeE48KQYP7E4LlcB" alt=""><figcaption><p>Future of Voice</p></figcaption></figure>

<mark style="color:green;">**The Future of Voice**</mark>

We will be implementing other native integrations that will allow for connections to OpenAI's Whisper and ElevenLabs. This will bring customized voices along with hundreds of higher quality options.

&#x20;


---

# 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.gpt4business.ai/getting-started/ai-chat-widget.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.