UCal
  • Welcome
  • 🚀Getting Started
    • Quick Start
      • What is IS-Messenger?
      • Setting Up an Account
      • Connecting Channels
      • Inviting Your Teammates
      • Getting Contacts to Message You
      • Automated Welcome and Away Messages
      • Responding to Messages
      • Glossary of Terms
    • Connecting a Channel
    • Invite your teammates
    • Getting Contacts to Message You
    • Automated Welcome and Away Messages
    • Responding to messages
    • Glossary of Terms
    • Creating a Chatbot
  • ⚙️Workspace Modules
    • Dashboard
    • Inbox
      • Inbox Overview
      • Assignment and closing a conversations
      • Custom Inboxes
      • Interacting with Respond AI Prompts
      • Using AI Assist
    • Contacts
      • Contact Details
      • Contacts Overview
      • Merge Suggestions
      • Contact Activity
      • Contact Channels
      • Contact Import
      • Segments
    • Broadcast
      • Broadcast Overview
      • Managing Broadcasts
    • Workflow
      • Triggers
      • Workflow Step
        • Step: Send a Message
        • Step: Ask a Question
        • Step: Assign To
        • Step: Branch
        • Step: Update Contact Tag
        • Step: Update Contact Field
        • Step: Open Conversation
        • Step: Close Conversation
        • Step: Add Comment
        • Step: Jump To
        • Step: Wait
        • Step: Date & Time
        • Step: HTTP Request
        • Step: Trigger Another Workflow
        • Step: Add Google Sheets Row
        • Step: AI Agent
      • Workflow Templates
    • Reports
      • Reports: Conversations
      • Reports: Responses
      • Reports: Resolutions
      • Reports: Messages
      • Reports: Contacts
      • Reports: Assignments
      • Reports: Leaderboard
      • Reports: Users
      • Reports: Broadcasts
  • ⚙️Workspace Setting
    • Managing a Workspace
    • General
    • Users
      • Access Levels
    • Teams
    • Channels
      • Chat Menus
    • Contact Fields
    • Growth Widgets
      • Website Chat Widget Quick Start
      • Website Chat Widget Overview
      • Workspace Settings: Growth Widgets
      • Install Website Chat Widget on Squarespace
      • Install Website Chat Widget on Joomla
      • Install Website Chat Widget on Wix
      • Install Website Chat Widget on Shopify
      • Install Website Chat Widget on WordPress
      • How to Track Conversation Source from Multiple Websites
    • Respond AI
    • Integrations
      • Dialogflow
        • Dialogflow: Connecting to Dialogflow
        • Dialogflow: Creating a Chatbot
        • Dialogflow : Managing Intents
        • Dialogflow: Parameters
        • Dialogflow: Events
        • Dialogflow: Response Templates
        • Dialogflow: Custom Payloads
        • Dialogflow: Fulfillment Webhook Request
      • E-Commerce & CRM Integrations
        • E-Commerce Integration: Shopify
        • E-Commerce Integration: BigCommerce
        • E-Commerce Integration: WooCommerce
        • E-Commerce Integration: Magento
        • CRM Integration: HubSpot
        • CRM Integration: Salesforce
        • CRM Integration: Pipedrive
        • CRM Integration: ActiveCampaign
      • Zapier
      • Developer API
      • Webhooks
      • Make (formerly Integromat)
    • Closing Notes
    • Snippets
    • Files
    • Data Export
    • Data Import
  • ⚙️User Account
  • Profile
  • User Activity Status
  • Notifications
  • Resetting your Passwords
  • 👨‍👧‍👦CONTACT AND MESSAGES
    • Dynamic Variables
      • Dynamic Variables Overview
      • How to Use Dynamic Variables
    • Contact Search and Custom Inbox
    • Conversations
  • ⚙️MESSAGING CHANNELS
    • Channel Overview
    • Facebook Messenger
      • Facebook Messenger Quick Start
      • Facebook Chat Plugin
      • Private Replies
      • Message Tag
    • Instagram
      • Instagram Overview
      • Instagram Quick Start
    • WhatsApp
      • WhatsApp Business API Quick Start
      • Getting Ready for Inbound Conversations
      • Getting Ready for Promotional Messaging
      • WhatsApp Official Business Account (Green Tick)
      • Grow your WhatsApp Audience by Maximizing Entry Points
      • Get WhatsApp API Account for Government Agencies
      • Meta Business Verification
      • WhatsApp Message Templates
      • WhatsApp Pricing
      • WhatsApp Business Platform (API) Channel Configuration
      • WhatsApp Messaging Limits
      • Meta Product Catalog
      • Change Your WhatsApp Business Display Name
      • Phone Number Migration to IS-Messenger WhatsApp Business API
      • Turn-off WhatsApp Number Two-Step Verification
      • WhatsApp Cloud API
        • Migrating from On-Premises API to Cloud API
        • Migrating from Cloud API to On-Premises API
        • Set up the WhatsApp Echo Bot
        • Load Testing on Cloud API
        • Experiments
        • Webhooks Setup
      • 360Dialog WhatsApp
      • Twillio WhatsApp
      • MessageBird WhatsApp
      • Vonage WhatsApp
      • Phone Number Migration to WhatsApp Cloud API
    • Website Chat Widget
      • Install on WordPress
      • Install on Shopify
      • Install on Wix
      • Install on Squarespace
      • Install Website Chat Widget on Joomla
    • LINE
      • LINE Overview
      • LINE Quick Start
    • Telegram
      • Telegram Overview
      • Telegram Quick Start
    • Viber
      • Viber Overview
      • Viber Quick Start
    • SMS Overview
      • Twilio SMS Quick Start
        • Importing Contacts to Twilio SMS
      • MessageBird SMS Quick Start
      • Vonage SMS Quick Start
    • Twitter Overview
      • Twitter Quick Start
    • WeChat
      • WeChat Overview
      • WeChat Quick Start
    • Google Business Message
    • Email
      • Google Workspace Quick Start
      • Other Email
    • Custom Channel
      • Custom Channel Overview
      • Custom Channel Quick Start
  • New Release Update
  • Support Use Cases
    • How to Identify Contacts by Email and Phone NumberI
    • How to Enrich Customer Data from a CRM or other Business Software
    • How to Route Customers to the Right Team Automatically
    • How to Auto-Assign Customers to a Team or Dedicated Agent
    • How to Send Outbound Support Messages
    • Support: Closing Conversations
    • How to Supervise Your Support Agents
    • How to Analyze Reports for Support
    • How to Send CSAT to Customer and Save Data in Google Sheets or CRMs
  • Handling Inbound Conversations
    • Managing Spam
    • Create Automated Welcome and Away Messages
    • Get Contacts’ Consent for Personal Data Collection
    • Create Automated Chat Menus
    • Collect Contacts’ Emails and Phone Numbers
    • Route Contacts by Shifts
    • Route Contacts by Team Functions
    • Route New & Returning Contacts
    • Route VIP Contacts
    • Assignment Strategy: Automatic Contact Distribution & Load Balancing
    • Assignment Strategy: Unassign Agents after Conversations Closed
  • Capture Conversations
    • How to Streamline Meeting Scheduling via CTC Ads
    • How to Automate Product Info Sharing in Conversations Initiated via CTC Ads
    • How to Track Conversation Source from Multiple Websites
    • How to Route Contacts from CTC Ads to Agents
  • Automate Conversations
    • How to Maximize Customer Service Potential with AI Agent
    • How to Automate Contact Information Collection with AI
    • How to Route Contacts to Preferred AI Agent
    • How to Automatically Qualify Contacts Based on Budget Using AI Agent
    • How to Route Contacts by their Preferred Language
    • How to Create Automated Chat Menus
    • Assignment Strategy: How to Automate Contact Distribution & Load Balancing
    • Assignment Strategy: Unassign Agents after Conversations Closed
    • How to Create Automated Welcome and Away Messages
    • How to Block Contacts and Manage Spam
    • How to Route New and Returning Contacts
    • How to Collect Contacts’ Emails and Phone Numbers
    • How to Route New and Returning Contacts
    • How to Route Contacts by Team Functions
    • How to Route Contacts by Shifts
    • How to Get Contacts’ Consent for Personal Data Collection
    • How to Route VIP Contacts
  • How to Promptly Transfer Conversation Between Agents
  • How to Guide Customers from Exploration to Purchase with Engaging Menus
  • How to Optimize Customer Onboarding with Automated & Customized Welcome Messages
  • Converse with Customers
    • How to Get a Complete View of the Customers
    • How to Simplify Customer Escalation with Automation
    • How to Transfer Contacts to the Next Shift Automatically
    • How to Optimize Agents’ Productivity in the Messages Module
    • How to Align AI Conversations with Your Brand Voice
    • How to Draft Customer Replies with AI
    • How to Convert Image to Text Using AI
    • How Automate Calculations Using AI
  • Broadcasts Use Cases
    • How to Sending a Simple Broadcast
    • How to Start a Workflow Based on Broadcast Response
    • How to Import to Broadcast via WhatsApp
    • How to Troubleshoot a Failed Broadcast
  • Sales Use Cases
    • How to Collect Leads' Email and Phone Number
    • How to Enrich Contact Data and Qualify Leads
    • How to Route Leads
    • How to Auto-Assign Leads to Sales Agents
    • How to Send Outbound Sales Messages
    • How to Track Productivity by Closing Conversations
    • How to Supervise Sales Agents
    • How to Analyze Reports for Sales
  • Accessing Help Menu
Powered by GitBook
On this page
  1. Workspace Setting
  2. Growth Widgets

Install Website Chat Widget on WordPress

PreviousInstall Website Chat Widget on ShopifyNextHow to Track Conversation Source from Multiple Websites

Last updated 1 year ago

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.

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.

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

Go to IS-Messenger Settings > select Channels > select your website chat channel > click configure > add website domain.

Go to IS-Messenger 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.

Installing on WordPress

Step 1: Log in to WordPress

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

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.

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.

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.

Step 5: Add the Live Chat Script

Copy your plugin script from IS-Messenger and paste it into the Script in Footer section of the Header and Footer console page.

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 IS-Messenger 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.

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.

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

Once saved, it is recommended to clear the cache in WordPress.

If you don't have a code snippet already, you will generate one when creating a IS-Messenger or using the for .

If you have the channels already connected on the IS-Messenger platform and you need to retrieve the generated code snippet, follow the .

⚙️
Website Chat Widget
Facebook Chat Plugin
Facebook Messenger
instructions here
WordPress Log In Page
WordPress Logo
WordPress Plugin Page - install header & footer
Chat widget settings
WordPress Plugin Page - navigating to settings and header & footer
WordPress Plugin Page - add new button
Add the Live Chat Script in Footer of WordPress
add website domain
WP-Rocket Javascript Excluded Files
Edit Themes in Theme File Editor
Open Headers and Footer Console