How to Toggle Tawk to Widget on Button Click?

  • Reading time:5 mins read

There are many services out there which helps in providing automated support and data collection when a user visits your site. Specially if your website is build on WordPress, Tawk.to is a great free service which provides you the option to engage with your visitors with AI bots. You have multiple options to add staff and knowledge base for the ease of your visitors. If you have not setup tawk.to on your website yet here is a guide link – How to Add Free Chatbot to Your WordPress Website? Having a visitor support system can have the following benefits:

  • If you engage with your visitor there is a chance of making a conversion.
  • You can filter out the audience and understand their needs with the automation.
  • You will be able to collect visitor data and re-target them later.
  • You can reduce effort, by providing them easy access to repeated information.

Code for button toggle.

You need to add the following code to your header or footer of the website.

jQuery(document).ready(function($){    
 $( "#widget_button" ).on( "click", "a", function() {Tawk_API.toggle();});
});

Step 1: Add the Code Using a Plugin

You can add the code above using a plugin like Simple Custom CSS and JS. Once you install and activate it. Add a JS snippet and paste the code there. Make sure you select it to run in front-end and in the head element.

1. Install Simple Custom Css and JS
Install Simple Custom Css and JS
2. Add JS Code Snippet
Add JS Code Snippet
3. Add JS Code as shown above
Add JS Code as shown above
4. Replace the Widget Button Id with what ever you want
Replace the Widget Button Id with what ever you want

Step 2: Open the Page in Elementor and Add the Button with and ID

You need to open the portal in elementor and add the button, go to advanced and add the css id. Make sure you add the id same as you added during the code.

6. In the elementor portal add the button and go to advanced and add the id
In the elementor portal add the button and go to advanced and add the id

Once you have done this and someone clicks the button the chat widget would toggle automatically.

If you want to integrate whatsapp here is a reference guide – How to Add Whatsapp Chatbot to your Website?

Do You Want to Learn WordPress?

I will teach you WordPress from basics to advanced. No matter if you are a freelancer, an agency, a businessmen, an entrepreneur, homemaker, corporate working professional or just a student who wants to build a portfolio.

I have helped many people ranging from all industries all age groups. I provide live training as well as recorded course is also available.To connect with me, just message me and we can discuss your requirements.

5 1 vote
Article Rating
Spread the love

Geet Dhillon

Technical Trainer, Web Developer by profession and a travel enthusiast who loves to meet people and make new friends. My name is Geet Dhillon and I help Companies, Business Owners, eCommerce Owners, Students, Freelancers, Coaches and Trainers in Web Design, Business Setup, Marketing and Automation, Landing Page Creation etc. I am inspired by Artists, Writers, Entrepreneur & Visionaries. I try to find way to help, promote their business, talent and creativity.
Subscribe
Notify of
guest

0 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments