Integrate the Tawk.to Chat Widget

While Contact Button doesn’t currently offer any native chat capabilities, you can easily create an Chat Widget App for your button that automatically opens your existing Tawk.to chat widget without the need of a developer. 

Simply complete the following steps to enable the integration.

Step 1 – Create a new “Chat Widget” App
Click the “+ Create New App” button on your apps page or select “New App” from the “Add New” button in your side menu.

Step 2 – Select the “Chat Widget” App
Scroll down until you see the Chat Widget box and then click the “Create App” button.

Step 3 – Setup your new “Chat Widget” App
Give your new app a display name and add a description if you using a “Rows” layout in your menu.

Step 4 – Select “Tawk.to” from the Chat Integration drop down menu

Step 5 – Open your Tawk.to App Dashboard
If you haven’t already, login to your Tawk.to account at https://dashboard.tawk.to/

Step 6 – Go to Tawk.to’s Admin Chat Widget Channels page
To navigate to this page, first click the Administration icon in the header menu (it looks like a settings cog wheel), then click the Channels icon that looks like an Asterisk, and then select Chat Widget option. See screenshot to make this a bit more clear.

Step 7 – Copy your “Direct Chat Link” from Tawk.to
On your Chat Widget Settings page, you’ll see a box called “Direct Chat Link” with a url that starts with “https://tawk.to/chat/ and then has a bunch of random numbers and letters behind that.  Click the “Copy” button located to the right of this string.

Step 8 – Paste your “Direct Chat Link” into Contact Button Dashboard
Go back to the new Chat Widget App page you were previously working on in your Contact Button Dashboard. Click the text box that says “Direct Chat Link” and then paste what you copied from Tawk.to into the text box.

Step 9 – Finish setting up your new Contact Button app
Complete the Icon Design & Display Options setup sections like you would for any other Contact Button app you create.

Step 10 – Save & Test App
Once you’re finished modifying your new app, click Save. If you’ve left the “Enable App” toggle on. You should immediately be able to see your new app in any of your buttons you added it to. 

Pro-tip! if you haven’t published your button on your website yet, you can always go to your Settings page and click the “Test Button” button on the Test & Install tab to see a live version of your button and new app on a blank page.