Webviews are an essential part of Botonic and chatbots. They allow you to open standard webpages during a chat conversation, offering a rich experience and a set of features that are difficult to create with simple component messages.
For example, you can create a webview for choosing different products, selecting a range of dates from a datepicker, or making a purchase.
With Botonic, it's easier to create a webview than developing your own a webpage and integrating it with the Facebook app, inserting the Facebook SDK, keeping the bot conversation flow, etc.
Structure of the webviews Directory
All the code related to webviews resides in its respective
src/webviews directory. These are the essential elements it has to contain:
- index.js: where we define all the React Components inside the class WebviewApp. Additionally, it includes its constructor method, a way of defining the locales object from the bot.
- component.js: simple React Components you develop.
Note: With this structure, you don't have to worry about the communication between the bot and the webviews. You can just focus on adding new components to
index.js and developing new ones. If you change the structure, do it at your own risk!
Now, let's integrate the bot with the webviews.
Invoking the Webview
You can only open a webview with a
button. Create an action to invoke the webviews, as shown in the example. In this case, we named a route which will be resolved by
We can pass parameters into the new component as shown below.
Note: You can also set the dimensions of the webview (available on Messenger phone version).
Creating a Webview Component
First of all, we create a new component inside
Note: The closeWebview function allows you to send data back to the bot in order to continue with the conversation flow.
In this example, you can see that we have a button, and when it's triggered we send the
path to the bot with a params object which contains a new Date.
Adding Components Into Routes
After having our component created, move to
src/webviews/index.js and simply add the new component that was just created.
This an element to invoke the webview:
This is how the webview looks on Facebook Messenger: