# 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.&#x20;

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: 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.bird.com/applications/content/chat-widgets/how-to/build-and-install-a-chat-widget-on-your-website.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.
