This article will show you how to embed displays (typically meant for tablets, monitors or big screens) and mobile apps into your website or landing page.
What problem does the web-embed solve:
Integrate Socialpoint into a Virtual Trade Show Booth
Integrate SocialPoint into your Virtual Meeting or Event Software
How does it work?
Step 1: Enable Embed Access on your event.
You can enable Embed access in the "Event Settings." If you don't have access to Event Settings, please ask your Customers Success Manager for assistance.
Step 2: Find your Embed Code
Go to Display Manager and Choose Displays.
Copy the Embed Link
(Note: Mobile Apps such as mobile trivia, audience response and Attendee Participation game DO NOT NEED a special embed link. Please use the regular link)
Step 3: Embed the link into your Landing Page
Note: This Link will only work if it is embeded into a website.
Embed your Leaderboard and Results Screen
Use the following code to embed your leaderboard:
<div style="position:relative; height:0; padding-bottom:56.25%"><div style="position:absolute; top:0; left:0; height:100%; width:100%"><iframe src="ADD YOUR LINK HERE" style="border:0px #FFFFFF none; width:100%; height:100%" name="myiFrame" scrolling="no" frameborder="0" marginheight="0" marginwidth="0" allowfullscreen></iframe></div></div>
Copy and paste this code into your website.
Then add your embed link.
Notes about the embed:
Your Leaderboard will maintain it's 16:9 ratio on all devices as your page adjusts in size.
The embed link will only work when you include it in an embed code.
Embed your Virtual Prize Wheel
Use this code to embed your Prize Wheel:
<div style="position:relative; height:0; padding-bottom:56.25%"><div style="position:absolute; top:0; left:0; height:100%; width:100%"><iframe src="ADD YOUR LINK HERE" style="border:0px #FFFFFF none; width:100%; height:100%" name="myiFrame" scrolling="no" frameborder="0" marginheight="0" marginwidth="0" allowfullscreen></iframe></div></div>
Copy and paste this code into your website.
Then add your embed link.
Notes about the embed:
On IOS mobile devices, the embedded prize wheel can have animation issues.
On mobile devices the data entry modal hides the prize wheel, so people can't see it before spinning.
The embed link will only work when you include it in an embed code.
Embed your Trivia Game (iPad)
Use the following embed code for Tablet Apps:
<div style="position:relative; height:0; padding-bottom:131.33%"><div style="position:absolute; top:0; left:0; height:100%; width:100%"><iframe src="ADD YOUR LINK HERE" style="border:0px #FFFFFF none; width:100%; height:100%" name="myiFrame" scrolling="no" frameborder="0" marginheight="0" marginwidth="0" allowfullscreen></iframe></div></div>
Copy and paste this code into your website.
Then add your embed link.
Notes about the embed:
The Tablet App does not resize with the screen, so it can be rather large.
Best application could be to include it in a pop up modal or pop up link.
The embed link will only work when you include it in an embed code.
Embed your Trivia Mobile App
There are two ways to do the mobile embed.
Option #1: Embed the app into your website
Option #2: Create a pop up button.
Option #1: Embed the app into your website
Use the following embed code for Mobile Apps:
<iframe style="width: 100%; height: 800px; overflow: hidden;min-width:350px" src="ADD YOUR LINK HERE" width="100" height="100" scrolling="no">Iframes not supported</iframe>
Copy and paste this code into your website.
Then add your embed link.
Notes about the embed:
You can set your background color to transparent to pull in the website background color.
You do not need a special embed code for the mobile apps.
Option #2:
Use the following code to create a pop up button that opens the mobile app in a new window.
<a href="ADD YOUR LINK HERE" target="_blank" onClick="window.open('ADD YOUR LINK HERE','trivia-game','location=no,resizable,height=800,width=400'); return false;"><img border="0" alt="YOUR-BUTTON-NAME" src="YOUR-BUTTON-GRAPHIC" width="250" height="100"></a>