How to embed a showcase in your website

Short: embed the URL in an iframe.

Quick Guide

  1. Get in contact with your website builder to add a small snippet of code to your website.
  2. 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.
  3. 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
  4. Generate an Iframe with this link using for example this tool
  5. Now copy paste the embed code on your website or give it to your technical partner.
  6. 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.

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="720px" width="1280px" 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="720px" width="1280px" allowfullscreen></iframe>

Prompto_ShowcaseEmbed_RoundCornersa 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:

  1. Pass this the following info to your website builder
  2. go to the code responsible for switching the app's language

  3. 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:

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.