Webviews

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 src/webviews/index.js.

We can pass parameters into the new component as shown below.

src/actions/invoking_webviews.js

import React from 'react'
import {
  Text,
  Carousel,
  Element,
  Pic,
  Title,
  Subtitle,
  Button,
} from '@botonic/react'

import Example from '../webviews/example'

export default class extends React.Component {
  render() {
    //Here we render a Facebook Carousel with its proper assets and url routes for the webview
    return (
      <>
        <Text>
          Here I will give you some options of how helpful the use of Facebook
          webviews could be.
        </Text>
        <Carousel>
          <Element>
            <Pic src='https://botonic.io/images/botonic_react_logo-p-500.png' />
            <Title>Interacting with the bot</Title>
            <Subtitle>See how the communication bot-webview is done</Subtitle>
            <Button webview={Example} params={{ hola: 1 }}>
              Go
            </Button>
          </Element>
        </Carousel>
      </>
    )
  }
}

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 src/webviews.

src/webviews/Example.js

import React from 'react'
import { RequestContext } from '@botonic/react'

export default class Example extends React.Component {
  //for further information, see: https://reactjs.org/docs/getting-started.html
  static contextType = RequestContext

  render() {
    return (
      <div>
        <h1>Webview: Example</h1>
        <p>Params: {JSON.stringify(this.context.params)}</p>
        <button
          onClick={() =>
            this.context.closeWebview({
              path: 'hi',
              params: { date: new Date() },
            })
          }
        >
          Select today
        </button>
      </div>
    )
  }
}

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.

import Example from './example'

export const webviews = [Example]

Example

This an element to invoke the webview:

This is how the webview looks on Facebook Messenger: