Crisp custom button on Webflow

Design help Animations & Interactions
1

Hi there,

I’ve just set up Crisp chat tool for my Webflow site and want to have a custom button to open the chat box.

From their help page here, it says to use:

  1. This JS code to open the chat box: $crisp.push(['do', 'chat:open']);. I’ve put this in the body like so: <script type="text/javascript">$crisp.push(['do', 'chat:open']);</script>
  2. And something like this to call it: <button onclick="$crisp.push(['do', 'chat:open'])">Click Me!</button>. No idea where how to use this.

I’ve tried multiple times and I’m stuck with these issues:

  • The code from (1) seems to be opening the chatbox every time the page loads- not something I intended.
  • I have a button somewhere in the page but haven’t been able to get the chat box open when it’s clicked.

I’d really appreciate any help in getting it to work!

2

Actually the first one says “open the crisp chat”
The second says, when you click the button open the crisp chat.

So what you are experiencing is by design and working :sweat_smile:

You only want to use the second part if you want the chat to open only with the button click

3

You have to only use the first method, because onlick is a reserved attribute in Webflow.

Steps:

  1. Add a button in Webflow
  2. Give the button an unique class like crisp-button.
  3. Add the following code before the /body tag on all the pages where Crisp is integrated:
    <script> $(document).ready(function() {$(".crisp-button").click(function() {$crisp.push(['do', 'chat:open']);})});</script>
  4. Test on live site
2 Likes
4

This worked for me:

First, give the custom button that will trigger Crisp chat an ID of “crisp” (can be whatever you want, just make sure to also update it in the code snippet below if you change it).

Next, add an embed with this code:

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

Worked for me on contrast.studio (see the “Live chat” button in the pricing plans area)