Streaming live at 10am (PST)

Crisp custom button on Webflow

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!

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

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