WordPress integration
Embed OmniLab campaigns in WordPress with a Custom HTML block, iframe, or reusable JavaScript tag.
WordPress can host OmniLab the same way as any other website. In most projects, you will either use a managed plugin or shortcode already prepared for your deployment, or paste a manual iframe or JavaScript tag into a Custom HTML block.
Prefer the managed option when it exists
If your WordPress environment already includes an OmniLab plugin or shortcode, use that path first. It is usually easier to maintain than manually pasting embed code into multiple pages.
Choose the WordPress path
| Option | Best when | Typical owner |
|---|---|---|
| Managed plugin or shortcode | Your WordPress setup already includes an approved OmniLab integration method | Site admin |
| Custom HTML + manual iframe | You already know the exact OmniLab URL to load | Marketer or site admin |
| Custom HTML + JavaScript tag | One WordPress page should load different campaigns based on the page URL | Site admin or developer |
Manual iframe in WordPress
Copy the final OmniLab URL
Choose the landing page or direct touchpoint URL you want to embed, then append embedded=1.
Insert a Custom HTML block
In the WordPress editor, add a Custom HTML block or another code-capable area that accepts raw iframe markup.
Paste the iframe snippet
<iframe
src="https://experience.example.com/<campaign-public-link>?embedded=1"
title="OmniLab campaign"
loading="lazy"
allow="camera; microphone; geolocation"
style="width:100%;min-height:900px;border:0;overflow:hidden"
></iframe>Preview the real front-end page
Preview the WordPress page in the front-end experience, not only in the editor, so you can verify the final layout and permissions.
Reusable JavaScript tag in WordPress
If the same WordPress page should load different campaigns based on the current URL, place the OmniLab container and player tag in a Custom HTML block, theme template, or another approved code-injection area.
<div id="omnilab-container"></div>
<script>
(function (b, o, n, u, s) {
var a, t;
a = b.createElement(u);
a.async = 1;
a.src = s;
t = b.getElementsByTagName(u)[0];
t.parentNode.insertBefore(a, t);
o[n] = o[n] || [];
})(document, window, "_om_async", "script", "https://<omnilab-script-host>/omplayer.js");
_om_async.push([
"init",
{
domain: "experience.example.com",
targetId: "omnilab-container",
queryParam: "id",
},
]);
</script>That pattern is useful when you want one WordPress page such as /promo to display different campaigns based on URLs like:
https://www.example.com/promo?id=summer-campaignhttps://www.example.com/promo?id=summer-campaign%3Fc%3D<touchpoint-id>%26embedded%3D1
Publish checklist
- Test desktop and mobile layouts from the published page.
- Verify camera, microphone, or geolocation permissions if the experience needs them.
- Check cookies, sign-in flows, and redirects inside the real WordPress page.
- If the page is cached by WordPress or a CDN, clear the cache after you update the embed code.