Display web inside chatbots using Webview

To provide chat users with a better experience while using a chatbot, bot builders now can create more dynamic content via Webviews.

BotStar Webview can display webpage content inside chatbots. It allows the chat users to open a webpage right in the chat conversations without getting out of bot flow, we can call it as a small in-app web browser. The webpages could be Youtube videos, Google Map sites, or Order transactions.

For Chatbot Developers, you can refer our Starter Kit to build your custom Webpage.

How to use BotStar Webview

Step 1: Before dragging a Webview block, you need a block that has a button such as a Button list or a Horizontal list block.

Step 2: Drag a Webview block into the Canvas and connect the button in Step 1 to the Webview block. Then, the button will have its behavior as “Go to next Webview block” in the Property Panel.

Step 3: Click Config Webview and insert the URL of a Webpage that you want the chatbot to show to your chat users in a pop-up window.

Step 4: Choose the Display size and set the Parameters:

  • Display Size: There are three sizes of the Webview interface on mobiles which are Compact, Tall, and Full.
  • Webview Parameters: Define data to send to the Webview.
  • Save Webview Data: Map data sent back from the Webpage into variables. Now you can create a Variable in Data Panel to save chat users' responses from the Webpage. Then, you can use that value for further usages. Choose the corresponding Webview data and variables to fill in Save Webview Data fields.

Step 5: Depending on the designed webpage, you can connect to other blocks:

  • Via Webview outlet (green connector): You can use the Webview Outlet to connect to another block by clicking a designed button.
  • If you do not use the Webview Outlet, you also can use the connector in block-level (purple connector).

Webview example as a Youtube video

Let’s see an example of how a Youtube video works.


Note: For Chatbot Developers, you can refer our starter kit to build your custom Webpage here: https://github.com/botstar/webview-starter-kit

Do Step 1 and Step 2 as mentioned above.

Step 3: Click Config Webview and insert the URL: https://static.botstar.com/webview/youtube/index.html

Step 4: Choose the Display size and set the Parameters:

  • Display Size: Full
  • Webview Parameters: In this case, we have 2 parameters which are youtubeUrl and ButtonName: Set Param youtubeUrl value as a Youtube video URL, and set Param buttonName as “Go Back”.
  • Save Webview Data: there is only {webview.currentSeconds} as data that we can collect from the Webpage. Create a “Played Seconds” variable. Then, set the data {webview.currentSeconds} to variable {Played Seconds}.

Step 5: Connect the Webview Outlet to Simple Text 1 block to show the result of the second we do the paused action.

If you have any concerns, please feel free to leave a comment below or contact us through support@botstar.com. For more details on how we have helped our customers grow their business, you can view our use cases, blogs or join our BotStar community to learn and share new things 😊

Did you find it helpful?   Yes   No