> For the complete documentation index, see [llms.txt](https://docs.digably.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.digably.io/inbox/how-to-add-a-chat-widget-to-your-website.md).

# How To Add A Chat Widget To Your Website

{% embed url="<https://youtu.be/XWIgkCQUOIA>" %}

Learn how to add a chat widget to your website using Digably.

***

#### 1. Click "Inbox"

From the dashboard, click "Inbox" in the left side menu.

<figure><img src="https://static.guidde.com/v0/qg%2FHQszwR5Ai0R6XKJ41Ncm36QSzt22%2FbhSN2vKjeXp8xAy69HCJAK%2F5ZQcPNpt7CgYKZWcmxmJNN_doc.png?alt=media&#x26;token=46d401f1-e506-4883-9e1b-d48e8716d21a" alt=""><figcaption></figcaption></figure>

#### 2. Click "Inboxes"

Then, click "inboxes" in the top menu.

<figure><img src="https://static.guidde.com/v0/qg%2FHQszwR5Ai0R6XKJ41Ncm36QSzt22%2FbhSN2vKjeXp8xAy69HCJAK%2Fwm6DN2PmUutHbiaxEJG5Ay_doc.png?alt=media&#x26;token=3b7523ac-d447-4216-8f90-817e787c3fac" alt=""><figcaption></figcaption></figure>

#### 3. Click "Add Inbox"

Click on the "Add Inbox" button in the upper right.

<figure><img src="https://static.guidde.com/v0/qg%2FHQszwR5Ai0R6XKJ41Ncm36QSzt22%2FbhSN2vKjeXp8xAy69HCJAK%2FiiYt9rsJp5pD8r76q8FNTd_doc.png?alt=media&#x26;token=27ba0d12-89cb-44a9-98ca-838825bb568c" alt=""><figcaption></figcaption></figure>

#### 4. Click the "Website Widget" tile.

Select the "Website Widget" tile.

<figure><img src="https://static.guidde.com/v0/qg%2FHQszwR5Ai0R6XKJ41Ncm36QSzt22%2FbhSN2vKjeXp8xAy69HCJAK%2F3tRXeXaN6LPf11uWMW61iB_doc.png?alt=media&#x26;token=51bcb735-5b0f-486c-ab7e-b2b21a1f1803" alt=""><figcaption></figcaption></figure>

#### 5. Fill in the form fields.

Next, fill in the form fields with the appropriate information. This page will allow you to customize your chat widget with brand colors, a welcome message, and a channel greeting.

<figure><img src="https://static.guidde.com/v0/qg%2FHQszwR5Ai0R6XKJ41Ncm36QSzt22%2FbhSN2vKjeXp8xAy69HCJAK%2FhTSMTVjS6nJH9nKWWC9F23_doc.png?alt=media&#x26;token=31efe660-441b-4b51-8a57-a167db633679" alt=""><figcaption></figcaption></figure>

#### 6. Click "Create inbox"

Now, click the blue "Create Inbox" button.

<figure><img src="https://static.guidde.com/v0/qg%2FHQszwR5Ai0R6XKJ41Ncm36QSzt22%2FbhSN2vKjeXp8xAy69HCJAK%2FukzVE5GbpkLyvaGGbRwLb1_doc.png?alt=media&#x26;token=d040b176-cda0-47d7-84e0-189a09930920" alt=""><figcaption></figcaption></figure>

#### 7. Select the agents that you would like to manage the chat inbox.

Select the agents that you would like to manage the chat inbox. This will be you, in most cases.

<figure><img src="https://static.guidde.com/v0/qg%2FHQszwR5Ai0R6XKJ41Ncm36QSzt22%2FbhSN2vKjeXp8xAy69HCJAK%2F9REEjgpF8c6fU9XBwKcrj7_doc.png?alt=media&#x26;token=ab409fe7-d3ea-4a97-b299-83657fb7d27d" alt=""><figcaption></figcaption></figure>

#### 8. Click "Add agents"

Then, click on the "Add agents" button.

<figure><img src="https://static.guidde.com/v0/qg%2FHQszwR5Ai0R6XKJ41Ncm36QSzt22%2FbhSN2vKjeXp8xAy69HCJAK%2FpamTJt3yKJst361xtdngXw_doc.png?alt=media&#x26;token=321f0277-02dd-49d1-8858-252c66cee5e8" alt=""><figcaption></figcaption></figure>

#### 9. Click "Copy"

Click on the "Copy" button to copy the chat widget code. This will be pasted into the code of your website, so your chat bubble will be available for site visitors. Let's look at how to do that now.

<figure><img src="https://static.guidde.com/v0/qg%2FHQszwR5Ai0R6XKJ41Ncm36QSzt22%2FbhSN2vKjeXp8xAy69HCJAK%2F93nKUGUsyEHeshvgo9CKgD_doc.png?alt=media&#x26;token=1e06300d-ba61-4f63-a874-3174cf365c75" alt=""><figcaption></figcaption></figure>

#### 10. Click "Pages"

First, navigate to the "Pages" section in the left side menu.

<figure><img src="https://static.guidde.com/v0/qg%2FHQszwR5Ai0R6XKJ41Ncm36QSzt22%2FbhSN2vKjeXp8xAy69HCJAK%2F7zz3gNL3vHZygc49jUrUVF_doc.png?alt=media&#x26;token=22ddd187-282f-4e4a-865e-3691c079337c" alt=""><figcaption></figcaption></figure>

#### 11. Select a site

Select the website you would like to place your chat widget on.

<figure><img src="https://static.guidde.com/v0/qg%2FHQszwR5Ai0R6XKJ41Ncm36QSzt22%2FbhSN2vKjeXp8xAy69HCJAK%2Fg2qcoV3T25KVbwnLGcSNWw_doc.png?alt=media&#x26;token=51200011-5d89-4a48-bdad-40f0cd7d0445" alt=""><figcaption></figcaption></figure>

#### 12. Click "Site Setting"

Inside the page builder, click on "Site Settings" in the upper left menu.

<figure><img src="https://static.guidde.com/v0/qg%2FHQszwR5Ai0R6XKJ41Ncm36QSzt22%2FbhSN2vKjeXp8xAy69HCJAK%2FdA6EX4ZPge3K27M43rm6Qe_doc.png?alt=media&#x26;token=a7d82c21-8252-4689-9eb1-06ecb8e081e0" alt=""><figcaption></figcaption></figure>

#### 13. Click "Custom Code"

Click on the "Custom Code" option in the left menu.

<figure><img src="https://static.guidde.com/v0/qg%2FHQszwR5Ai0R6XKJ41Ncm36QSzt22%2FbhSN2vKjeXp8xAy69HCJAK%2Fu9UpoSS5ijVzNTbRBvauxH_doc.png?alt=media&#x26;token=b527fd1b-6d88-4b3d-b6a0-ada4ae575bbd" alt=""><figcaption></figcaption></figure>

#### 14. Paste the code

Paste the code in the header section of your site.

<figure><img src="https://static.guidde.com/v0/qg%2FHQszwR5Ai0R6XKJ41Ncm36QSzt22%2FbhSN2vKjeXp8xAy69HCJAK%2F8oPLHYFY7jMKFMt6kxCEwr_doc.png?alt=media&#x26;token=21b8d713-f2b9-4f77-bf1f-f62a4e84ca51" alt=""><figcaption></figcaption></figure>

#### 15. Click "Save"

Make sure the code is "enabled," and click on the "Save" button.

<figure><img src="https://static.guidde.com/v0/qg%2FHQszwR5Ai0R6XKJ41Ncm36QSzt22%2FbhSN2vKjeXp8xAy69HCJAK%2Ff6jwAHRp6q4GnDXhuUwJuE_doc.png?alt=media&#x26;token=2bb3af40-3d37-4995-9d61-3a6be63b4247" alt=""><figcaption></figcaption></figure>

#### 16. Click "Save Draft"

Now click on the "Save Draft" button, and then preview your site.

<figure><img src="https://static.guidde.com/v0/qg%2FHQszwR5Ai0R6XKJ41Ncm36QSzt22%2FbhSN2vKjeXp8xAy69HCJAK%2FfiEsRmVRrqkdPhFpUmQXSK_doc.png?alt=media&#x26;token=1dc7a800-fa46-4076-90ac-ce255ab42f60" alt=""><figcaption></figcaption></figure>

#### 17. Observe the newly created chat widget.

In your site preview, you will now see a fully functioning chat bubble on your website. Any messages that come in through this chat will automatically go to your inbox.

<figure><img src="https://static.guidde.com/v0/qg%2FHQszwR5Ai0R6XKJ41Ncm36QSzt22%2FbhSN2vKjeXp8xAy69HCJAK%2FjpD5oHR9WfTT8Ad14BQkvr_doc.png?alt=media&#x26;token=e31599a9-529f-4016-9ec2-b630eb4e726f" alt=""><figcaption></figcaption></figure>

This guide provides step-by-step instructions on adding a chat widget to your website using Digably.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.digably.io/inbox/how-to-add-a-chat-widget-to-your-website.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.