Is this article helpful?

We love to hear from you!

Table of Contents

Install Website Chat Widget on WordPress

JQ Lee Updated by JQ Lee

Adding a web chat widget to your WordPress website is a quick and easy process. It does not require any coding skills or technical knowledge.

WordPress Logo

Setting Up for Installation

In order to install a web chat widget on WordPress, you will need the following:

  • Access to your website's WordPress Dashboard.
  • A code snippet for your web chat widget.

If you don't have a code snippet already, you will generate one when creating a respond.io Website Chat Widget or using the Facebook Chat Plugin for Facebook Messenger.

If you have the channels already connected on the respond.io platform and you need to retrieve the generated code snippet, follow the instructions here.

For successful installation, ensure your website domain is filled in. There are two ways to go about this.

Go to respond.io Settings > select Channels > select your website chat channel > click configure > add website domain. 

add website domain

Go to respond.io settings > select Growth Widgets > click on the widget you want to add to your website > in the General toggle, add your website domain to the Website Domains field.

Chat widget settings

Installing on WordPress

Step 1: Log in to WordPress

Navigate to your website’s WordPress Admin Dashboard and log in.

WordPress Log In Page

Step 2: Navigate to the Plugins Page

From the left navigation panel, click on Plugins. On the Plugins Page, press the blue Add New button on the top of the page.

WordPress Plugin Page - add new button

Step 3: Add New Plugin

Using the search bar, search for the Insert Header and Footers plugin. You will see many options on the search result page that you can use, but we will be using the "Insert Header and Footers" plugin by WPBeginner for this tutorial. Press the Install Now button and make sure you activate the plugin to make use of it.

WordPress Plugin Page - install header & footer

Step 4: Open Headers and Footer Console

From the left navigation menu, click on Settings and select the Insert Headers and Footers plugin from the settings submenu.

WordPress Plugin Page - navigating to settings and header & footer

Step 5: Add the Live Chat Script

Copy your plugin script from respond.io and paste it into the Script in Footer section of the Header and Footer console page.

Add the Live Chat Script in Footer of WordPress

Once you have pasted the script, click on the blue "Save" button at the bottom of the page.

Done!

Open the website and check out the chat plugin. You will find it in the bottom-right corner. Now your website visitors can chat effortlessly with you. If you used the code snippets generated from the respond.io platform, you will be able to manage the conversations and update the appearance of the widget from the Platform.

The chat widget is now active on your website!

Identify Logged-in Users

This section is only applicable if your website has a user login feature.

Step 1: Log in to WordPress account

Navigate to your website's WordPress Admin Dashboard and log in.

Step 2: Open the Theme Header Files

From the left navigation menu, click on Appearance and select the Theme File Editor. Proceed to select the Theme Header file.

Edit Themes in Theme File Editor

Step 3: Add the retrieved User ID and name code

Copy the sample code below and paste it into the Theme Header file. Once you have pasted the code, click on the Update File button at the bottom of the page.

The sample code below is to get the user Id, first name and last name from WordPress. Feel free to amend if you would like to get other contact fields.
<?php 
	$user_info = get_userdata(get_current_user_id());
?>

<script type="text/javascript">
	window.$wp_ID = "<?php echo $user_info->ID; ?>";
	window.$wp_firstname = "<?php echo $user_info->first_name; ?>";
	window.$wp_lastname = "<?php echo $user_info->last_name; ?>";
</script>

Step 4: Open Headers and Footer Console

From the left navigation menu, click on Settings and select the Insert Headers and Footers plugin from the settings submenu.

Open Headers and Footer Console

Step 5: Add the Identify Logged-In User Script

Copy the sample code below and paste it into the Script in Footer section of the Header and Footer console page. Note that, the identify logged-in user script must be placed above Live Chat script.

The sample code below is using the user Id as the identifier and passes along with the first name and last name. Feel free to amend if you would like to get other contact fields.
<script>
      window.__respond_settings = {
    	identifier: $wp_ID,
        firstName: $wp_firstname,
        lastName: $wp_lastname,  
      };
</script>

Once you have pasted the script, click on the blue "Save" button at the bottom of the page.

Done!

Open the website and check out the chat plugin. The logged-in users of your WordPress can be identified. Once the identifier passed is matched with an existing contact, the current conversation will be resumed.

FAQ and Troubleshooting

WP-Rocket

If you are using a WordPress cache plugin such as WP-Rocket, take these steps so that the widget appears correctly.

Disable data-minify feature for JavaScript

Go to Wordpress Settings > Select WP Rocket > On WP Rocket page, select File Optimization tab > untick Minify JavaScript files

Add our widget domain to the Javascript Excluded Files

https://cdn.respond.io/webchat/widget/(.*).js

WP-Rocket Javascript Excluded Files
Once saved, it is recommended to clear the cache in WordPress.

Feeling stuck? Do not fear.

Need assistance? Contact us for support. Help is here!

Website Chat Widget Quick Start

Install Website Chat Widget on Shopify

Can't find what you're looking for?

Talk to an expert here!

Contact Us
© 2023 Respond.io.
Powered by HelpDocs (opens in a new tab)

Powered by HelpDocs (opens in a new tab)