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.