Webview API

Developers can insert a webpage into a webchat window with the Proto AICX platform.

The Webview component can be enabled in a Carousel block. Webview will load web pages within the webchat window.

The following channels support Webview:

  • Webchat
  • Facebook Messenger

Webview SDK - Required Domain Whitelisting

Whitelisting third-party domains will ensures that only trusted website have access to user information obtained via the SDK functions.

Add Whitelist Domain for Webview in Webchat

To display a webpage using Webview the domain must be added to the whitelist in the bot BUILD > SETTINGS > API page.

637

🚧

Note

Only website with https domains are allow to use the Webview feature on the bot.

Add Whitelist Domain for Webview in Facebook Messenger Channel

To display a webpage using Webview in Messenger whitelist the domain, including sub-domain, in your Facebook Page settings.

1877 1896
  1. Switch to your Facebook Page profile
  2. Click on your Facebook page profile picture on the top right corner
  3. Click on Settings & privacy
  4. Click on the New Pages Experience on the left panel
  5. Click on Advanced Messaging
  6. Edit whitelisted domains for your page under the Whitelisted Domains section

Adding Webview SDK

The following features are available in the webchat Webview when you include the Webview SDK.

FunctionDescription
getContext()Retrieves ID of the current chat.
requestClose()Programmatically close the Webview and return the user to the conversation in webchat.

The getContext() method retrieves additional information from the chat. It can be used for creating interactive user experiences or for restricting content that was intended to only be shared in a specific thread.

WebviewSDK.getContext(
  function onSuccess(context) {
    // success
  },
  function onError(error) {
    // error
  }
)

The context object is passed to the success callback.

{
  "chatId": "09d17cd9f2000084542c240aac20033x0"
}

The chat ID can be used to trigger subsequent bot messages using the below API:

https://api.proto.cx/<BOT_ID>/chat/<chatId>/manual_trigger

Path VariablesDescription
BOT_IDID of the Bot that can be found in BUILD > SETTINGS > API page.
chatIdID of the current chat.

Request Headers

KeyValueDescription
X-PROTO-TOKEN<BOT_SECRET>Bot Secret that can be found in BUILD > SETTINGS > API page.

Request Body

ParameterRequiredData TypeDescription
trigger_nametruestringThe Trigger block API code that user set in BUILD.
datafalselistThe variable that can be pass Trigger block messages.

Sample Request

curl --location --request POST 'https://api.proto.cx/<BOT_ID>/chat/<chatId>/manual_trigger' \
--header 'X-PROTO-TOKEN: <BOT_SECRET>' \
--header 'Content-Type: application/json' \
--data-raw '{
    "trigger_name": "test_trigger",
    "data": [
        {
            "name": "test_variable1",
            "value": "Alex"
        },
        {
            "name": "test_variable2",
            "value": "+0123456789"
        }
    ]
}'

Sample Response
If the request is successful, you will receive success True value from the response result.

{'success': True}

The requestClose() method allows you to programmatically close the Webview and return the end user to the webchat conversation.

WebviewSDK.requestClose(
  function onError(error) {
    // an error occurred
  }
)