Summary: wordpress website widget
In this post I’m going to show you how to set up an AI powered Facebook Messenger widget on your WordPress site.
Here are some of the things your widget will be able to do:
1. Greet visitors when they land on your page
2. Automatically subscribe them to your chatbot so you can later re-engage them with push notifications
3. Provide support and answer frequently asked questions
4. Let customers search for or order products directly in the widget (ecommerce functionality)
5. Leave you a message
6. Alert you or a customer support rep if the bot cannot answer a question
7. If you’re curious about any other functionality, ask me in the comments and I’ll let you know if its possible and how to set it up!
1a. Setting up your bot
Before the widget comes the bot itself. The bot is build on Facebook Messenger. Zebo offers the easiest and quickest way to build an AI Facebook Messenger chatbot for WordPress and set up a chat widget on your WordPress site.
Make sure to sign up with your Facebook account and then click on Ecommerce under Templates and select the Facebook page for your WordPress site. If you don’t have woocommerce then you can also click on Start from Scratch. If you choose the ecommerce template, you don’t have to add ecommerce functionality today. But choosing the template, enables you to add it onto your bot very easily later on should you like to.
1b. Create a welcome message
Create a welcome message in Build > Content. Simply click on New content, name your content and then select the type of content you’d like. As you can see below, you can also stack up content. Then go to Build > Automation and set that as your Welcome Message
1c. Add some basic automation
There are two ways to go about the responses. 1. Zebo’s basic keyword AI 2. DialogFlow.
Zebo’s Keyword AI allows you to automate questions without needing any knowledge of AI or ML. Simply enter keywords and select the content to be returned by your content when someone types those keywords. You can use rich content e.g. pictures, videos, cards, carousels, call to action buttons
If you’d like to set up a widget for a bot made on another platform, scroll down to point 5 and follow the instructions to retrieve the code from your inbox and paste into your wordpress dashboard.
2. Setting up your widget
The code for your bot’s website widget is available in Growth Tools > Website Widget. It is also available in your Page Inbox. I explain both methods below:
3. Whitelisting your domain
Facebook requires you to whitelist your domain. Don’t worry, it only takes a second! Click on Growth Tools > Website widget > Set Up and then whitelist your domain
According to Facebook Messenger guidelines, to be whitelisted, your domain must:
a. Be served over HTTPS
b. Use a fully qualified domain name, such as https://www.zebo.io/ or https://www.yourwebsite.com . IP addresses and localhost are not supported for whitelisting.
4. Standard Widget
You can use the standard widget on your website or customize it to your purpose. The standard widget uses Messenger blue and the welcome Greeting is “Hi (first name)! How can I help you?”
To embed the standard widget, copy the code shown and then insert it into the body of HMTL of your website using the method explained below in point 6.
5. Custom Widget
The widget is customized from your page inbox. To your Page > Settings > Messenger Platform and then scroll to where it says Customer chat plugin. You can also whitelist your domain here and/or whitelist additional domains you want to set the same widget up on. Select the colors you like and enter the welcome greeting you want to show! Copy the code and insert it into the body of HMTL of your website using the method explained below in point 6.
6. Inserting the code in your WordPress site
We recommend the Head, Footer and Post Injections plugin from Stefano Lissa.
Download the plugin here and then upload it to your WP Dashboard via Plugin > add new. Activate it and then refresh your page. Now on your left side bar, you’ll see it under Settings > Header and Footer. Click on it and where it says AFTER THE <BODY> TAG insert the Messenger code you copied. After you save it, you’ll be able to see the widget on your site!
Also published on Medium.