Ceros Lightboxes make it easy to pull in external content like: websites, product pages, YouTube videos, and more directly into your Ceros Experience without having to set up additional interactions.
Add Lightbox Content
- Select the object or hotspot that will trigger Lightbox
- Navigate to the Interactions tab in the Inspector Panel
- Choose On Click for your trigger, and then Open URL in Lightbox for your Interaction
- Paste in a URL
- Change dimensions to 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 a 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.
For YouTube and other video services, be sure to use the embed URL. Copying from your browser’s address bar will not work.
You’ll find this by clicking the share icon below to 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.
For Facebook videos, the URL always looks something like this:
The only part of this you need is the long number at the end. Copy and paste that onto the end of this web address:
The final result in this case would be:
Grab the photo URL and add simply add /embed to the end.
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 100 x 100 pixels or larger content.
- 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.
Was this helpful?