Adding an embedded SlideSync Experience to your webpage is as simple as 1, 2, 3.

Step 1 - Add CSS to the PARENT (your webpage) container:

In order to make SlideSync display properly on your webpage, you must add a few lines of Custom CSS. Add the following CSS code to the style sheet of the webpage that you are embedding on:

body {
   overflow: hidden;      
}  
     
.experienceIframeContainer {          
   position: relative;          
   height: 0;          
   overflow: hidden;
   padding-bottom: 75%;        
}
       
.experienceIframe {        
   position: absolute;
   top:0;          
   left: 0;
   width: 100%;          
   height: 100%;

Note: if your webpage's CSS already has a body element, add, the line reading overflow: hidden; to your existing body element. 

Step 2 -  Add the Embed Code Container to the webpage:

Next, we're going to add this snippet of HTML to the page we want to embed the SlideSync Experience on:

<div id="experienceIframeContainer">
    <iframe class="experienceIframe" src="[ADD SLIDE SYNC LANDING PAGE URL HERE]" allowfullscreen>
    </iframe>
</div>

Step 3 - Configuring the iFrame to display your SlideSync Experience:

Lastly, swap out the text in the iFrame src  with your protocoless SlideSync URL Landing Page 

Example:

Let's say our SlideSync landing page is hosted on HapYak here: 

https://www.hapyak.com/portal/experience/viewer/399d82fcce654571a8e9e32e3807f634

We want to change the embed code from this:

<div id="experienceIframeContainer">
    <iframe class="experienceIframe" src="[ADD SLIDE SYNC LANDING PAGE URL HERE]" allowfullscreen>
    </iframe>
</div>

to this:

<div id="experienceIframeContainer">
    <iframe class="experienceIframe" src="//www.hapyak.com/portal/experience/viewer/399d82fcce654571a8e9e32e3807f634" allowfullscreen>
    </iframe>
</div>

Note: The URL is Protocoless, so no http: or https:  just begin with the double slashes, //

Full Code Example here:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HapYak SlideSync Experience Embedding Example</title>
  <style>
      body {
          overflow: hidden;
      }
      .experienceIframeContainer {
        position: relative;
        height: 0;
        overflow: hidden;
        padding-bottom: 75%;
      }
      .experienceIframe {
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
      }
  </style>
</head>

<body>
  <div id="experienceIframeContainer">
      <iframe class="experienceIframe"        src="//www.hapyak.com/portal/experience/viewer/399d82fcce654571a8e9e32e3807f634" allowfullscreen ></iframe>
  </div>
</body>
</html>
Did this answer your question?