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.
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);
});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).
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>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.
Closes the iFrame. No parameters are required.
Returns the current URL of the iFrame as a string.
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.
An RxJS Subject that triggers when the iFrame is closed.