Using Data from the Web in Flow XO

In Flow XO, you can use your bot to get data from outside web applications. With the Flow XO HTTP Request service, you can send a web request, then use the output in your flow. In this tutorial, you’ll use an HTTP Request to request information from an API, then send it to users.

If you don’t already have a free Flow XO account, get yours now.

For example, you might want your bot to send currency exchange rates from an API. For this tutorial, you’ll have your bot ask the user for a base currency. Then, it will use an HTTP Request to get currency exchange data from the Fixer.io API. Finally, your bot will send the user a card set displaying exchange rates.

Create Your Flow and Set a Trigger

The first step is to establish your flow in the Flow XO Editor. You need to create a flow and set a trigger. To do this:

1. In the Flow XO Editor, go to the Flows page and select + New Flow.
2. Give your flow a clear name.
3. Click + to add a trigger. Select Bot → New Message and click Next.
4. List some Words or Phrases that will activate this flow. For example:

The user can access your currency exchange rates flow with any of these words.

Set Base Currency

To calculate a currency exchange rate, you need a base currency for comparison. The API at Fixer.io uses Euro by default, but you can edit the URL to calculate against other currencies. In this case, you can let the user choose the base currency.

To start, check what type of input that the API can receive. Fixer.io can accept several types of input, like currency codes and historical dates. For this tutorial, we’ll use three-letter currency codes (EUR, GBP, USD, etc.).

Next, have your bot ask the user to set the base currency. To do this:

1. In your flow, add an action. Select Bot → Ask a Question, then click Next.
2. Set the Question Type to Choice. To make sure the output matches what you need for the API, give the user a list of options to choose from.
3. For each choice, set the Value to the corresponding three-letter code. The Value field can be especially helpful if you want your Choices to be more explanatory than the Value you need for the HTTP Request. In this case, the currency codes will work for both the Choice and Value.

The Ask a Question window should look like this:

Finish the action and click Save. Now the user can choose which currency they want to use as the base for exchange comparison. In the next step, you’ll use the output from this action in the currency API.

Make an HTTP Request

In Flow XO, you can use the HTTP Request service to gather data from outside web applications. In general, an HTTP request sends data to another server, then logs the output.

For this example, your bot will take the user’s base currency. Then, the HTTP Request service will send the base currency to the currency exchange API. Your bot will then log the output, in this case, a list of exchange rates.

To make an HTTP Request:

1. In your flow, add an action. Select Webhook & HTTP → Make an HTTP Request then click Next.
2. Next, complete the HTTP Request Settings window. Make sure to review the documentation at Fixer.io so that you know what data you can send, and what data it returns:

• Request URL: This is where you are sending your HTTP Request. For the Fixer.io API, you can set the base currency by adding it to the end of the URL, for instance ?base=USD. In this case, you want to add the user’s selected currency. So, use the output from your Ask a Question action in the URL.
• Method: This field tells your bot what to do when it makes the request. In this case, use GET to log the output from the request.
• Content Type: This field tells your bot what type of data to expect. The API you’re using is a JSON application, so select JSON.
• Data: This field is useful if you need to send several key/value outputs, like form data. In this case, you only need to modify the URL to get data. So, you can leave this field empty.
• Headers: If you’re sending complex data, you can add headers as a reference point. For this example, headers are unnecessary.
• Basic Authentication: Some APIs require a username and password. The API you’re using does not, so you can leave this blank.
• JSON Options: This is how the data will display in your log. It’s a good idea to keep nesting enabled. Later, nesting will help you tell your bot what data to read from the log.

Finish the HTTP Request action and click Save.

Test the HTTP Request Output

Before you add the next action to your flow, it’s important to test the output from your HTTP Request action. Flow XO relies on the structure of the data to find information in the log. Later, you’ll use the final data structure to tell your bot what to display to the user.

At this point, when you test your flow, you won’t see any output. The important thing is that your bot logs the output from your HTTP Request. The Output Data in your log should look something like this:

As you can see, the list of exchange rates is nested inside of the rates key. This information will be important in the next step when you create a card set.

Send the Output as a Card Set

Now that you have the output from your HTTP Request, you can send it as a card set. In this case, you’ll have each card display the exchange rate for a different currency.

To set up your card set:

1. In your flow, add an action. Select Bot → Send a Card Set and click Next.
2. Set up the first card. Add a Card Title for the first exchange rate you want to display. To help the user, you can also refer back to the base currency they selected:

Next, you’ll complete the Card Text field. For this field, you’ll use the data output from your HTTP Request.

Using Data Outputs

Here is where you need the HTTP Request output log that you generated earlier. In your browser, open the log in a new tab for quick reference. You’ll use this log to tell your bot where to look for each exchange rate.

First, locate the exchange rate for AUD in your log.

• As you noted earlier, exchange rate calculations are all nested in the curly brackets after the rates key.
• The exchange rate for AUD is after the AUD key.

This means you need to tell your bot to display the data output for rates → AUD.

To set this up in your card set:

1. In the Card Text field, type {{. This will display a drop-down of outputs for each action in your flow.
2. Find the output for your HTTP Request action, and select Data { } below it:

This will open the Data Key popup. Here, you’ll use data outputs to tell your bot where to find the exchange rate you want to display. You can read more about Data Outputs in the Flow XO Help Center.

If you wanted to show the whole list of rates, you could just type rates in this field. But, because you want to show one exchange rate per card, you’ll need to type rates__AUD. In the Data Key field, the double underscore tells your bot that AUD is nested inside of rates:

Press Enter to finish the data output.

If you want a visual on your card, like a country flag, add a publicly accessible Card Image URL. Your first card should look like this:

To add more cards, click + Add a card. Then follow the same steps for each exchange rate you want to display in your card set.

If you test your flow in Messenger, it should look like this:

Conclusion

In Flow XO, there are many ways that you can use bots to send and receive data from the web. In this tutorial, you learned how to use an HTTP Request to send data to an API, then log the output. You also learned how to use data outputs to display the information in a card set. Flow XO offers even more features for web data. You can make other types of HTTP requests, read HTML or XML, and send your own data in JSON format.

Want to find out more? We have full documentation for the Webhooks & HTTP service and other features in Flow XO over at our Help Center, or get help & advice from other Flow XO users on the Community Site.