Opening a custom chat widget

Design help Animations & Interactions
1

Hi all

Probably rather a simple question here. It’s been asked multiple times, I read all the answers but couldnt get it working.

I’m trying to put a chatbot on my site. Added the js on the page - before /body.
It looks like this:

window.GLR = {
appId: ‘3fa87caf-d23c-4093-80c9-953488a87ce0’
};
(function(w, d, s){
var j = document.createElement(s); j.async = 1; j.type = ‘text/javascript’; j.src = ‘https://widget.eu.karehq.com/latest.js’;
w.GLR = w.GLR || {};
d.getElementsByTagName(‘head’)[0].appendChild(j);
})(window, document, ‘script’);

I need to open this with the line kare.open() from a butto on the page.
In order to do that I added an ID (oz-button) on a button and a div, and then added this script on the page again.

Unfortunately this doesnt laucnch the widget.
You can see the project here: Webflow - oztandir

Thanks in advance for your help.

Here is my public share link: LINK
(how to access public share link)

2

Hi,

A custom chat widget is usually prepared in the application is comes from first. When you finish customizing it, the code given should have all the necessary components to show.

There should be a custom trigger in that application that allows it to; open on load, open on scroll, open after 10 seconds.

Something to that effect. Search again to make sure.

3

Hi Thanks for the reply.

The widget itself is actually working fine. I can launch it from the console by puttin kare.open()
I was unable to trigger it with the button. Turned out I didnt define the query, which I did now by adding
d.getElementById(‘oz’).onclick = function() {
to the widget script.

So my final code looks like this:

window.GLR = {
appId: ‘3fa87caf-d23c-4093-80c9-953488a87ce0’
};
(function(w, d, s){
var j = document.createElement(s); j.async = 1; j.type = ‘text/javascript’; j.src = ‘https://widget.eu.karehq.com/latest.js’;
w.GLR = w.GLR || {};
d.getElementsByTagName(‘head’)[0].appendChild(j);
d.getElementById(‘oz’).onclick = function() {
console.log(‘clicked’);
kare.open();
};
})(window, document, ‘script’);

have a look on : Webflow - oztandir