> For the complete documentation index, see [llms.txt](https://messagebird.gitbook.io/applications/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://messagebird.gitbook.io/applications/content/chat-widgets/how-to/build-and-install-a-chat-widget-on-your-website.md).

# Build and install a chat widget on your website

Make sure you are in the **Customer Service** section of your workspace. You can check this by clicking the workspace name in the top left-hand corner of your screen.

### Step one: Create a new chat widget

{% hint style="info" %}
Make sure you are in the **Customer Service** section of your workspace before you start.

You can check this by clicking the workspace name in the top left-hand corner of your screen and selecting **Customer Service.**
{% endhint %}

1. Go to **Preferences** > **Chat widgets**.
2. Click **Create new chat widget**.
3. Name your chat widget.
4. Select the **Default Language** from the drop-down.
5. Click **Any other website**
6. Click **Create new chat widget**.

### Step two: Style your chat widget

1. Add styling, branding, display rules, and additional channels to your chat widget.

<details>

<summary>Branding</summary>

In the **Branding** section, you can configure the following:

* Brand color
* Organization logo
* Dark mode organization logo
* Font
* Background type
* Desktop and mobile display

</details>

<details>

<summary>Targeting and behavior</summary>

In the **Targeting and behavior** section, you can configure the following:

* Allowed domains
* Specific page paths
* Country visibility

</details>

<details>

<summary>Content</summary>

In the **Content** section, you can configure the following:

* Logo display
* Header title
* Header description
* Footer display
* Disclosure
* Launch text and placement

</details>

<details>

<summary>Blocks</summary>

In the **Blocks** section, you can configure the following:

* Add additional channel buttons

</details>

2. Click **Publish**.

### Step three: Install your chat widget on your website

2. Under **Automatic installation**, copy the script tag.
3. Access your website's HTML file.
4. Find the opening `<body>` and closing `</body>` tags.
5. Paste the script tag between the opening and closing body tags.
6. Save and deploy your changes.
7. The chat widget will now be visible on your website.


---

# 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://messagebird.gitbook.io/applications/content/chat-widgets/how-to/build-and-install-a-chat-widget-on-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.
