Giuliano Iacobelli, Co-founder / CEOg@stamplay.com

Easily Deploy your Chat Bot to Multiple Channels with StamplayCooking time: 30 mins

Chat UX is more natural, dynamic and avoid any friction opening new accounts

The ideal user engagement channelMessaging platforms aim to change the way brands communicate with

consumers

More than 900 million monthly active users only on Facebook Messenger

In 2015 messaging apps have been the fastest growing In the global Top 10 of most used apps 6 are messaging apps

No need to download yet another app

IngredientsThe bot will be available on Cisco Spark and Facebook Messenger will use IBM

Watson Conversation to handle natural language and will be implemented using Stamplay.

Getting started

Create an account on StamplayGo to https://editor.stamplay.com/signup and create your account for free

Create the project on StamplayOnce inside, click on the green “+” button in the upper right corner and select Start

from Scratch

Create the project on StamplayType a name for your project

Grab your credentials from Watson Conversation

Enter your Bluemix account get the credentials for the Watson Conversation service

Connect IBM Watson Converstion on Stamplay

On Stamplay go to Dashboard > Integrations and search IBM Watson Conversation

Copy your Watson Conversation credentialsCopy Username and password and then click “Connect”

Copy your Watson Conversation credentialsGo to https://developer.ciscospark.com/apps.html and create a Bot

Fill basic info for your botIcon URL

https://dl.dropboxusercontent.com/u/397182/logo_white_512x512.png

Save the Access TokenOnce the bot is created you’ll see an Access token, copy it and save it

somewhere

Connect Cisco Spark Bot on StamplayOn Stamplay go to Dashboard > Integrations and search Cisco Spark bot

Copy your Spark bot tokenCopy the Access Token you got before and then click “Connect”

The Dialogue

Launch the Watson Conversation toolFrom your Bluemix account enter the Conversation service and click Launch

Tool

Import the dialogue modelClick the icon next to “Create” button and upload the dialogue model

https://app.box.com/s/x4j6fb8036lasosl45blyv9ir9s9gluo

Dialogue overview: IntentsA set of intents are used to return answers to known questions

Dialogue overview: Intents#when_it_burns intent handles questions like “what night does the man

burn?”

Dialogue overview: Intents#when_it_is intent handles questions like “what are the dates for the event?”

Dialogue overview: Intents#where_is_it intent handles questions like “where is the festival located”

Dialogue overview: Intents#what_is_it intent handles questions like “what is the burning man?”

The Dialogue modelAn Start node of the dialogue tree handles the initial conversation

The Dialogue modelCreate a root node for each intent that can answer a question (e.g

#what_is_it)

The Dialogue modelCreate a root node for each intent that can answer a question (e.g

#where_is_it)

Connect to Spark

Inizializing the integration FlowGo to Flows and start by selecting the Cisco Spark bot app from the list

Configure the event that starts the flowWe’ll start this flow everytime the bot receives a New Direct Message

Select the event that starts the flowClick on continue when you get to the Account tab, we’ve connected this

before

Adding a steps to your flowAfter each step of your workflow you can define the following action by

moving your mouse hover the + icon

Add a Contidion step to filter bot messagesSpark triggers this event also when is the bot itself writing so we filter out its

messages with a condition step that checks for the sender email address

Checking if the message is sent by the botClick on the first dropdown on the left and select personEmail, this will be the

property we use to recognize if is a bot writing (something@sparkbot.io)

If the condition is met stop the flowTo run a branch of our flow only when the condition is met let’s add a step that

will be executed IF TRUE.

Adding a Stop stepAfter clicking IF TRUE, select STOP to add a step that will terminate flow

execution.

Saving the Stop stepSave the new step without any additional configuration and you’re good to go

Retrieve message contentThe New Message trigger of Spark only pass an ID of the message received

without content. To read the actual message we add the Get Message action.

Passing data from step to stepTo use a Message Id from a previous step. Click on the “{}” button to see the

steps available to fetch data from and select New Direct Message.

Passing data from step to stepClick on the id attribute of the message JSON representation sent by Spark

Passing data from step to stepStamplay will add a parameter inside the input field and will automatically

replace it with the actual value of the id of the New Direct Message that will trigger this flow

Passing the message to WatsonNow that we have the message that has been type by the user we can pass it

to Watson, add a new Action and select IBM Watson Conversation

Passing the message to WatsonSelect the only action available, Conversation

Passing the message to WatsonFill the parameters by passing the Workspace ID and the text. Workspace Id is

available on the Watson Conversation tool home, text will be passed by the previous step.

Getting the Workspace IdOn your account of the Watson Conversation tool you can find the workspace

Id by entering the Workspace details

Passing the message to WatsonSelect the text attribute from the JSON representation passed by the Get

Message action

Passing the message to WatsonStamplay will add a parameter inside the input field and will automatically

replace it with the actual value of the text of the Get Message action

Returning the answer to the UserThe last step of our flow is to return the answer computed by IBM Watson

Conversation. Add one more action and select Cisco Spark Bot Post Message action

Returning the answer to the UserThe Room dropdown shows us all the room where the bot is currently

available. Click on Type a custom value to be able to pass here a dynamic value

Returning the answer to the UserOnce che cursor is blinking, click on the “{}” button to grab a valid Room Id

from the New Direct Message step of this flow

Returning the answer to the UserSelect the roomId attribute from the JSON representation

Returning the answer to the UserText field will be filled by passing the result returned by IBM Watson

Conversation, once again click the “{}” button to open the dropdown with the previous step of the flow

Returning the answer to the UserAfter selecting IBM Watson Conversation select the text attribute nested under

output

You’re all setThe final flow should look like this, make sure it’s on by checking the switch

Adding Messenger

The Data Model

Connecting your Facebook Page

Connecting your Facebook Page

Creating the integration Flow

What starts the flow (trigger)

Configuring Webhook URL on Facebook

Configuring Webhook URL on Facebook

Configuring Webhook URL on Facebook

Lookup for existing conversations

If conversation not found..

..get info about user profile..

..process user message with Watson..

..save new conversation record..

.. and reply to user on Facebook Messenger

Giuliano Iacobellig@stamplay.com

Thanks!