All Collections
App Testing & Deployment
Integrating the Plattar Viewer into your website
Integrating the Plattar Viewer into your website

How you can set up and interact with the iframe

Jonathan Keyse avatar
Written by Jonathan Keyse
Updated over a week ago

This guide will go over the current functionality of the Plattar Viewer and how you can set up and interact with the iframe to create your own 3D experiences in your website.

Adding the iframe to the page

Add the following iframe into your page where you want the embed to appear. You can style it however you want and add a background as the Plattar frame is transparent.

<iframe id='plattar-frame' src="" width='100%' height='500px' frameborder='0'></iframe>

A Plattar viewer communicator interface is available to use in your website, you will need to add the following script into the page to access it.

<script type="text/javascript" src=''></script>

Sending messages to the Plattar Frame

The following script will initialise the communication interface and show how you can send messages to the iframe.

Send Message function

Send commands to the Plattar Frame

var comms = new PlattarViewerCommunicator(); // comms.init('<plattar-iframe-id>'); comms.init('plattar-frame'); // comms.send('<eventName', <data>); comms.send('initpreview', {});

Receiving messages from the Plattar Frame

The following code will create an event listener for any Events coming out of the Plattar Frame.

Creating Plattar Frame Listener

Will react to Plattar Frame events

/* comms.on('<eventName>', function(data){ console.log(data); }); */ comms.on('previewready', function(data){ console.log(data); });

Sample Implementation

var comms = new PlattarViewerCommunicator(); comms.init('plattar-frame'); comms.send('initpreview', {}); comms.on('previewready', function(data){ console.log('Frame is ready'); comms.send('loadscene', {sceneId: '538cc270-69b9-11ea-9b42-bff658b66cc6'}); }); comms.on('setLoading', function(data){ if(data.loading === false){ console.log('Scene has Loaded'); } });
Did this answer your question?