Open Tawk.to Widget with button (onClick work around)

Design help Custom code
1

So I am trying to open the Task.to widget using their onClick code:

<a href="javascript:void(Tawk_API.toggle())"> Click to Chat </a>

Found here: Help Center | tawk.to | Using a text link or button to open the widget

now… the onClick name is “reserved” so I found an article that tries to re assign the function.

Found here: Add onClick attribute to any element with this JS snippet

**AAANNNNDDDDD after all the trouble, its not working :frowning: **

any help would be greatly appreciated as I am doing this site for a client :slight_smile:

Here is the site: Webflow - All Weather Companies

The “TEST” page has a “try it” button that has the code on it

Thanks thanks thanks

-NV

2

Hey NV,
I’m glad you found help in my 3-year-old thread! :slight_smile:

I tried looking around your project, and I couldn’t find a trace of my mentioned script (make sure to add it to the page’s head tag, or the project’s head tag).
Nevertheless, i tried looking around more a bit, and I found 2 possible faults:

  1. It seems like you titled your attribute “chatClicked” rather than “whenClicked” - you can do that, but you have to reflect that in the script.

  2. And most importantly, that value you put in to the attribute contains HTML code rather than JS code.

It’s super important that you understand the purpose of my short script - it does a small workaround which allows placing a value in a “reserved” attribute like “onClick”, by taking it’s value from “whenClicked”.
You have to make sure that your naming is correct, and that the code you put inside the “whenClicked” attribute is a valid JS script that can be invoked by an onClick event.

Hope this helps and good luck!
Ben

1 Like
3

Ok, makes sense.

First of all, thank you so much for your response!

My question now is, how then do I put the href information into the button so that is it triggered “onClick”.

Or is that not possible with Webflow/Tawk.to?

My goal is to open the live chat window “onClick” of the Chat Live Now buttons so they function as calls to action.

Benavnon, thanks again for your help!

4

It is possible, and it’s quite easy.

Inputting
Tawk_API.toggle()
as the value of the whenClicked attribute should do the trick.

I highly advise you to play around a bit with manually building basic websites with HTML CSS and JS to understand how to make better use of the full capabilities of Webflow.

Good luck!
Ben

1 Like
5

hahah big facepalm! Thank you so much for the help

6

Hello Everyone, I’m trying to do the same with Tidio chat and I’m stuck. Please help
Tidio Open chat Code

<a href="#" onclick="tidioChatApi.open()">Open chat!</a>

Thank you

7

Worked perfectly for me! Thank you for the guide!