> ## 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 replace the default chatbox button with a custom one

*Learn how to open the Crisp chatbox from a custom button on your website.*

You can create your own **Chat with us** button and use the Crisp JavaScript SDK to open the chatbox when the visitor clicks it.

---

# ${color}[#0080dd](Open the chatbox with JavaScript)

Use **chat:open** to open the Crisp chatbox.

```js
$crisp.push(["do", "chat:open"]);
```

---

# ${color}[#0080dd](Attach it to a custom button)

The simplest implementation is to call the method from a click handler.

```html
<button type="button" onclick="$crisp.push(['do', 'chat:open'])">
  Chat with us
</button>
```

For larger websites, prefer attaching the listener from your JavaScript file instead of using inline HTML.

```html
<button type="button" id="open-crisp-chat">
  Chat with us
</button>

<script>
  document.getElementById("open-crisp-chat").addEventListener("click", function() {
    $crisp.push(["do", "chat:open"]);
  });
</script>
```

| Read the [$crisp Methods documentation](https://docs.crisp.chat/guides/chatbox-sdks/web-sdk/dollar-crisp/) for more chatbox actions such as **chat:close**, **chat:toggle**, **chat:show**, and **chat:hide**.