All Collections
Creating Experiences
Embedding a SlideSync Experience on a webpage
Embedding a SlideSync Experience on a webpage

This article will show you how to embed a SlideSync Experience onto your own webpage.

Patrick Farley avatar
Written by Patrick Farley
Updated over a week ago

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: 

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>

Please Note: this is a Proof of Concept only provided to show the possibilities of the HapYak Platform and should not be taken as an offer to create, edit or maintain custom integration or development.

Did this answer your question?