# Chat widget

Contact is only established when customers can actually find you. One way to make sure your customers can find you is using your company's central phone number which is already familiar to them. Another important way for customers to engage with you in WhatsApp is by offering a Web Widget on your website that works as a WhatsApp launcher.

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

This web widget can be easily embedded on your website so people can always start a WhatsApp conversation with you or your colleagues by scanning the QR code or clicking on the link.&#x20;

## Instructions

### Enable your web widget

1. Go to Channels
2. Click on Chat widget
3. Click on Enable

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

### Configure the web widget

1. Enter your domain name
2. Optionally enable visitor tracking
3. Click on Save

<figure><img src="/files/5UKEMBoc6TE8xY5sWoze" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Provide your domain name without the `www.` and without the path `/page/..`. Press 'enter' to add this domain and repeat if you want the widget to be used on multiple websites
{% endhint %}

### Prepare implementation on your website

1. Scroll down and click on the little clipboard icon to copy the widget HTML snippet to your clipboard.
2. You can implement the widget code on your website or ask your website agency to do so once you feel comfortable with your bot. See the [technical documentation](https://developer.dialox.ai/) for more instructions.

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

{% hint style="info" %}
Make sure to paste the HTML snippet right before the `</body>` tag.
{% endhint %}

### Test your web widget

The design of your widget can be styled to fit your own brand requirements using the following steps.

1. Click on Design
2. Check out the widget in here or
3. Choose your website URL using "Select preview site" in the dropdown and click
4. Share link to view the widget on top of your website
5. Choose the alignment of your widget from bottom right, bottom left, top right, top left

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

{% hint style="info" %}
Notice that the widget preview doesn't work on all websites when clicking share link. Some websites prevent loading inside an iframe, preventing this function from working properly.
{% endhint %}

### Design your widget

Now you can start changing the properties of your widget in order to fit your needs. See the below screenshot to understand which property affects which part of the widget.

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

### Customize labels

When you click on Customize labels in the page on the screenshot above you will be able to make changes to the default labels that are rendered in the Chat widget.

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


---

# 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://manuals.dialox.ai/studio/channels/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.