Get FAST WordPress Support
Tidio Chat API WordPress

Tidio Chat API WordPress Code Snippets

Looking for Custom Tidio Chat API WordPress Code?

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.


Chat Installation Script – Tidio Chat API WordPress

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:

  1. ACCOUNT_SPECIFIC_STRING

    This is the script embed that you can find in your Tidio account. See the image below.
Tidio Chat API WordPress Code Snippets
TIDIO CHAT 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/

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/

Tidio – Live Chat Chatbots Email Integration

Capture User Info Script – Tidio Chat API WordPress

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>
Tidio Chat API WordPress 4
GENERATED NAME AND EMAIL

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/


Custom Visitor Name Script – Tidio Chat API WordPress

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:

  1. name: “CUSTOM_VISITOR_NAME“,

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/


Custom Welcome Message Script – Tidio Chat API WordPress

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:

  1. if(!window.sessionStorage.getItem(“SESSION_COOKIE_NAME“)) {
    window.sessionStorage.setItem(“SESSION_COOKIE_NAME“, true);
  2. tidioChatApi.messageFromOperator(“CUSTOM MESSAGE HERE“);
  3. }, 5 * 1000);
Tidio Chat API WordPress

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/


Custom Open Chat Message Script – Tidio Chat API WordPress

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:

  1. if(!window.sessionStorage.getItem(“SESSION_COOKIE_NAME“)) {
    window.sessionStorage.setItem(“SESSION_COOKIE_NAME“, true);
  2. tidioChatApi.messageFromOperator(“MESSAGE YOU WANT TO SAY“);
  3. }, 5 * 1000);
Tidio Chat API WordPress

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/


Just Wrapping Up

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/

Leave a Reply

Your email address will not be published. Required fields are marked *