Here's overview:

  1. How to pass data from Chatfuel to your webview
  2. How to pass data from your webview back to Chatfuel
  3. How to manage webview (i.e. close)
  4. How to continue user's flow in the bot when webview was closed

How to pass data from Chatfuel to your webview

There are 2 parts actually - passing data from your backend to Chatfuel (optional), and passing data from Chatfuel to your webview.

In order to pass data from Chatfuel to webview, you should use attributes in the URL, i.e. create a button and put there URL like https://yourdomain.com/webview-address?user_id={ { messenger_user_id} }&more_info={ {custom_attribute} }.

[it's good to put an image of a card here]

To pass data from your backend Chatfuel use JSON API Plugin (check out how to set up user attributes with the JSON API Plugin). You can use it before showing the card with webview. Or you can even return the card with the webview in JSON response.

How to pass data from your webview back to Chatfuel

When user finished what you wanted in the webview, it's time to get the data. Right now you can't pass data directly to Chatfuel. We might develop our own JS SDK later in order to simplify it. So, you should pass data from the webview to your backend and then to Chatfuel using Broadcasting API.
Don't make Broadcasting API calls from the webview itself because it's not secure (you'll share Chatfuel's Broadcasting API token to everyone then).

How to manage webview (i.e. close)

Usually you'll need only one thing - close the webview when users finish their job there. Use Messenger Extensions SDK to do it.
Don't forget to whitelist your domain in Chatfuel's Configure tab. Otherwise Messenger Extenstion SDK won't work.

How to continue user's flow in the bot when webview was closed

Along with passing data back to Chatfuel using Broadcasting API you can send a user to any block to continue his experience. Here's example:

  1. User click final button (i.e. Submit) in your webview
  2. The webview passes data to your backend
  3. Webview closes itself using Messenger Extenstions SDK
  4. You backend pass data & next block to Chatfuel using Broadcasting API

So the whole flow looks like this

  1. (optional) JSON API Plugin request to get latest data from your backend
  2. Render card in the bot with webview's URL in the button. Pass data that you need via URL parameters
  3. User do something in the webview
  4. User click final button (i.e. Submit) in your webview
  5. The webview passes data to your backend
  6. Webview closes itself using Messenger Extenstions SDK
  7. You backend pass data & next block to Chatfuel using Broadcasting API
Did this answer your question?