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

In this guide, you’ll learn how to add the Omnichannel Widget to a WordPress site or a WooCommerce store.

Prerequisites

• Be the manager of your MessageBird Inbox account

• Be an admin for your WordPress site or WooCommerce store.

Enabling the Omnichannel Widget

1. Log in at dashboard.messagebird.com and go to Inbox or go directly to inbox.messagebird.com.

2. Go to Inbox settings.

3. Click on Channels and open Omnichannel Widget.

4. Customize your 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) to signal Inbox — it should accept chat requests coming from your WordPress site or WooCommerce store.

6. Done? Awesome! Hit Publish changes and activate the widget. You can always come back and change the Inbox settings.

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

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.

Using a plugin

There are various plugins that allow javascript injection on a WordPress site Insert Headers and Footers, Head, Footer and Post Injections, 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.

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.

2. Select to edit the functions.php file.

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:

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');

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.