Web View

Web Webview

Webview allows you to create complex UI using custom html code. Since webview communicates with chatbot to exchange data, just any URL would not work until relevant code has been added to establish communication.

To create a webview the most important parameter is template URL. It can be URL of any webpage. There must be few scripts defined in the webpage for the following

1. Send a ready event to parent when webview is ready, so that bot can remove loader and show the webview.

2. Listen to postMessage for msgId(and optional data) and save it.

3. When interaction with webview is over, postMessage to parent along with msgId and option data.

Below is the sample script to demonstrate the same.

Please paste the script given below to your html so that loader is removed and webview is shown.

var msgId = null, body = null;
function onPostMessage(event) {
    if (!event || !event.data || !event.data.msgId) return; //required. check for msgId 
    msgId = event.data.msgId;
    if (event.data.body) {
        try {
            body = JSON.parse(event.data.body);//optional body to be passed from AI builder.
            //this body can be used anywhere in the code later
        } catch(error){
            console.error('Error on parsing body data', error);
        }
    }
}
window.addEventListener('message', onPostMessage);
parent.postMessage({ type: "webview.frame.ready" }, '*');//trigger this whenever webview is ready to be displayed

//call this function with text(to be shown in chat) along with optional data 
function closeFrame(text, data) {
    //data passed here will be available as a res param in the Res function of webview.
		parent.postMessage({ type: "webview", jsonData: JSON.stringify(data || {}), msgId: msgId, text: text }, '*');
}

You need to call closeFrame function to close the webview.

You can also check out sample webview URL and use it in the webview to see how it work. http://webview.intelliticks.com/common/datepicker.html

Check the source of above URL to understand it more.

Facebook Webview

The Messenger Platform allows you to open a standard webview, where you can load webpages inside Messenger. This lets you offer experiences and features that might be difficult to offer with message bubbles, such as picking products to buy, seats to book, or dates to reserve.

Setting Webview Template URL (Required Domain Whitelisting)

To display a webpage in the Messenger webview you must whitelist the domain, including sub-domain, in the whitelisted_domains property of your page Messenger Profile. This ensures that only trusted domains have access to user and node information available via SDK functions.

For more information on whitelisting domains, see the whitelisted_domains reference

If you facing any issue on whitelisting domains please contact at [email protected]

Setting Webview Height

You can specify the height of the webview when it opens in messenger by setting the Webview Display Mode property when configuring webview node. The following sizes are supported:

• COMPACT

• TALL

• FULL

facebook webview

Adding the IntelliTicks Messenger Extensions SDK

1. Include the Messenger Extensions JS SDK

Add the Messenger Extensions Javascript SDK to the page being loaded in the webview with the code below. You should insert it directly after the opening body tag on each page you want to load it:

<script src="//webview.intelliticks.com/messenger/common/iticks_fb.js"></script>

2. Wait for the SDK load event

iticksInit will be called when the IntelliTicks Messenger Extensions JS SDK is done loading. You can use this as a trigger to call other functions available in the SDK.

window.addEventListener('iticksInit', async function () {
  // the IntelliTicks Messenger Extensions JS SDK is done loading            
})

IticksMessengerExtensions and its methods are available in the Messenger webview when you include the IntelliTicks Messenger Extensions JS SDK.

Function	Description
getWebviewData()	Retrieve node Req Body for the person that opened the webview.
sendWebviewData()	Send data back for the person that engage with webview.
requestCloseBrowser()	Close the webview and return to the Messenger conversation.

Get Webview Req Body Data

The getWebviewData() method retrieves Req Body information of the node. It is useful for creating interactive group experiences, as well as restricting any content that was intended to be shared only to a certain thread.

const response = await IticksMessengerExtensions.getWebviewData();
if(response.isValid) {
    const data = response.data; // Req Body data
} else {
    // Error on getting webview data
}

Send Webview Data

The getWebviewData(text, jsonData) method send back data to conversation and help to proceed flow further.

const response = await IticksMessengerExtensions.sendWebviewData(text, jsonData);
if(response.isValid) {
    // Data sent successfully
} else {
    // Error on sending webview data
}

Closing the Webview

It is a good idea to close the webview after a transaction is complete, especially if actions the user took will result in a message in the thread. This can be done with the IntelliTicks Messenger Extensions SDK just call

IticksMessengerExtensions.requestCloseBrowser();             

Setting Webview Title

As with any webpage, the <title> tag sets the text displayed in the title bar for the webview.

<html>
  <head>
    <title>My Awesome Webview</title>
  </head>
   ...
</html>