How to open Crisp live chat widget with Squarespace button

This guide will show you how to open the Crisp live chat widget chatbox via a custom button.

Before you proceed please make sure you have installed Crisp on your site. Learn how to do it in our simple guide.

Step 1

Insert a button on your page, name it whatever you want, and put the text #open-crisp to the link input

Add a button and update its link

Step 2

Add custom code: find the place where you put the Crisp code snippet (usually in Footer), and place this code under it

<!-- sqs:beyondspace--crisp-custom-button -->
<script>
document.querySelector('[href*="#open-crisp"]').addEventListener("click", function(e) {
  e.preventDefault();  
  $crisp.push(['do', 'chat:open']);
  return false;
});
</script>
<!-- /sqs:beyondspace--crisp-custom-button -->

You injection will now looks similar to

Updated injection with custom button

That’s it

Now open your live site and preview the custom button that open Crisp live chat widget in action

Open Crisp Chat with Custom Button