Create a simple chatbot that shows Restaurants around the user

This chatbot will have the ability to ask for user's location and then show places nearby (Restaurants, Hotels, ATMs, Petrol pumps, hospitals), for the sake of this tutorial I am sticking to restaurants. We will be triggering a Flowxo flow from chatfuel and then get the results from Google Places API, extract all the details that we need and then push the results back to chatfuel, which will be pushed to the bot user.

Prequisites

1. Create an account on Chatfuel
2. Create an account on Flowxo

Setup bot on Chatfuel

1. Connect your chat bot to your facebook page.

2. Navigate to Automate section and create a Group for the Blocks and name it "Find Restaurants" or anything you want.

3. Create a block "find-restaurants"

• Create a text card telling the users that they will need to share their location in order to find restaurants around.
• Add a "Share location" plugin.

4. Create a block "results-restaurants"

• Create a Gallery, Fill out the gallery items manually and fix a template of how a gallery item would look. (Some items may turn Red indicating errors as you have not linked an action with those buttons, don't worry about it, we will edit those in later steps.

• Navigate to "Setup AI" and Create a Rule for when user types "Find Restaurant", the bot should trigger the block "find-restaurants".

Setup Flowxo

1. Create a new flow on flowxo and select "Blank Flow" when prompte to select a template.

2. Select "Receive a Webhook" as trigger when prompted to select a trigger. (DO NOT SELECT "RECEIVE A WEBHOOK" UNDER BROADCASTS)

3. Copy the Test hook URL generated on the next screen.

4. Open find-restaurants block in the Chatfuel dashboard and add a "JSON API plugin" just after the "Share Location" plugin. Paste the copied Webhook URL and add the following parameters to it

?latitude={{latitude}}&longitude={{longitude}}&chatfuel-userid={{messenger user id}}

So the complete URL should look something like

https://flowxo.com/hooks/a/7apgev9k?latitude={{latitude}}&longitude={{longitude}}&chatfuel-userid={{messenger user id}}

5. Once you have done this, Click on the "Test this Chatbot" button on the upper right corner of your Chatfuel dashboard, open facebook and trigger the find restaurant flow by replying "Find restaurant" to your chatbot.

6. Go back to Flowxo "Waiting for webhook" must have changed to "Webhook Received", click on Next to proceede and Save it.

7. Click on "Click here to add an action" and select "Make a HTTP Request" on the "Select an action" window.

8. On the HTTP Request Settings window, select GET in Method Type, Raw Body in Content Type and type in the Google Maps Places API URL in the Request URL field and hit Next and Save it, rename it to "Get Restaurants Nearby".To get a Google API Key, please visit this link and Click on "Get a Key" on the upper right corner.

Google Maps Places API Url:

https://maps.googleapis.com/maps/api/place/nearbysearch/json?location={{receive_a_webhook.latitude}},{{receive_a_webhook.longitude}}&name="restaurants"&rankby=distance&key={{GOOGLE API KEY}}

9. Create another "HTTP Request" action just below the "Get restaurants nearby" action, select GET in Method Type, Raw Body in Content Type and type in the Google Places Details API URL in the Request URL field and hit Next and Save it, rename it to "Get Place1 Details".

https://maps.googleapis.com/maps/api/place/details/json?placeid={{get_restaurants_nearby.data__results__0__place_id}}&key={{GOOGLE API KEY}}

You can skip steps 10 to 12 if you DO NOT want to display a Map Link/Navigate Link.

10. Add another action below "Get Place1 Details" and select "More Services" at the bottom on the "Select Action" window and select "Text (String)" on the "Chose a Service" window.

11. Select "Split Text" in the "Select an Action" window and hit next.

12. On the Test (String) - Split String Settings page, input {{get_place1_details.data__result__url}} in the "Text" field and input "cid=" in the Separator field and hit Next and Save it. You can change it's name to "Split Text1"

Repeat Step 9 for each additional gallery item (Restaurant)

Pushing all the data back to Chatfuel

13. Add another action at the end of the flow, select "Make a HTTP request".

14. On the "HTTP Requests Settings" window, select "POST" as Method and "application/json" as Content Type. In Request URL, write the Chatfuel Broadcasting URL mentioned below and fill in body and hit Next and Save it.

https://api.chatfuel.com/bots/Enter-your-Chatfuel-bot-ID/users/{{receive_a_webhook.chatfuel-userid}}/send?chatfuel_token=Enter-chatfuel-token&chatfuel_block_name=results-restaurants

Body

{

"place1_name": "{{get_restaurants_nearby.data__results__0__name}}",

"place1_add": "{{get_restaurants_nearby.data__results__0__vicinity}}",

"place1_url": "{{split_text1.string2}}"

}

*Increment the numbers in bold by 1 as you keep on adding more items to the Chatfuel block result-restaurants gallery. Read Chatfuel Broadcasting document to know where to find bot-id and chatfuel-token

15. Switch On the flow from the button on the upper right corner in Flowxo.

Receive Results in Chatfuel Gallery

1. Receive the parameters that you have pushed from Flowxo in the "results-restaurants" block as shown below and delete the template gallery item that we created (In this case, Punjabi by Nature item). Ensure there are no red bubbles in your block indicating some error.

2. Test your chatbot, If you have added only 1 gallery item, this bot will show you the nearest restaurant near you, you can add more gallery items by repeating step 9 and if needed Step 10-12 also in the same way and it will show more options nearby to your users.

Make sure to add more parameters in the body (In Step 14) if you have added more restaurants by repeating Step 9 or it won't show up in the chatbot.

This chatbot will directly pass on the results it gets from the Google Places API and you have minimal control on the data that the bot pushes to your users, you can get a customized API written for you, which in the background can use Google Places API and saves the data in your Database too. Using a custom API, you can have more control over what is being pushed to your users and you can give priority to your partner Restaurants and give low priority to blacklisted restaurants etc.

I have been working on some Chatbots using the custom APIs and they work like a charm ;) here are some:

Bloodlink Life - The bot searches and show nearest Partner Blood Banks around you and lets you create an appointment with them. However, if a partner Bloodbank is not available, it shows you results using Google Places API.

Herbi - The bot shows nearby restaurants having enough vegetarian options in Manchester and around.

Ask.me - A bot that can search Restaurants, Hotels, ATMs, Petrol pumps or just anything around you, just type in Search <whatever you want to search> and it will show you results around you.

***You can change the name="restaurants" in step 8 to anything you want to search on Google Places and get the results (eg name="ATM", name="hotel", name=%22blood+bank%22)

Feel free to comment and ask for any assistance or for any queries. If you are looking for someone who can assist you with custom APIs for your bot, I recommend that you contact Vinay Kumar