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 for more chatbox actions such as chat:close, chat:toggle, chat:show, and chat:hide.

Updated on: 03/05/2026

Was this article helpful?

Thank you!