Live preview is an important feature for the chatbot building process in SUSI.AI botbuilder. It tells the bot creator how the bot looks and behaves at any time.
We use iframe for creating a live preview.
What is iframe?
Frames allow browser window to be split into separate segments. All these segments can be used for displaying a different webpage within the browser window.
is an HTML tag. iframe stands for “inline frame”. It places another HTML document in a frame. The content of the element is used as an alternative text to be displayed if the browser does not support inline frames.
This was first introduced by Microsoft Internet Explorer in 1997, standardized in HTML 4.0 transitional and allowed in HTML5.
Syntax:
<iframe src=”URL”></iframe>
Some attributes:
- Height
- Width
- Name
- Id
Code used for preview of chatbot screen:
<iframe title="botPreview" name="frame-1" id="frame-1" src={locationBot} height="600px" style={styles.iframe}></iframe>
Code used for preview of chatbot avatar:
<iframe title="botAvatarPreview" name="frame-2" id="frame-2" src={locationAvatar} height="100px" style={styles.iframe}></iframe>
Preview bot fetches the current theme status and skill status from SUSI server and then applies it to the chatbot. Now, this details will be unique to the user logged in. Hence, we need to somehow identify the person logged in. This is done using access token stored in the cookies which is accessed through cookies.get(‘loggedIn’).
How to pass access token to iframe?
This is the major issue faced when creating preview using iframe because even though the HTML window in iframe is rendered on the same parent page, we can not access the elements of HTML page inside iframe. This is because iframe loads dynamically. There are few solutions for this problem.
One of them is to create a script in iframe that would run when iframe is loaded. Now this script can access the elements of parent window (the one containing iframe) using window.parent.document.getElementById(‘#target’)
The best solution is however to pass the access token in the URL of the source of iframe. Then this can be accessed by HTML page in frame using location.href .
Code sample to pass access token in url:
src = '/BotPreview.html?access='+cookies.get('loggedIn')
Now, we have to split this URL and get the access token. This can be easily done using the following script.
var url = location.href.split(‘?’)[1].split(‘=’); var access_token = url[1];
Here in this example, the url variable firstly splits the URL at ‘?’. This creates an array with two elements.
[‘url.com/BotPreview.html’, ‘access=abcdef123’]
Then we access the element on index 1, i.e. ‘access=abcdef123’ and split it at the ‘=’. This further creates an array of two elements.
[‘access’, ‘abcdef123’]
Now, we can access the access token which is at index 1 in this array.
References
- Wikipedia article on Frames: https://en.wikipedia.org/wiki/HTML_element#Frames