Google Tag Manager
Installing a website messenger widget on various sites using Google Tag Manager
Google Tag Manager is a tool that allows you to deploy tags – snippets of JavaScript code – across your site or mobile app. Many people choose to use Google Tag Manager for the ease of usage it provides in terms of managing various code snippets. You can refer to a guide published by Google here.
To use Google Tag Manager for integrating the website messenger you should head to this link where you will be prompted to create an account.
Google Tag Manager Home Page
Click on the blue Create Account box and you will be prompted to enter some information. You can enter the company name and country as anything you desire.
Although for the above mentioned company name, one can enter anything, we suggest using Sleekflow.io for ease of usage in the future.
Enter sleekflow.io as the container name and click on WEB before clicking on create to proceed.
Creating an account on GTM
Agree to the terms and conditions and click YES to continue, after which you will be presented with this page.
Click on the Add a new tag button and name the tag what you would like, although we do recommend naming it Sleekflow.io Tag, for ease of usage.
After naming your tag, click on the edit pencil in the top right corner to continue.
Click on the Edit Pencil
Here you will be prompted to choose a tag type, you should scroll down till you see the custom tab and click on the Custom HTML Tag Type to allow for pasting of a code snippet.
Click on the Custom HTML Tag
At this point you should head to the SleekFlow App. Please find the snippet code here and copy and paste it on your website.
Then, paste the code on the "HTML" block. Click on the "Triggering - Edit Pencil icon" to set the conditions for the snippet code.
Please paste the following code to the "HTML" block.
You will need to fill in the
data-companyidbefore you paste the code. Please find your unique snippet code here.You can find the data-companyid on line 4, copy the number inside the blanket
.For example:
If the data-companyid="981a6498-a9b8-44c8-b6ad-395a1992b56".
Just copy 981a6498-a9b8-44c8-b6ad-395a1992b56 , and paste the number and replace the text
data-companyid <!-- Start of SleekFlow Embed Code -->
<script
type="text/javascript">
var script = document.createElement('script');
script.dataset.id = "travischatwidget";
script.dataset.companyid = "data-companyid"
script.src = "https://chat.sleekflow.io/embed_iframe.js"
// use another target than head if necessary
document.getElementsByTagName('body')[0].appendChild(script)
</script>
<!-- End of SleekFlow Embed Code -->
Click on the "Triggering - Edit Pencil icon" to set the conditions for the snippet code.
Click on the blank box on the left of "All Pages" and click the blue Add button on the top right.
Now click on the blue Save button to continue.
After clicking on the save button you should return to the sleekflow.io account page on Google Tag Manager where your workspace changes on the top right should now be saying 1.
After checking the workspace changes click on the blue Submit button in the top right to proceed. Enter the version name and description as desired, for the sake of convenience you can use the ones given above.
After completing the above, click Publish and you're almost done!
Head to the Google Tag Manager home and copy the container ID. This can now be used in integrating with various sites. To understand what this container ID can be used for visit Google's support page here.
Done! Your container ID is ready to use.
If you've now customized your live chat widget, please read our guide below to make it works for you!