# 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="/files/Dhc1sspQv95TNsQS7Isk" 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="/files/8iX1RYAFZSv6EUy0J7DH" 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="/files/gIl9BrkeXHoNIstN8Biy" 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="/files/Yx6PN50K9rkzSOdjyzjN" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/HbmATjzHvE8ovWvrcDCe" 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="/files/AOI2oGEHvVDjczo6LsqM" 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="/files/UMlq1dgoTDSEwq8Ldh0K" alt=""><figcaption></figcaption></figure>

\
\
\
\
\ <br>


---

# 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.bird.com/connectivity-platform/add-the-omnichannel-widget-to-your-online-store/adding-the-messagebird-omnichannel-widget-to-a-wordpress-site-or-woocommerce-store.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.