Onclick Event Help

Hello. I am not a coder at all. I am trying to set up a third party job scheduler on this site. I need the schedule online buttons on the home page to trigger the scheduler by using an onclick event. Here is the instructions they sent me.

I figured out how to get the chat up. I just need help with making the buttons work properly

https://preview.webflow.com/preview/cosmic-comfort?utm_medium=preview_link&utm_source=designer&utm_content=cosmic-comfort&preview=0e09593a09f30a0f8e63c0639690c6d3&workflow=preview

Here’s the web code and chat code.


Additional customization instructions for their widget can be found here:

https://webchat.scheduleengine.net/setup.htmltype or paste code here

Here is their recommended code:

Add the following script tag to your website’s <head> tag area:
<script src="https://webchat.scheduleengine.net/webchat-v1.js"></script>

Add the following script tag to your website’s tag area:

<script>
  WebChat.loadChat({
    "apiKey": "13ztqt43itd7388vu9wlcwkmym1s4aiw",
    "initialMessage":"Hello, this is the greeting message.",
    "initialResponses":[],
    "logoUrl":"https://uploads-ssl.webflow.com/5ea9e6c489540da1a75b8126/5ed7d26f3a49794ac4d734cb_Group.svg",
    "title":"Welcome",
    "primaryAccentColor":"#c1c1c1",
    "primaryAccentTextColor":"#000000",
    "backgroundColor":"#FFFFFF",
    "agentBubbleBackgroundColor":"#c1c1c1",
    "agentBubbleTextColor":"#000000",
    "bubbleBackgroundColor":"#F1F1F1",
    "bubbleTextColor":"#000000",
    "sendButtonBackgroundColor":"#c1c1c1",
    "sendButtonTextColor":"#000000",
    "suggestedResponseColor":"#c1c1c1",
    "autoOpen":true,
    "autoOpenMobile":false,
    "position":"right",
    "buttonBackgroundColor":"#6401e3",
    "buttonText":"Chat with Us",
    "buttonTextColor":"#FFFFFF",
    "autoOpenDelay":3
  });
</script>

Adding the Schedule Engine Tool to Your Website

The following instructions can be used by your internal or external team who manages your
website to add the Schedule Engine tool to your website.
Website setup steps:

  1. Create a strong CTA at the top of the homepage labeled “Book Now.”
    We strongly recommend removing contact forms from the top of the fold and highlighting the
    Book Now CTA

  2. Include the Schedule Engine <script> on any page that will launch the scheduling tool.

<script data-api-key="ckn5z2af900oh07nwute54gz6" id="se-widget-embed"
src="https://embed.scheduleengine.net/schedule-engine-v3.js"></script>

Note that this must run on EACH page where the booking module will launch.

  1. Add an OnClick() event to any element that you want to launch the scheduling tool.
    ScheduleEngine.showRepair({ roomKey: null }) (Note the lack of containing single quotes)

**If you are using WordPress, we recommend using the Elementor plugin. Please be sure to read
the specific directions for WordPress as the onClick and other instructions are different. Please
review the following link, under the WordPress section, for our detailed instructions.
You can find the detailed technical documentation here: https://docs.scheduleengine.net/
If at any point you need help, support, or advice on where and how to launch the
scheduling tool on your website, please email implementations@scheduleengine.com

Any help would be appreciated… Totally stumped.

@americanupstarts Good start. Your code is just missing some syntax elements, like a closing </script> tag. Here’s a correct code:

<script>
// JS
// on button click
document.querySelector('.button').addEventListener('click', function() {
    ScheduleEngine.showRepair({ roomKey: null });
});
</script>

I’ve replaced arrow function () => because it’s not supported on Internet Explorer.

I tried to test it, but as I don’t have an account it doesn’t allow me to test on a different domain.

A couple of things to consider:

  1. What’s roomKey? This looks like a unique key that you need to grab from within your account and replace null in the code with it. The similar way as you’ve added the apiKey. I’m not sure what they meant with that comment about the lack of single quotes. I’m guessing that when you replace the null with the key, to wrap the key in quotes. e.g. '39xdz7x7'
  2. This code will work on the first element with the button class. If you want this working on multiple buttons on the same page, then it needs a bit different code. Let me know if that’s the case and I’ll try to help.