Technical Marketing Guide

A travel guide for technical marketing – get inspired and start exploring yourself.

Tutorial: How to create a Facebook Messenger Chatbot

Getting started with a Facebook Messenger (or Telegram) Chatbot is now as easy as using a drag-and-drop interface – nothing is stopping you from getting started yourself.

In my opinion the best tool out there to get started is Chatfuel – a great piece of software that is (as of the time of writing this guide) completely free to use.

How to get started – What you need

1) A Facebook Page

Bots only integrate into Chats with Pages – so no, you can’t configure a Messenger Bot to keep your friends busy that try to reach you)

2) A Chatfuel account

You could also use Botsify or OnSequel but I haven’t tried either of those.

3) An idea

You sure can just experiment a bit but you probably already have an idea what you want to do with your bot.

Getting started

Instead of showing you how to use Chatfuel you should really jump in and figure out their interface yourself. It’s not complicated and they have great example bots that you can look at.

Implementing the messenger bot into WordPress

Almost more important as the bot itself is where you will grow your “audience” for your bot. As for me I decided that the bot would be a great way for people to contact me if they wanted to suggest a new topic for this website.

Facebook offers a few plugins that are specifically designed to be used to grow your messenger bot audience.

I decided to use the “Send to Messenger” Plugin and implement it’s code through a Custom WordPress Shortcode.

What does the bot actually do?

In the data-ref part of the code below a parameter can be passed to chatfuel. My bot accepts this parameter and sends the user to a specific conversation – in my case a custom greeting related to the communication on the website.

This is the code that I’m using in my functions.php to provide a custom shortcode. Whenever I write the defined shortcode (chatbot) in my wordpress posts content, a box with the “Send to message” button get’s rendered.

function fb_chatbot_shortcode() {
return '
<div id="chatbot_section">
<h3 style="margin-top:30px;color:#1787fb">Like these articles? – Suggest a topic</h3>
<p>If you have a suggestion for another guide or feedback to the guide you\'re reading, let me know! Just drop me a line using facebook messenger!</p>

<!-- Send to Messenger Button -->
<script> window.fbAsyncInit = function() { FB.init({ appId: "XXXXXXXXXXXXXXXX", xfbml: true, version: "v2.6" }); }; (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) { return; } js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, \'script\', \'facebook-jssdk\')); </script> <div class="fb-send-to-messenger" messenger_app_id="XXXXXXXXXXXXXXXX" page_id="XXXXXXXXXXXXXXXX" data-ref="XXXXXXXXXXXXXXXX" color="blue" size="large"> </div>
<!-- Send to Messenger Button End -->

</div>
';
}
add_shortcode('chatbot', 'fb_chatbot_shortcode'); 

Obviously the whole messenger button code has to be replaced with your own code – that you find in the “Grow” Tab of your Chatfuel Account.

Below this last sentence you should see the result in action, go ahead, try it.

Like these articles? – Suggest a topic

If you have a suggestion for another guide or feedback to the guide you're reading, let me know! Just drop me a line using facebook messenger!

Next Post

Previous Post

Never miss another guide, sign up now

Cookie Settings

© 2018 Technical Marketing Guide | Imprint