How to embed a showcase in your website.

Short: embed the URL in an iframe.

Quick Guide

Get in contact with your website builder to add a small snippet of code to your website.
Generate a showcase link by presenting your project
- Click the projector icon on the project overview
- OR click "present project" on the project detail screen.
Now copy the link
- Go to your browser link bar and copy it
- OR click on the share button in the top right of the showcase
Generate an Iframe with this link using for example this iFrame generator tool.
Now copy and paste the embed code on your website or give it to your technical partner.
Alternatively, copy the code below and just swap out the 5 letter code of your unique showcase code: https://showcase.prompto.com/XXXX

That's it, all interactivity will work out of the box and any update you do in Prompto will update on your website directly.

HOW TO MAKE AN EMBEDDED SHOWCASE LOOK GOOD ON MOBILES?
To make your embedded showcase adaptive and fully functional on all the screens/resolution types, including mobile ones, please set up the iframe size in % or vh-vw values.
We recommend inserting a showcase, so it takes the full size of the page/container. To do it set parameters of width and height to 100 (height="100%" width="100%" or height="100vh" width="100vw")

Example embed code

<iframe src="https://showcase.prompto.com/MTQG8?" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="100%" width="100%" allowfullscreen></iframe>

a quick example if we put this code in our own prompto.com website.

Example embed code with rounded corners

<iframe src="https://showcase.prompto.com/2MRQL?" style="border:0px #ffffff none; border-radius: 30px; width: 1280px; overflow: hidden;"" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="75%" width="75%" allowfullscreen></iframe>

a quick example if we put this code in our own prompto.com website.

Updating the language based on your current website settings

To localize the embedded showcase to the app's language you should follow the next steps:

Pass this the following info to your website builder
go to the code responsible for switching the app's language
add a piece of code which sends a message to the embedded showcase

Let's assume that somewhere on the page there is an iframe tag:

<iframe id={showcaseIframeId} src={showcaseUrl} {...other props} />

So the needed code will look like this:

// lang - current language

const embeddedShowcase = document.getElementById(showcaseIframeId);
if (embeddedShowcase && lang) {
  embeddedShowcase.contentWindow.postMessage(
    JSON.stringify({
      type: "SYNC_LOCALIZATION",
      language: lang,
    }),
    showcaseUrl
  );
}

IMPORTANT: message type MUST be "SYNC_LOCALIZATION" , otherwise the message will be ignored.

{ 
   type: 'SYNC_LOCALIZATION',
   language: CURRENT_LANGUAGE_VALUE
}

References:

window.postMessage() - https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

Settings options

Customize components: You can choose to show or hide the major components of the showcase.
- Either go to showcase->settings and toggle the components
- Or adapt your the link that you use so the component is hidden only on your website, but not when you send it over to a client or use face to face.
  - After your showcase link, add ?customMenu=components
  - e.g. https://showcase.prompto.com/MTQG8/tour?customMenu=Tour-Resources will show the tour & resources and not the map and unit list.
Infowall you can restrict access to certain content unless your viewer fills in a form that gets sent to your CRM.
Information you can choose not to show prices or availability when on your website. The prices will still show up when you use the showcase in your face to face sales talk. This is because you are then logged in as a prompto user.