Web View
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.
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.
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.
If you facing any issue on whitelisting domains please contact at [email protected]
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
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>
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. |
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
}
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
}
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();
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>
Last modified 3yr ago