Display web inside chatbots using Webview

By Adam Wen
April 28, 2021

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

CloudIntern 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.

How to use CloudIntern 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).

Was this article helpful?