April 29, 2022
Having a live chat solution on your WordPress website is such a powerful strategy in not only converting visitors into buyers but also being there to answer questions to help visitors navigate your website.
Over the years here at WP Fix It we have had the opportunity of working with many of the popular live chat software platforms that exist.
Since the beginning of 2020 we started using a live chat software called Tidio. We stumbled across this company from one of our customer’s website that we were providing WordPress support for.
We had already been using another live chat software for many years but the big drawn to Tidio that we were initially focused on was how attractive the chat widget itself was on our customer’s website.
Then diving in a bit more into what they had to offer with their live chat solution and what made them different than their competitors we were blown away.
One of our favorite features was their API integration and how we could use it to trigger some specific chat messages on different pages within our WordPress website.
This type of integration would allow us to automate things like capturing visitor information and initiating chats with new visitors.
While Tido did provide documentation on how to use their API, there were some specific functions that we wanted to create which we could not find online.
So we decided to make them ourselves. They have been so successful for our company that we wanted to share this information with others that may be looking for these API integrations on their own WordPress website.
We have put together 5 powerful Tidio Chat API WordPress Code Snippets for you below that you can integrate into your WordPress website to automate some beginning interactions with your website visitors.
The below script snippet is the actual installing code to get Tidio Chat running on your website.
<script src="//code.tidio.co/ACCOUNT_SPECIFIC_STRING.js" async></script>Items within this code you can adjust to your needs:
How to use this code on your WordPress site:
METHOD #1
Place this code in the footer.php file of your active theme
METHOD #2
Use the free plugin at the link below to place the code snippet in the footer of your active theme
https://wordpress.org/plugins/insert-headers-and-footers/
METHOD #3
Use the Tidio Chat free plugin that can be found on WordPress.org or installed directly from your WordPress admin area. Link to the plugin is below.
https://wordpress.org/plugins/tidio-live-chat/
The below script snippet grad the visitor’s first name and email address from their account profile on your website. This will only run if the visitor is logged into your website.
<?php
if( is_user_logged_in() ) {
$current_user = wp_get_current_user();
$current_user_name = $current_user->user_firstname . " " . $current_user->user_lastname;
$current_user_id = $current_user->ID;
$current_user_mail = $current_user->user_email;
?>
<script>
var user_id = "<?php echo $current_user_id ?>"; // Set customer ID
var user_fullname = "<?php echo $current_user_name ?>"; // Set customer email
var user_email = "<?php echo $current_user_mail ?>"; // Set customer name
document.tidioIdentify = {
distinct_id: user_id,
email: user_email,
name: user_fullname,
};
</script>
How to use this code on your WordPress site:
METHOD #1
Place this code in the footer.php file of your active theme
METHOD #2
Use the free plugin at the link below to place the code snippet in the footer of your active theme
https://wordpress.org/plugins/insert-headers-and-footers/
The below script snippet grad the visitor’s first name and email address from their account profile on your website. This will only run if the visitor is logged into your website.
<script>
document.tidioIdentify = {
// You can change visitor name below
name: "CUSTOM_VISITOR_NAME",
};
</script>Items within this code you can adjust to your needs:
How to use this code on your WordPress site:
METHOD #1
Place this code in the footer.php file of your active theme
METHOD #2
Use the free plugin at the link below to place the code snippet in the footer of your active theme
https://wordpress.org/plugins/insert-headers-and-footers/
The below script snippet will trigger a chat custom welcome message after a time period of your choice.
<script>
// Set session cookie name below
if(!window.sessionStorage.getItem("SESSION_COOKIE_NAME")) {
window.sessionStorage.setItem("SESSION_COOKIE_NAME", true);
(function() {
function onTidioChatApiReady() {
setTimeout(function () {
// Change message you wish to use below
tidioChatApi.messageFromOperator("CUSTOM MESSAGE HERE");
// Adjsut the time trigger 1000 of message display below
}, 5 * 1000);
}
if (window.tidioChatApi) {
window.tidioChatApi.on("ready", onTidioChatApiReady);
} else {
document.addEventListener("tidioChat-ready", onTidioChatApiReady);
}
})();
}
</script>Items within this code you can adjust to your needs:
How to use this code on your WordPress site:
METHOD #1
Place this code in the footer.php file of your active theme
METHOD #2
Use the free plugin at the link below to place the code snippet in the footer of your active theme
https://wordpress.org/plugins/insert-headers-and-footers/
The below script snippet will trigger the chat window to open with a custom message after a time period of your choice.
<script>
// Set session cookie name below
if(!window.sessionStorage.getItem("SESSION_COOKIE_NAME")) {
window.sessionStorage.setItem("SESSION_COOKIE_NAME", true);
(function() {
function onTidioChatApiReady() {
setTimeout(function () {
window.tidioChatApi.open();
// Change message you wish to use below
tidioChatApi.messageFromOperator("MESSAGE YOU WANT TO SAY");
// Adjust the time trigger 1000 of message display below
}, 5 * 1000);
}
if (window.tidioChatApi) {
window.tidioChatApi.on("ready", onTidioChatApiReady);
} else {
document.addEventListener("tidioChat-ready", onTidioChatApiReady);
}
})();
}
</script>Items within this code you can adjust to your needs:
How to use this code on your WordPress site:
METHOD #1
Place this code in the footer.php file of your active theme
METHOD #2
Use the free plugin at the link below to place the code snippet in the footer of your active theme
https://wordpress.org/plugins/insert-headers-and-footers/
We really hope that you will find these Tidio Chat API WordPress Code Snippets helpful in creating better engagement with your website visitors.
You can also use WordPress conditional statements to set up different triggers that are URL specific.
To learn more about WordPress conditional statements and how to use them you can visit the link below.
https://codex.wordpress.org/Conditional_Tags
Not sure if you knew this but having a live chat solution on your website is one of the best ways to reduce bounce rate. Check it out some other power techniques to lower bounce rate at https://www.wpfixit.com/how-to-lower-bounce-rate/
We provide 24/7 fast support for repairs, malware removal, speed optimization, and maintenance. Resolving issues within 30-90 minutes with a No Fix, No Cost guarantee.
