@innovint/cellar-frame-api
v1.0.7
Published
The InnoVint cellar frame API allows communication between an external site's content (loaded in an iframe) and the InnoVint application. The API provides methods for showing or hiding a button in the InnoVint application, and reacting to the button being
Downloads
88
Readme
InnoVint Cellar Frame API
The InnoVint cellar frame API allows communication between an external site's content (loaded in an iframe) and the InnoVint application. The API provides methods for showing or hiding a button in the InnoVint application, and reacting to the button being clicked, which can show or hide the iFrame.
Installation
To start using the InnoVint iFrame API in your app, include the following script tag in your HTML file:
<script type="module">
import { IFrameApi } from 'https://cdn.skypack.dev/@innovint/cellar-frame-api';
const innovint = new IFrameApi();
</script>Alternatively install the package via npm and use it in your bundled app:
import { IFrameApi } from '@innovint/cellar-frame-api';
const iFrameApi = new IFrameApi();
iFrameApi.onOpen$.subscribe((location) => {
console.log('iFrame opened:', location);
});Demo application
A runnable demo is available on Glitch. To see it in InnoVint paste the preview URL (https://bubble-quaint-cappelletti.glitch.me) as Developer iFrame URL inside InnoVint (Settings -> Cellar Frame).
Usage Example
With a bundler (e.g. when using React, Angular, ...)
// Use the InnoVint iFrame API
import { IFrameApi } from '@innovint/cellar-frame-api';
const innovint = new IFrameApi();
// Subscribe to onOpen$ observable
innovint.onOpen$.subscribe((location) => {
console.log('iFrame opened:', location);
});
// Subscribe to onClose$ observable
innovint.onClose$.subscribe(() => {
console.log('iFrame closed');
});
// Set the button visibility and text based on location.state
innovint.setShouldShowButton((location) => {
if (location.state === 'home.winery.lots') {
return { show: true, buttonText: 'Expand' };
}
return { show: false, buttonText: '' };
});
// Get the current URL of the iFrame
const url = innovint.getCurrentUrl();
console.log('Current URL:', url);
// Close iFrame
innovint.close();Without a bundler / via script tag
<!doctype html>
<html lang="en">
<head>
<script type="module">
import { IFrameApi } from 'https://cdn.skypack.dev/@innovint/cellar-frame-api';
const innovint = new IFrameApi();
innovint.onOpen$.subscribe((location) => {
document.querySelector('pre').innerHTML = JSON.stringify(location, null, 2);
});
</script>
</head>
<body>
<pre></pre>
</body>
</html>Methods
setShouldShowButton(fn: Function): void
Sets a callback function to inform InnoVint whether the expand button should be displayed, as well as the button's text.
fn: A callback function receiving alocationobject (containinghref,state, andstateParamsproperties) and returning an object withshow(boolean) andbuttonText(string) properties.
close(): void
Closes the iFrame. No parameters are required.
getCurrentUrl(): string
Returns the current URL of the iFrame as a string.
Observables
onOpen$: Subject
An RxJS Subject that triggers when the iFrame is opened, passing an object containing the current href, state, and stateParams.
Important: href, state and stateParams describe the internal routing structure inside the InnoVint webapp. They are not guaranteed to be stable and may change at any time without notice.
onClose$: Subject
An RxJS Subject that triggers when the iFrame is closed.