About website integration
Give an OmniLab experience its own page on your site, and pick how the page loads it.
Visitors stay on your domain, inside your navigation. Give the experience a dedicated page. It isn't a widget to slot between two paragraphs, but a screen that needs room. Its height changes as a participant moves from a form to a game to a reward.
- 1Your header and navigation, unchanged
- 2The OmniLab experience, loaded in a frame
- 3It grows and shrinks as the participant moves through it
- 4Your footer, unchanged
Your header and footer stay yours. Everything between them is the experience.
The experience needs an address on your own domain
Embedding only works properly when the experience is served from a subdomain of the site it appears on: play.lindenhall.example inside www.lindenhall.example. The default address is fine for links and QR codes. Inside your page, though, the browser treats it as a third-party frame and blocks its cookies. Participants then can't stay signed in.
Set up a custom domain before you build the page.
Choose how the page loads the experience
Both methods put the same experience on the page. They differ in who picks the experience, and in what it may use.
| Method | The page loads | Choose it when |
|---|---|---|
| JavaScript tag | Whichever experience the page's own address names | One template page shows different campaigns over time. Not for the camera or location: the tag can't give its frame either. |
| Your own iframe | One specific experience, fixed in the page's code | The experience uses the camera or location, such as a scan game or a treasure hunt |
The JavaScript tag is a small script that also handles the fiddly parts. It sizes the frame as the experience changes. It keeps panels in view and clear of a sticky header. It brings participants back to your page after sign-in.
Prefer the tag. With your own iframe, your code does all of that. A parent page written by hand is a working example, sign-in included.
Who owns what
| Responsibility | Owner |
|---|---|
| The page the experience appears on | You |
| Loading the experience and sizing its frame | The JavaScript tag, or your own code with your own iframe |
| Allowing the tag and the experience in your content security policy | You |
| Browser permissions the experience needs, such as the camera | You, on your page |
| The experience itself: game, form, branding, reward | OmniLab |
| Campaign configuration and rewards | You, in Studio |
What to give your web team
Both methods mean adding code to your website, so the person who maintains your site does the work. Give them:
- the touchpoint link from Studio, or the campaign link if a landing page presents several touchpoints;
- the branded address the experience is served from, a subdomain of the site you embed on: see Custom domain;
- any permission the experience needs, such as camera access for a scan game.