Website Widgets
Web widgets are perfect for creating chat-window like experiences. They are interactable by expanding and shrinking on users screens.
Setup
Include the following script tag within your page head. Replacing $profilename with your profile name, not including the '@' symbol.
<script id='RevniteWidgetJs' src='https://revnite.com/js/widget/v1.js?profilename=$profilename' />
Messages
Messages power the widget by listening and performing specific actions whenever events on the page are triggered. These messages are posted to an iFrame with the id 'RevniteWidgetiFrame'.
When the widget is mounted on the website, the event 'revnite.widget.mounted' can be retreived from the iFrame to note when the widget is ready to receive data.
Then, we can send the event 'revnite.widget.settings' to setup the widget with settings of our liking. The supported settings can be found below. For a quick setup, add the following at the end of the page body:
<script>
const settings = {
video_id: 'Video:0123456789',
};
window.addEventListener('message', (e) => {
const event = e.data.event;
if (event === 'revnite.widget.mounted') {
const revniteWidget = document.getElementById('RevniteWidgetiFrame');
revniteWidget?.contentWindow?.postMessage({
event: 'revnite.widget.settings',
settings
}, 'https://revnite.com');
};
});
</script>
Settings
Video Id
The 'video_id' attribute is required and indicated the specific video that shall be displayed. Note how it is prefixed with 'Video:'.
Example:
const settings = {
video_id: 'Video:0123456789'
}
Fixed
A fixed widget can be positioned anywhere on the screen. The default is a fixed position in the bottom-right of the screen without any padding. The following attribute follows CSS patterns for a fixed position block. Thus, the value can be a number of pixels, percentage across the screen, or a combination of these.
In order to always align as intended, provided the following values to fixed:
- 'top' or 'bottom' (default: bottom: 0px)
- 'left' or 'right' (default: right: 0px)
Example:
const settings = {
fixed: {
bottom: '20px',
right: '20px',
},
}
Fullscreen
The fullscreen attribute sets a pixel limit where the widget should go into fullscreen mode.
If this value is not specified then the widget shall always go into full screen mode.
Example:
const settings = {
fullscreen: {
limit: {
height: 540,
}
},
}
That's it you're all set. Check out your new Widget.
Advanced
Programmatically mount widget
By default, the script adds the iFrame widget to the HTML DOM when the page loads. If you wish to programatically add the iFrame into the HTML DOM, set both the id and no-onload attribute on the script as shown below to the input head tag.
<script src='https://revnite.com/js/widget/v1.js?profilename=$profilename' id="RevniteWidgetJs" no-onload>
Programmatically trigger widget
Widgets can be programmatically triggered from your site by posting a message to widget with the new settings. Note the second parameter of postMessage()
must specify https://revnite.com
to work in modern browsers.
Example:
const settings = {
video_id: 'Video:0123456789'
}
const revniteWidget = document.getElementById(
'RevniteWidgetiFrame',
) as HTMLIFrameElement
revniteWidget?.contentWindow?.postMessage({
event: 'revnite.widget.settings',
settings,
}, 'https://revnite.com')
In use cases like info buttons and other page triggers, post the message within the event listeners such as 'click', 'focus', 'keyup' or 'scroll'.