Control an embedded tour from your site
A postMessage API: follow spaces, styles and choices, and open them from your own page.
When a tour is embedded on your own website, your page can follow what the visitor does and steer the tour: open a space or a style, set a client choice, open the dollhouse view or the quote form. It works with the standard browser postMessage, so no library is needed.
Embed the tour
Copy the embed code from Share (see Share link, QR code and embed) and give the iframe an id, for example id="tour".
Listen to the tour
window.addEventListener('message', function (e) {
if (!e.data || !e.data.vrt) return;
// e.data.vrt is 'ready', 'change', 'request', 'approved' or 'state'
console.log(e.data);
});| Event | When | Data |
|---|---|---|
ready | The first space has loaded | title, spaces (ids, titles, styles with prices), and the current space, style, picks |
change | The visitor switched space, style or a client choice | space, style, picks (a list of {slot, option}) |
request | A quote request was sent | the selections at that moment; never the visitor’s contact details |
approved | The design was approved | the approved selections |
state | You asked for it | space, style, picks |
Steer the tour
var tour = document.getElementById('tour').contentWindow;
tour.postMessage({ vrt: 'go', space: 'kitchen', style: 'modern' }, '*');
tour.postMessage({ vrt: 'option', slot: 'worktop', option: 'marble' }, '*');
tour.postMessage({ vrt: 'doll', on: true }, '*');
tour.postMessage({ vrt: 'quote' }, '*');
tour.postMessage({ vrt: 'play', on: true }, '*');
tour.postMessage({ vrt: 'state' }, '*');Space, style, slot and option ids are in the ready event. Use them to build your own buttons next to the tour, sync a price summary on your page, or send the visitor’s choices to your analytics.
Events carry only what is on screen. Names, emails and phone numbers that visitors type stay in vr-tecture and reach you through Requests.