Bot Tutorials
Yelp Api Connector Bot

Yelp Api Connector Bot

ServisBOT BaaS is the home for mappings between the ServisBOT platform and external services such as APIs and SDKs. The easiest way to see the power of a BaaS is build one using our out-of-the box blueprints, and build a demo bot.

Note

Blueprints can contain more than just one ServisBOT bot building block. There are blueprints for just BaaS items, or just bots with workers, and then there are also blueprints with all three.

Yelp Search BOT

In this example we will guide you through the steps to create and test a Yelp BaaS API connector, then extend a basic classic flow conversation with it.

Requirements

Build a Classic Flow Bot from Blueprint

  1. Go to the Bot Army tab
  2. Click on Create BOT and from the drop-down From Blueprint
  3. Select the “ServisBOT Flow” Blueprint
  4. Name this bot RestaurantSearch
  5. Enter anything for the description
  6. For the welcome message, we want to let the user know that this bot can help them find a restaurant Hi, how can I help?
  7. Click create
  8. If building was successful, click Finish.
  9. We will come back to this area later.

Build a Yelp Api Connector from Blueprints

  1. First set up your secret, containing your API Token
  2. You’ll need to create a Yelp Fusion API key
  3. Go to Secrets Management in portal
  4. Click Create Secret
  5. Select Token Auth as your Secret Type Template from the creation page
  6. Replace APIKEY with your Yelp key
  7. Hit save
  8. Time to move on to creating the API Connector
  9. Go to Integrations
  10. Click on Create Connector and from the dropdown menu From Blueprint
  11. Select the Yelp Business Directory
  12. Enter a Connector Name. Suggested businessSearch
  13. From the secrets dropdown, select your recently created secret
  14. Create Connector will save all of your settings into the platform.

Wire up your bot to the Api Connector

  1. Go back to the Bot Army section of portal and find your bot.
  2. Click on your RestaurantBot
  3. On the bot’s detail page there will be a button up at the top labeled Designer which will take you to the Classic Flow canvas.

  1. Your Flow will start off looking like this:

  1. We will begin by editing the purple prompt node

    1. Double click the purple node
    2. Add a new option for Find me a restaurant

    1. After clicking done, there will be a new 6th output on the node.
    2. Rewire the bottom node to the Next Worker node as the bottom node is specifically for when a user types instead of choosing an option.

  2. Drag and drop an apiConnector node onto the Canvas

    1. Name it yelpBusinessDirectory

    2. Edit the context fields

    3. Connect up the fifth output from the prompt node to the apiConnector node

  3. Process the ResponseMapping

    1. Drop a function node onto the canvas
    2. In the function body assign the API response to a messenger variable
msg.payload.foodPlaces = msg.apiConnector.yelpBusinessDirectory.response.businesses;
return msg;
  1. Wire the output from the top port of the apiConnector to the input of the function node
  2. Set up the markup template. We will use a carousel to display the yelp template.
    1. Drop the Interaction Node on to the canvas
    2. Edit the node
      1. Select ‘Carousel’, ‘Dynamic’ from the ‘Samples’ list
      2. Add in the following markup.

<TimelineMessage>
  <List title="Select a restaurant" horizontal="true" selectable="true" style="large-icon" interactionType="event" preventRetries="true">
    #foreach($foodPlace in $payload.foodPlaces)
    <Item title="$foodPlace.name" subtitle="" id="$foreach.index" imageUrl="$foodPlace.image_url">
      <Option title="Reserve" id="Reserve"/>
      <Option title="Details" url="$foodPlace.url" urlTitle="See Restaurant Details"/>
    </Item>
    #end
  </List>
</TimelineMessage>
  1. Wire the output from the function node to the input of the interaction node

Setup the return message and finish wiring

  1. Drop a markup node onto the Canvas

  2. Wire the output from the interaction node to the input of the markup node.

  3. Name it, change Source to Message Object and edit the message to be msg.foodPlaces

  4. Wire the output to the back to the purple prompt node

  5. Deploy and test

    1. Click Deploy in the canvas and navigate back to the bot pages
    2. From the bottom of the test page you can open up a preview window.
    3. Now when the bot displays the menu, you can select Find me a restaurant, the bot should send you a list of restaurants in a carousel.

Last updated on