# Install on WordPress

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

![The WordPress Logo](https://3688769499-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mbui1HRO4dGghy5ITOz%2F-McwRyuRDhMlGkfn8go2%2F-McwSLCH-GQA67Zqduzm%2Fimage.png?alt=media\&token=ab9d5342-4554-4286-ad7a-d267ed7d4762)

## Setting Up for Installation

{% hint style="info" %}
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
{% endhint %}

If you don't have a code snippet already, you will generate one when creating a **ISMessenger** [Website Chat Widget](https://docs.is-messenger.com/ismessenger/messaging-channels/website-chat-widget) or using the [Facebook Chat Plugin](https://docs.is-messenger.com/ismessenger/messaging-channels/facebook-messenger/facebook-chat-plugin) for [Facebook Messenger](https://docs.is-messenger.com/ismessenger/messaging-channels/facebook-messenger).

{% hint style="info" %}
If you have the channels already connected on the ISMessenger platform and you need to retrieve the generated code snippet, navigate to the [Manage Channels](https://docs.is-messenger.com/ismessenger/workspace-setting/channels) section under [Settings](https://docs.is-messenger.com/ismessenger/messaging-channels/website-chat-widget/broken-reference). Press the respective blue **Edit** button to find the generated script.
{% endhint %}

## **Installing on Wordpress**

### **Step 1: Log in to WordPress**

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

![](https://3688769499-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mbui1HRO4dGghy5ITOz%2F-McwRyuRDhMlGkfn8go2%2F-McwSZZqkkkqS45bKauY%2Fimage.png?alt=media\&token=7f87c311-3008-4964-9700-42b5ab337036)

### **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 pag&#x65;**.**

![The Add New Plugin Button ](https://3688769499-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mbui1HRO4dGghy5ITOz%2F-McwRyuRDhMlGkfn8go2%2F-McwSpH7u6RaEG2zx4iR%2Fimage.png?alt=media\&token=442ad8c9-1500-477a-ab68-465f72fe5569)

### **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.

![The Insert Headers and Footers Plugin](https://3688769499-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mbui1HRO4dGghy5ITOz%2F-McwRyuRDhMlGkfn8go2%2F-McwTvxAMFkFAYKdTKnZ%2Fimage.png?alt=media\&token=116f8572-d49b-4b33-932d-4f902ce7f383)

### **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.

![Navigating to the Plugin Console Page](https://3688769499-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mbui1HRO4dGghy5ITOz%2F-McwRyuRDhMlGkfn8go2%2F-McwUF8Vgpr1ocUpZrgA%2Fimage.png?alt=media\&token=88f0aaae-81d2-4866-9c81-f42a6695f364)

### **Step 5: Add the Live Chat Script**

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

![](https://3688769499-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mbui1HRO4dGghy5ITOz%2F-McwRyuRDhMlGkfn8go2%2F-McwUV7QcLX757UBZEoZ%2Fimage.png?alt=media\&token=4b37ecbc-7f61-4114-a383-58a78a175a65)

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

### **Done!** <a href="#done" id="done"></a>

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.

{% hint style="info" %}
The chat widget is now active on your website!
{% endhint %}

## Identify Logged-in Users

{% hint style="info" %}
This section is only applicable if your website has user login feature.
{% endhint %}

### Step 1: Log in to WordPress account

Navigate to your website's WordPress Admin Dashboard and log in.&#x20;

### Step 2: Open the Theme Header Files&#x20;

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

<figure><img src="https://3688769499-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mbui1HRO4dGghy5ITOz%2Fuploads%2F5gD4ILs8VBZzUwuuYaoQ%2FScreen%20Shot%202022-03-15%20at%201.41.39%20PM.png?alt=media&#x26;token=5a0852e3-3a65-4a6d-955a-95d9c53010f0" alt=""><figcaption></figcaption></figure>

### Step 3: Add the retrieve 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 on the bottom of the page.

{% hint style="info" %}
The sample code below is to get the user Id, first name and last name of wordpress. Feel free to amend if you would like to get other contact fields.&#x20;
{% endhint %}

```
<?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.

<figure><img src="https://3688769499-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mbui1HRO4dGghy5ITOz%2Fuploads%2FOEclQUVqygcj8gDlGZ3e%2FScreen%20Shot%202022-03-11%20at%201.39.47%20PM.png?alt=media&#x26;token=4c78e166-98d8-4a65-9a36-42b97f49ba8c" alt=""><figcaption></figcaption></figure>

### **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**.

{% hint style="info" %}
The sample code below is using the user Id as the idenfiter and pass along with the first name and last name. Feel free to amend if you would like to get other contact fields.
{% endhint %}

```
<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 on 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.&#x20;

## Limitations

### WP-ISMessenger

If you are using a WordPress cache plugin such as WP-ISMessenger, you might need to add our widget domain to the Javascript Excluded Files.&#x20;

```
https://cdn.app.is-global.com/webchat/widget/(.*).js
```

![](https://3688769499-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mbui1HRO4dGghy5ITOz%2F-McwRyuRDhMlGkfn8go2%2F-McwWEFoqPamhM8w4BYH%2Fimage.png?alt=media\&token=7cb6f97a-0c97-4e5b-a096-e04c9b7d53c4)

{% hint style="warning" %}
Once saved, it is recommended to clear the cache in WordPress.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.is-messenger.com/ismessenger/messaging-channels/website-chat-widget/install-on-wordpress.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
