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 a location object (containing href, state, and stateParams properties) and returning an object with show (boolean) and buttonText (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.