> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.chrisp.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.

---

# Open the chatbox with JavaScript

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

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

---

# Attach it to a custom button

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

```
<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.

```
<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****.