> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.crisp.chat/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to add a chat widget to your Webflow website

*This article explains how to add the Crisp chatbox to a Webflow website.*

You can install [Crisp chat widget](https://crisp.chat/en/livechat/) software on Webflow by copying your Crisp chatbox script and pasting it into your Webflow project custom code, then publishing your site.

||| Webflow custom code requires an active Site plan or an eligible Workspace plan. If the **Custom Code** section is unavailable, check your Webflow plan first.

---

# ${color}[#0080dd](Copy your Crisp chatbox script)

First, retrieve the Crisp script from your workspace settings.

__To copy your Crisp script:__
1. Open [**Crisp**](https://app.crisp.chat).
2. Navigate to **Settings → Workspace Settings → Setup & Integrations**.
3. Open **HTML**.
4. Copy your Crisp chatbox code.

![Open Setup and Integrations in Crisp](https://storage.crisp.chat/users/helpdesk/website/-/8/7/a/e/87ae2703583ac800/cleanshot-2026-01-29-at-125625_l6srfp.png =1000xauto)

![Copy the Crisp chatbox setup script](https://storage.crisp.chat/users/helpdesk/website/-/8/7/a/e/87ae2703583ac800/cleanshot-2026-01-29-at-130216_xh8bnd.png =1000xauto)

---

# ${color}[#0080dd](Add the script to Webflow)

Add the Crisp script to your Webflow project custom code and publish the site afterward.

__To install Crisp in Webflow:__
1. Open your Webflow project.

![Open your Webflow project](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/cleanshot-2025-02-24-at-105511_bquf5j.png =1000xauto)

2. Open your project **Settings**.

![Open Webflow project settings](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/cleanshot-2025-02-24-at-105535_c7q4na.png =1000xauto)

3. Open **Custom Code**.

![Open the Webflow custom code section](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/cleanshot-2025-02-24-at-105556_177nfnj.png =1000xauto)

4. Paste the Crisp JavaScript code in the **Head Code** or **Footer Code** field.
5. Click **Save Changes**.
6. Publish your site for the selected domain.

![Save and publish your Webflow custom code](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/cleanshot-2025-02-24-at-105616_1402ivi.png =1000xauto)

| To learn more about the Crisp widget itself, visit our [Live Chat page](https://crisp.chat/en/livechat/).

${youtube}[Beginners tutorial to install a live chat on Webflow](aISpfBpReFk)