# Adding the MessageBird Omnichannel Widget to a WordPress site or WooCommerce store

In this guide, you’ll learn how to add the [Omnichannel Widget](https://inbox.messagebird.com/manager/omnichannel-widget) to a [WordPress ](https://wordpress.com/com-vs-org/?currency=EUR\&utm_source=google\&utm_campaign=google_wpcom_search_brand_desktop_nl_en\&utm_medium=paid_search\&keyword=wordpress%20site\&creative=329693353883\&campaignid=648381347\&adgroupid=28074383050\&matchtype=e\&device=c\&network=g\&targetid=kwd-733840287\&gclid=EAIaIQobChMIzLPKhKOu6gIVjaiyCh0dVQwgEAAYASAAEgKXhfD_BwE\&gclsrc=aw.ds)site or a [WooCommerce](https://woocommerce.com/) store.  

**Prerequisites**

* Be the **manager** of your MessageBird [Inbox](https://inbox.messagebird.com/) account
* Be an **admin** for your WordPress site or WooCommerce store.

 

**Enabling the Omnichannel Widget** 

1\. Log in at [**dashboard.messagebird.com**](https://dashboard.messagebird.com/en/user/index) and go to **Inbox** or go directly to [**inbox.messagebird.com**](https://inbox.messagebird.com/)**.**

2\. Go to [**Inbox settings**](https://inbox.messagebird.com/manager/overview)**.**

3\. Click on **Channels** and open **Omnichannel Widget**.

<figure><img src="https://675349995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUJNEE9TMK4fU91VKstBr%2Fuploads%2Fgit-blob-fce1ee4435eb3fef61e9cf0af6ae1e8a2d08a37c%2Fimage1.png?alt=media" alt=""><figcaption></figcaption></figure>

4\. [Customize your widget](https://support.messagebird.com/hc/en-us/articles/360009357917-How-to-customize-the-Omnichannel-Widget) settings to make it match the style of your WordPress site or WooCommerce store (logo, colours, agent name).

5\. Under **Location** make sure to whitelist your store’s website address (e.g. [https://mystore.com](https://mystore.com/)) to signal Inbox — it should accept chat requests coming from your WordPress site or WooCommerce store.

<figure><img src="https://675349995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUJNEE9TMK4fU91VKstBr%2Fuploads%2Fgit-blob-18fb17acfd3772c644f9c92837d96b7fa3502027%2Fimage5.png?alt=media" alt=""><figcaption></figcaption></figure>

6\. Done? Awesome! Hit **Publish changes** and **activate the widget**. You can always come back and change the [Inbox settings](https://inbox.messagebird.com/manager/overview).

<figure><img src="https://675349995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUJNEE9TMK4fU91VKstBr%2Fuploads%2Fgit-blob-28c0b3b3fc75769122e0d5f25e28ef68f99a3fde%2Fimage3.png?alt=media" alt=""><figcaption></figcaption></figure>

7\. Now that we finished the configuration on the Inbox side, let’s copy the code snippet by clicking **Get code snippet**.

&#x20;

**Attaching widget to your WordPress site or WooCommerce store**

Injecting the code to your WordPress site or WooCommerce site can be done in a number of ways — depending on what plugins you have installed on your site — the important thing is to add the script to the footer of the pages where you want the widget to be visible.

&#x20;

**Using a plugin**

There are various plugins that allow javascript injection on a WordPress site [Insert Headers and Footers](https://wordpress.org/plugins/insert-headers-and-footers/), [Head, Footer and Post Injections](https://wordpress.org/plugins/header-footer/), [Header Footer Code Manager](https://wordpress.org/plugins/header-footer-code-manager/), just to name a few.

Once you have such a plugin installed, navigate to the section where you are managing your footer scripts (e.g. **Settings » Insert Headers and Footers**, for the Insert Headers and Footers plugin) and paste the entire script there.

&#x20;&#x20;

**Direct injection in the theme’s code**

If you don’t have a footer plugin, you can modify the theme’s code to include the snippet.

1\. Navigate to **Appearance** and go to the **Theme Editor**.

<figure><img src="https://675349995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUJNEE9TMK4fU91VKstBr%2Fuploads%2Fgit-blob-0442cd10a44d5efa9332e1bb24b5cb16268db417%2Fimage6.png?alt=media" alt=""><figcaption></figcaption></figure>

2\. Select to edit the **functions.php** file.&#x20;

<figure><img src="https://675349995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUJNEE9TMK4fU91VKstBr%2Fuploads%2Fgit-blob-3e2130e04c0eeda9b3159115bc214ef12c83b228%2Fimage7.png?alt=media" alt=""><figcaption></figcaption></figure>

3\. To insert the script to the footer of all pages, Scroll down to the bottom of the file and add the following code.

```
function wpb_hook_javascript_footer() {
    ?>
      //script goes here
    <?php
}
add_action('wp_footer', 'wpb_hook_javascript_footer');
```

For our example, it looks like this:&#x20;

```
function wpb_hook_javascript_footer() {
    ?>
        <script>  var MessageBirdChatWidgetSettings = {     widgetId: '17c9769d-d9a1-45d3-af12-5759232920cb',     initializeOnLoad: true,   };  !function(){"use strict";if(Boolean(document.getElementById("live-chat-widget-script")))console.error("MessageBirdChatWidget: Snippet loaded twice on page");else{var e,t;window.MessageBirdChatWidget={},window.MessageBirdChatWidget.queue=[];for(var i=["init","setConfig","toggleChat","identify","hide","on","shutdown"],n=function(){var e=i[d];window.MessageBirdChatWidget[e]=function(){for(var t=arguments.length,i=new Array(t),n=0;n<t;n++)i[n]=arguments[n];window.MessageBirdChatWidget.queue.push([[e,i]])}},d=0;d<i.length;d++)n();var a=(null===(e=window)||void 0===e||null===(t=e.MessageBirdChatWidgetSettings)||void 0===t?void 0:t.widgetId)||"",o=function(){var e,t=document.createElement("script");t.type="text/javascript",t.src="https://livechat.messagebird.com/bootstrap.js?widgetId=".concat(a),t.async=!0,t.id="live-chat-widget-script";var i=document.getElementsByTagName("script")[0];null==i||null===(e=i.parentNode)||void 0===e||e.insertBefore(t,i)};"complete"===document.readyState?o():window.attachEvent?window.attachEvent("onload",o):window.addEventListener("load",o,!1)}}();</script>
    <?php
}
add_action('wp_footer', 'wpb_hook_javascript_footer');
```

<br>

<figure><img src="https://675349995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUJNEE9TMK4fU91VKstBr%2Fuploads%2Fgit-blob-0974a180faddc656966e297566348b4f9ebec35e%2Fimage8.png?alt=media" alt=""><figcaption></figcaption></figure>

&#x20;

**Optional:** If you want to conditionally show the widget on only certain pages, you can wrap the script tag between an if statement and check for particular page iDs or port IDs.

```
 function wpb_hook_javascript() {
  if (is_single ('16')) { 
    ?>
       //script goes here
    <?php
  }
}
add_action('wp_footer', 'wpb_hook_javascript_footer');
```

Use **is\_single** to check for a particular post ID (instead of 16 you can put your own post ID).

```
function wpb_hook_javascript() {
  if (is_page ('10')) { 
    ?>
        //script goes here
    <?php
  }}
add_action('wp_footer', 'wpb_hook_javascript_footer');
```

Use **is\_page** to check for a particular page ID.

```
function wpb_hook_javascript() {
  if (is_page ('10') || is_page ('11') || is_page ('12')) { 
    ?>
        //script goes here

    <?php
  }}
add_action('wp_footer', 'wpb_hook_javascript_footer');
```

\
4\. And that’s it! **Update the file** to save the changes, publish the new site version and the Omnichannel Widget will be visible on your WordPress site or WooCommerce store. Chain up multiple **OR connectors** to add the script to multiple pages.

<figure><img src="https://675349995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUJNEE9TMK4fU91VKstBr%2Fuploads%2Fgit-blob-58c9ab40a8cc0bf6069debe00d5349ac0037f619%2Fimage2.png?alt=media" alt=""><figcaption></figcaption></figure>

\
\
\
\
\ <br>