Advances Template Embedding

You may not want to allow users to download the generated graphics, but process the generated input data yourself. For this purpose, you can use the Bluepic SDK to communicate with the iframe.

Get the bluepic SDK

npm install bluepic

Create an embedded controller

import { BluepicEmbedded } from 'bluepic'

// Initialize the controller by passing a query selector to the iframe or an iframe element instead
const embedded = new BluepicEmbedded('#embedded-frame');

// Wait until the embedded template finishes loading
embedded.on('load', () => {
  console.log('READY', embedded.data);
});

Listen for updates

embedded.on('upate', newData => {
  console.log('NEW DATA', newData);
});

Get data

// This will return a copy of the current data (if the template finished loading )
const currData = embedded.data;

Set data

// Please keep in mind, that the instance should have triggered the 'load' event here already
// If you try to do this and the instance is not ready yet, this will not work
embedded.data = {
   foo: 42,
   bar: 42 * 42
}

// Change top level properties directly 
embedded.data.foo = 86; // ✅ works
embedded.data.myObject.subProp = 'hello world'; // 🚨 will not work