Update: We are receiving a lot of request about this article from non-developers,  if you are a merchant and want to sell your good through Facebook Messenger, contact us at info@marketcloud.it. We can help you setup your store on Marketcloud and hire a developer!


Facebook recently opened up their Messenger platform to enable bots to chat with users through Facebook Apps and on Facebook Pages. With Marketcloud you will be able to create a shopping bot that will let your customer buy directly from messenger.

Combined with Marketcloud's API, we can easily build shopping bots able to serve customer 24/7 with instant access to the whole store.

For the purpose of this tutorial, i set up a simple store selling Marketcloud merchandising, like tshirts mugs and notebooks, but it can be applied to any other kind of store.

Also, since the purpose of the tutorial is not getting through a bot's fundamentals, we will use a sample project published on GitHub by facebook.

Enough introduction, let's talk about code.

For this tutorial you will need:

  • NodeJS and NPM
  • Git
  • A Facebook App (connected to a page)
  • A Heroku account (or another place to publish your node app)
  • A Marketcloud app

Create the Facebook app

We don't want to copy and paste Facebook documentation here, so, we will refer to Facebook's official documentation .

This quickstart will get you through the page and app creation, it will explain the fundamentals of the sample project we are using. If something is not clear, you can ask in the comment section of this blog, or contact us using the live chat or join us in our slack.

Setup the sample project

Get the sample app from GitHub

git clone https://github.com/fbsamples/messenger-platform-samples
cd messenger-platform-samples/node
npm install

Create .gitignore file that ignores local modules directory:

node_modules/

Initialize repository and commit files:

git init
git add .
git commit -m 'first commit'

Setup Heroku

Now, create a Heroku account if you don’t have one, install the Heroku Toolbelt, log in to the tool, create app and push the code to server:


heroku login
heroku create
heroku git:remote -a heroku-app-name
git push heroku master

Go to your Heroku app's settings and add the following variables.

MESSENGER_APP_SECRET
MESSENGER_PAGE_ACCESS_TOKEN

Their respective values can be found in your facebook app's 



Setup webhooks

Facebook needs to know how to reach our NodeJS app, so in the facebook messenger settings, we need to setup webhooks.


The Callback URL is the URL faceboook will call whenever a user messages our facebook page, the verify token is a secret string that the node app has to match.


Click on verify and save, if the app is correctly configured, it will successfully create our webhook.

Store the verify token in as the Heroku environment variable

Alternatively to setting environment variables in Heroku, you can set those values in the configuration file default.json . 


{
    "appSecret": "",
    "pageAccessToken": "",
    "validationToken": "",
    "serverURL": "",
    "marketcloudPublicKey" : "",
    "marketcloudSecretKey":""
}

The first three values required by the bot are available in your messenger app's settings pages on facebook, the serverURL is the url given to your app by Heroku and the last two are the credentials of your Marketcloud's App.

Add the Marketcloud's NodeJS SDK


npm i --save marketcloud-node

Now let's add the sdk to the code, adding the following to app.js

const Marketcloud = require('marketcloud-node');
var marketcloud = new Marketcloud.Client({
    public_key : process.env.MC_PUBLIC,
    secret_key : process.env.MC_SECRET
});

Remember that, if you are not using environment variables, you have to substitute process.env.MC_PUBLIC and process.env.MC_SECRET with the values stored inside conf/default.json or with the actual credentials.

Now we are ready to create our first shopping related bot functionality.

Make the bot list products

First of all we are going to write a function that will implement the bot's response

function sendListOfProducts(recipientId) {

  //This is the package for the message
  var messageData = {
    recipient: {
      id: recipientId
    },
    message: {
      attachment: {
        type: "template",
        payload: {
          template_type: "generic",
          elements: []
        }
      }
    }
  };

  //We just retrieve a paginated list of products in our store
  marketcloud_client.products.list()
    .then(function(products) {

      //We attach the product to the bot's response
      products.forEach(product => {
        messageData.message.attachment.payload.elements.push({
          title: product.name,
          subtitle: product.price_discount || product.price,
          item_url: 'www.example.com/products/'+product.id,
          image_url: product.images[0],
          buttons: [{
              type: "web_url",
              url: "http://www.botlify.com/products/"+product.id, //We use this service for the checkout
              title: "View product details"
            }],
        })
      })

      callSendAPI(messageData);
    })
}

Then we are going to call it in response to a "list products" message by our customers

switch (messageText) {
      //...
      case 'list products':
        sendListOfProducts(senderID);
      break;
      //...

Now you can commit and push to heroku and your new bot will respond to your "list products" message with a list of products from your Marketcloud app.

Chat with Marketcloud



I forked the official facebook repository and added the code showed in this first part of our tutorial, you can find it here on GitHub.

In this first part of the tutorial, we managed to setup our bot on Heroku and to connect it to our facebook page. We also linked it to our Marketcloud application, now it has access to a full featured eCommerce platform. On the next part, we will add the checkout.

If you need help, drop a comment here!