@innovint/cellar-frame-api
Advanced tools
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
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>
setShouldShowButton(fn: Function): voidSets 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 a location object (containing href, state, and stateParams properties) and returning an object with show (boolean) and buttonText (string) properties.close(): voidCloses the iFrame. No parameters are required.
getCurrentUrl(): stringReturns the current URL of the iFrame as a string.
onOpen$: SubjectAn 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$: SubjectAn RxJS Subject that triggers when the iFrame is closed.
FAQs
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
We found that @innovint/cellar-frame-api demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket Firewall Enterprise is now available with flexible deployment, configurable policies, and expanded language support.
Security News
Open source dashboard CNAPulse tracks CVE Numbering Authorities’ publishing activity, highlighting trends and transparency across the CVE ecosystem.
Product
Detect malware, unsafe data flows, and license issues in GitHub Actions with Socket’s new workflow scanning support.