# Add chat buttons to your website

Conversion Studio → Buttons: make buttons for your pages, like Book a demo or Talk to sales, that open Darwin's chat and start the conversation. Copy the code and paste it on your site.

This is the Markdown version of https://www.meetdarwin.ai/help/conversion-studio/chat-buttons, published by Darwin and generated on 23 October 2026.

Find it in Darwin: Conversion Studio → Buttons (https://app.meetdarwin.ai/admin/links?tab=buttons). Updated Oct 16, 2026.

A chat button sits on your own page, like a **Book a demo** button in your hero. When a visitor clicks it, Darwin's chat opens right there and the conversation starts, so they never leave the page.

1. **Start from a preset or add your own**

   Open **Conversion Studio → Buttons**. Pick a starting point, such as **Book a demo**, or select **New button** for a blank one.

2. **Write the label and the message**

   **Label** is what visitors read on the button. **Message sent as the visitor** is what the chat says for them when they click.

3. **Choose what a click does**

   Under **When clicked**:

   - **Send** sends the message as the visitor's first message, and the agent answers it.
   - **Fill in** types the message into the chat box, for the visitor to send or change.
   - **Agent first** has the agent speak first. Use the message to tell the agent what the visitor wants; the visitor doesn't see it.
   - **Open a form** opens the chat straight into one of your [outcomes](https://www.meetdarwin.ai/help/outcomes/outcomes-in-the-chat#open-a-form-from-your-website), such as a quote request. Pick the form under **Form**, which takes the message's place. Only live forms are listed.

4. **Style it to fit your page**

   Under **Start from**, choose **Brand**, **Soft**, **Outline** or **Text link**. Buttons take their colors from your chat; change any color under **Colors**.

   Then set the **Size**, **Width** and **Corners**. **Full width** fills the space you paste the button into.

5. **Copy the code**

   Select **Copy code**. Paste it where the button should appear, on any page that has your Darwin chat. If the chat can't load, the button opens the same chat on a Darwin page instead. Turn on **Add nofollow** if your site needs it.

6. **Save**

   Select a button row to open its drawer. Under **Preview**, select **Try button** to test your edits without saving. Select **Save button** when you want to keep them.

   **Discard**, the close button or Escape cancels unsaved edits. Leaving the Buttons tab also cancels them. A new button disappears when cancelled; an existing button keeps its saved settings. A failed save leaves the drawer open with your edits.

## Good to know

- Pasted buttons pick up a new message or click behavior as soon as you save. A new label or look needs the new code pasted over the old.
- To delete a saved button, open its drawer, select its remove icon, then **Remove button**. **Discard** cancels the removal. If you delete a button, copies already on your site still open the chat but no longer start the conversation.
- If the form behind an **Open a form** button is turned off or removed, the button still opens the chat but can't open the form. Point the button at another form.
- The chat must be installed on the page. See [Install the chat on your website](https://www.meetdarwin.ai/help/website-platforms/install-on-any-website).

- [Make the chat look like your brand](https://www.meetdarwin.ai/help/agent-studio/chat-appearance): Buttons start from your chat's colors.
- [Read visitor conversations](https://www.meetdarwin.ai/help/daily-work/read-conversations): See the conversations your buttons start.