Tawk.to is one of the most popular online chat plugins available and best of all, it’s free to use. It’s robust and easy to set up. There’s probably a good chance you’re using it for your website. There’s probably an even greater chance you’re using Slack for your internal team communications. In fact, we all probably open Slack first thing we get to our desks, since important messages are pinging in there all the time. What if there was a way to bridge Slack and Tawk.to? To have your Slack notify you when when website visitors are trying to reach you on your website.
Well, thanks to both Slack and Tawk.to ‘s openness to letting people integrate with their platforms, we’ve found a quick, easy way to do just that. Don’t be intimidated if you see some code below, you don’t need to be a developer to do this. We’ll guide you through how to set this up:
- A Slack Workspace (Most likely you’re already using this for your communciation)
- Tawk.to Installed on your site
- Simple Custom CSS and JS WordPress Plugin
Total Time Required to Set Up: 10 Minutes
OK, so I’m assuming you have Tawk.to set up on your website and your Slack workspace is open. You’ll firstly have to decide which channel in Slack you want your notifications to go to. Ready? Let’s go:
Part 1: Set up your Slack Webhook
In Slack, click the Workspace name to bring up the sidebar Menu and click Customize Slack
This will open a browser window. Click the top left menu and select Configure Apps.
You’ll now probably see some Apps that you’ve already connected to your workspace. We want to do our own integration though, so click on Custom Integrations:
Here, you’ll want to click on Incoming Webhooks:
Next, Click Add Configuration:
Ok, so in the next step you’ll have to choose which Slack channel you want your Tawk.to notification to go to. You can even have it sent to a person. So select where you want the notification to go to and click Add Incoming Webhooks Integration:
In the next screen you’ll be able to set a bunch of properties. First, we need to copy your Unique Webhook URL. It will be the red URL as show below (we’ve deleted the webhook in this example URL for security reasons), copy that entire URL and paste it somewhere like your notes app or notepad, as you’ll need it again soon:
Still on the same page, scroll down to the Section called Integration Settings. This is where the fun begins. Here you can set things like The little picture in Slack that goes next to the notification and the sender name. You can add your company logo in here to impress your Slack team mates 😉
Here’s how I’ve set mine up. Who wouldn’t want bb8, the cutest droid in the galaxy, to bring them Slack messages. I got this cute bb8 sketch drawing from Arturo Munoz. You can even see a little preview of what the notification will look like in Slack. Pretty Neat. Hit Save Settings when you’re done customizing your Slack notification settings.
Hooray! You’ve done all the work you needed to in Slack. Now, we need to integrate your shiny new webhook with the Tawk.to API call that’s actioned when a new chat is started.
Part 2: Integrate webhook with Tawk.to
We’ll take a look at how to integrate with the WordPress plugin first:
Pssst, if the below is too tricky for you, try using our Plugin.
You will need the plugin called Simple Custom CSS and JS.
Once the plugin is installed and activated, go to the custom JS section of the plugin:
Next, you will need to paste the following code snippet underneath the comment in the Custom JS text area.
Important: Be sure to replace that part that says ‘YOUR WEBHOOK GOES HERE’ with your custom webhook URL that you saved from Slack. Make sure not to remove the single quotes though, it goes between them:
My paste looks like this:
Next, we need to set it so the code is executed in the footer, not the header, so in the sidebar of that same screen, set the Where on page option to Footer. Then hit Publish!
OK, then, let’s give it a whirl shall we?
Part 3: Test Slack and Tawk.to!
Go ahead and start a new chat on your websites tawk.to chat widget.
You should immediately get a Slack notification that there is a new Tawk.to chat. Here’s what mine looks like:
Why, thanks bb8, I can now jump into my Tawk.to Dashboard or App and chat with the customer. This let’s everyone on the team also know, so no more chats falling through the cracks. Using Slack and Tawk.to will ensure that your whole team is immediately notified of chats that have started on your website. Win!
If the above part was a little tricky for you, why not try using our Tawk to Slack plugin, it’s free:
Now, let’s take it even further
We here at WMYS have integrated a myriad of different tools to help people grow their online businesses. See how we can help you by Talking to Us today. We Love helping like minded online entrepreneurs succeed!