Image for post
Image for post
Photo by NeONBRAND on Unsplash

Microsoft Power Virtual Agents Integration to WordPress

Add A Chatbot To Your WordPress site!

Introduction

Integrating a chatbot with your WordPress site is easier than you think!

First a word on WordPress…

WordPress has become a global phenomenon since its launch in 2003. It is said that 35% of the Internet is powered by WordPress, meaning more than 75,000,000 websites are using WordPress.

Of all self-hosted websites, 20% uses WordPress.

WordPress has over 54,000 plugins to add an online store, galleries, mailing lists, forums, analytics, and of course chatbots!

The growth of WordPress does not seem to be relenting due to a robust community, among a slew of other factors. WordPress is available in over 50 languages, while content is published in over 120 different languages, constituting 14% of the top 100 websites. Getting 175 million page view per month.

Step-By-Step Guide To Add A Chatbot

I wrote an article where I give a step-by-step guide on how to implement the IBM Watson Assistant chatbot on a WordPress side making use of a plugin.

But back to Microsoft Power Virtual Agents…

Microsoft Power Virtual Agents — Chatbot Development Environment

The Bad News

Currently there is no Microsoft Power Virtual Agents plugin for WordPress.

Microsoft Power Virtual Agent — Build a Simple Echo Bot

The Good News

Microsoft Power Virtual Agents can generate iframe code which you can use to embed the chatbot in your WordPress website.

This code is standard and can be used as-is in most instances.

The updates you will make to the WordPress code is not complicated at all; you basically just need to drop the snippet into the existing code.

Microsoft Power Virtual Agents (MPVA)

Below are two Medium stories which will assist you in building our first chatbot on MPVA.

After you have already created your chatbot, you will need to publish it…for the world to use!

Publishing on MPVA is a straight forward process where you click on publishing and waiting for the process to complete.

Image for post
Image for post
Publishing Your Chatbot

Once this done, a green banner will appear at the top of your browser. From here you can choose to configure your channels. These channels, or Mediums, are really avenues through which your user will access your chatbot. These avenues can be social media, text, the web etc.

Image for post
Image for post
Your View After The Chatbot Has Been Published

Once you click on Go to Channels, you are presented with a whole array of tiles, each representing a channel or medium. For the purpose of this exercise, we will select Custom website.

Image for post
Image for post
Tiles With Various Mediums Or Channels

This is what you want to achieve, deploying the chatbot to your own website. You will be presented with a window where the HTML code is shown for embedding the chatbot.

This code snippet you can copy and share…just be cognizant of the fact with who you share it with…there is a specific code in the URL which allows websites or other mediums to use your chatbot.

So if your chatbot is a weather app, other websites can decide to host it, driving up unwanted traffic and cost for you.

Image for post
Image for post
HTML to Embed The Chatbot

For now we are done with MPVA, let’s move to WordPress…

WordPress Configuration

Log into the WordPress management console (also referred to as the Dashboard) and on the left-hand pane, click on pages.

Image for post
Image for post
Click to View All pages Or Add New

Here you can select All Pages or Add New. I selected App Pages and selected an existing page from here where I want to embed my chatbot.

Once you have opened the page for editing, you need to edit the page on code level.

I have experimented with iframe plugins without any real success.

Seemingly the best option is to edit the HTML code yourself.

If you don’t see yourself as a programmer, do not regard this as daunting, actually it is very straight forward! :-)

Click on the gear button at the top right-hand side…from the drop-down, select Code Editor.

Image for post
Image for post
Access the HTML Code By Clicking on Code Editor

Once you can see the HTML code, read through it and select the area where you want to place your chatbot. Click there and paste the code snippet you copied from MVPA.

Image for post
Image for post
Microsoft Power Virtual Agents’ Code Snippet Pasted In WordPress Page.

From here you can click on the Update button next to the Gear button you selected in the previous step, or preview your changed prior to committing it.

Conclusion

Commercial Cloud chatbot providers are all making huge strides in enabling their users to publish Conversational UI’s to mediums with ease, and by only using a few clicks.

The collection of mediums available are growing, and seemingly Microsoft Power Virtual Agents, as a single product, has the largest range of available avenues to deploy to. Integration was challenging in the past, but this impediment is diminishing very fast.

Image for post
Image for post
Microsoft Power Virtual Agents Chatbot In Action. Hosted in WordPress.

NLP/NLU, Chatbots, Voice, Conversational UI/UX, CX Designer, Developer, Ubiquitous User Interfaces. www.cobusgreyling.me

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store