Integrations
Onlive integrations are a set of widgets and applications that have the ability to be embedded into clients' websites and applications, creating a native experience.
Loader
The easiest way to integrate any type of installation is to add the Loader code to the page. This is a general loader that allows you to control which applications are displayed on the page from the Onlive CMS and does not require modification to incorporate new applications.
<script>
(function (o, n, l, i, v, e) {
v = o.createElement(n);
v.onload = i;
v.async = 1;
v.src = l;
e = o.getElementsByTagName(n)[0];
e.parentNode.insertBefore(v, e);
})(document, 'script', 'https://cdn.onlive.site/loader/v1/loader.min.js', function () {
window.onliveManager.loader.load('<organization-id>');
});
</script>
App Connect Package
Another way to integrate applications is by using the Onlive App Connect package, which allows you to have more control over which applications want to be installed, as well as to update the configuration of these applications once they are loaded.
The applications to be installed can be selected by their installation ID or by the Application Name, which determines the type of the application.
<script>
(function (o, n, l, i, v, e) {
v = o.createElement(n);
v.onload = i;
v.async = 1;
v.src = l;
e = o.getElementsByTagName(n)[0];
e.parentNode.insertBefore(v, e);
})(
document,
'script',
'https://cdn.onlive.site/@onlive.site/[email protected]/index.js',
async function () {
/* Create new App Connect instance */
const connector = new OnliveAppConnect('<organization-id>');
/* Install application */
const application = await connector.install({
installationId: '<installation-id>',
/* or applicationName: '<application-name>' */
});
/* Update application configuration */
application.setConfig({
/* ... */
});
},
);
</script>
App Connect Package (Inside Iframe)
In environments where the installed applications need to be isolated, the recommendation is to load the application inside an Iframe.
The Onlive App Connect package allows you to manage the creation of the Iframe on the page, as well as later manage the application installed.
<script>
(function (o, n, l, i, v, e) {
v = o.createElement(n);
v.onload = i;
v.async = 1;
v.src = l;
e = o.getElementsByTagName(n)[0];
e.parentNode.insertBefore(v, e);
})(
document,
'script',
'https://cdn.onlive.site/@onlive.site/[email protected]/index.js',
async function () {
/* Create new App Connect instance */
const connector = new OnliveAppConnect('<organization-id>');
/* Install application */
const application = await connector.install(
{
installationId: '<installation-id>',
/* or applicationName: '<application-name>' */
},
{
iframe: {
parent: document.body,
width: '100%',
height: '500px',
style: {
margin: '2rem auto',
border: 'solid 1px #fafafa',
boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',
},
},
},
);
/* Update application configuration */
application.setConfig({
/* ... */
});
},
);
</script>
Demos
Custom (Inside Iframe)
In environments with strict content security policy controls, an integration alternative is to load the application into an Iframe and add the appropriate code to manage the application. If additional configuration parameters need to be sent during Iframe loading, they can be added as query parameters in the url of the Iframe.
Adjusts the permission policies in the Iframe according to the requirements of the application to be installed through the allow attribute.
The configuration is sent to the Iframe through post messages, following the message convention established by Onlive.
Example 1 - Tracking Parameters
This example takes the tracking parameters included in the page that start with the utm_ prefix and sends them to the application to be included in internal actions executed by the application to maintain tracking.
The identifier assigned to the iframe is onlive-iframe.
<iframe id="onlive-iframe" src="https://app.onlive.site?olOrgId=<organization-id>&olAppId=<installation-id>"
allow="autoplay; camera; microphone; display-capture; clipboard-write">
</iframe>
<script>
/* Get parameters with `utm_` prefix */
const utmParams = new Map();
for (const [key, value] of new URL(window.location).searchParams) {
if (key.match(/^utm_/)) {
utmParams.set(key, value);
}
}
/* Send trackings params to application */
if (utmParams.size > 0) {
document.querySelector('#onlive-iframe').contentWindow?.postMessage(
{
__ONLIVE_MSG_KEY: 'SET_APP_CONFIG',
{
trackingParams: Object.fromEntries(utmParams),
},
},
'*',
);
}
</script>
Example 2 - Live Styling
This example allows you to update the styles interactively without reloading the application.
The identifier assigned to the iframe is onlive-iframe.
<iframe id="onlive-iframe" src="https://app.onlive.site?olOrgId=<organization-id>&olAppId=<installation-id>"
allow="autoplay; camera; microphone; display-capture; clipboard-write">
</iframe>
<button id="update-styles">Update Styles</button>
<script>
/* Listen update styles button */
document.querySelector('#update-styles').addEventListener('click', () => {
document.querySelector('#onlive-iframe').contentWindow?.postMessage(
{
__ONLIVE_MSG_KEY: 'SET_APP_CONFIG',
{
appearance: {
theme: 'dark',
brandColor: '#0000ff',
corners: 'squared',
typography: 'serif',
},
},
},
'*',
);
});
</script>
Example 3 - Analytics
This example shows a way to collect data from applications, such as form forms.
<iframe
src="https://app.onlive.site?olOrgId=<organization-id>&olAppId=<installation-id>&extraParam=<extra-param>"
allow="autoplay; camera; microphone; display-capture; clipboard-write"
></iframe>
<script>
window.addEventListener('message', ({ data }) => {
if (data.__ONLIVE_MSG_KEY === 'APP_DATA_TRACK' && data.data) {
DataLayer.push(data.data);
}
});
</script>
Example 4 - Auto Height
This example shows how to automatically adjust the iframe height.
The identifier assigned to the iframe is onlive-iframe.
<iframe
id="onlive-iframe"
src="https://app.onlive.site?olOrgId=<organization-id>&olAppId=<installation-id>&extraParam=<extra-param>"
allow="autoplay; camera; microphone; display-capture; clipboard-write"
></iframe>
<script>
window.addEventListener('message', ({ data }) => {
if (data.__ONLIVE_MSG_KEY === 'APP_RESIZED' && data.data) {
document.querySelector('#onlive-iframe').style.height = `${data.data.height}px`;
}
});
</script>
Example 5 - Auto Height (Iframe-Resizer Package)
This example shows how to automatically adjust the iframe height using the iframe-resizer package.
Auto height (iframe-resizer) demo
The @iframe-resizer/child dependency is already included inside the iframe.
<iframe
src="https://app.onlive.site?olOrgId=<organization-id>&olAppId=<installation-id>&extraParam=<extra-param>"
allow="autoplay; camera; microphone; display-capture; clipboard-write"
></iframe>
<script src="https://cdn.jsdelivr.net/npm/@iframe-resizer/parent@latest"></script>
<script>
iframeResize({ license: "GPLv3" });
</script>
Example 6 - Auto scroll
This example demonstrates how to ensure the iframe always displays in the window, even if its height changes.
The iframe's position in the window is evaluated based on the minFractionInWindow parameter. Set to 0.5 in this example, it indicates that the iframe should be repositioned if less than half of it is visible, as demonstrated in Figures A and B.
For pages with a fixed header, consider the header's height in repositioning to prevent iframe overlap. The header height, defined by fixedHeaderHeight, varies with the page's responsive design. In the demo, we use 65px for devices <1016px wide, and 127px for wider devices, as depicted in Figures C and D.
The identifier assigned to the iframe is onlive-iframe.
<iframe
id="onlive-iframe"
src="https://app.onlive.site?olOrgId=<organization-id>&olAppId=<installation-id>&extraParam=<extra-param>"
allow="autoplay; camera; microphone; display-capture; clipboard-write"
></iframe>
<script>
// Configuration parameters
const minFractionInWindow = 0.5;
const fixedHeaderHeight = window.innerWidth < 1016 ? 65 : 127;
const fixedHeaderSpacing = Math.round(fixedHeaderHeight * 0.2);
window.addEventListener('message', ({ data }) => {
if (data.__ONLIVE_MSG_KEY === 'APP_RESIZED' && data.data) {
// AUTO HEIGHT
const iframe = document.querySelector('#onlive-iframe');
iframe.style.height = `${data.data.height}px`;
// AUTO SCROLL
// Determines if the iframe does not have sufficient height in the window.
const iframeRect = iframe.getBoundingClientRect();
const percentageHeight = window.innerHeight * minFractionInWindow;
const outOfWindow =
iframeRect.top + data.data.height - window.scrollY < percentageHeight ||
window.scrollY + window.innerHeight - iframeRect.top < percentageHeight;
// Using a fixed header
iframe.style.scrollMarginTop = `${fixedHeaderHeight + fixedHeaderSpacing}px`;
// Set iframe in window
if (outOfWindow && document.activeElement === iframe) {
iframe.scrollIntoView({
behavior: 'smooth',
});
}
}
});
</script>