Studio Lightboxes make it easy to pull in external content such as websites, product pages, YouTube videos, and more directly into your Studio experience without having to set up additional interactions.
Add Lightbox Content
Select the object or hotspot that will trigger the Lightbox
Navigate to the Interact tab in the Inspector Panel
Choose Click for your trigger, and then Open URL in Lightbox for your Interaction
Paste in a URL
Change the Dimensions to the desired size
Lightboxes are a quick and easy way to pull unlimited content sources into your experience, without having to set up additional panels or layers. Below, we’ve provided instructions for some of the more common use cases.
Lead Forms, Etc.
Forms, coupons, and other content you’d like to display will first need to be added to a page on your site.
If you’re using third-party software (such as Marketo or Hubspot) to create your forms, you’ll need to add the code they provide directly to your own website.
Then add the URL of your webpage to the lightbox.
YouTube Videos
For YouTube and other video services, be sure to use the embed src URL (pictured below). Copying from your browser’s address bar will not work.
You’ll find this by clicking the Share button below the video.
Add ?rel=0&autoplay=1 to the end of the URL to start the video automatically and prevent suggested videos at the end.
Facebook Videos
For Facebook videos, the URL always looks something like this:
https://www.facebook.com/abcnews/videos/10154138970368812/The only part of this you'll need is the long number at the end. Copy and paste that onto the end of this web address:
https://www.facebook.com/video/embed?video_id=The final result, in this case, would be:
https://www.facebook.com/video/embed?video_id=10154138970368812Instagram Photos
Grab the photo URL and add /embed to the end of the URL.
Social Media Feeds
Although Facebook, Twitter, and other social media have embed codes, they don’t typically provide a page you can put in a Lightbox.
Don’t worry. There’s still a way. Just requires one extra step.
First, you’ll need to add the newsfeed to a page on your own website. This can be a completely blank page or contain your branding, etc. Totally up to you.
Then simply add that page’s URL to your lightbox.
Other Helpful Tips
Stick with objects/hotspots that are sized 100 x 100 pixels or larger to add the lightbox interaction so that those objects are easily distinguishable to the user.
When copying embed codes, make sure you only grab the source URL, not the whole iframe tag.
Web browsers don’t support transparent or non-rectangle iframes, so everything’s squared off.
Some websites don’t permit third-party embedding. If you know you’ve got the right URL, but only see white space, check with the developer to see if embedding is disabled.