Want visitors to complete a psychological quiz, view results, and share instantly on your event page? Just embed the iframe to seamlessly integrate any OOOPEN Lab quiz or interactive module into your event page, brand website, or personal blog!
Table of Contents
- How to embed the quiz into your webpage (iframe setup)
- How to test before publishing
- How to set up UTM source tracking on an embedded quiz
- How to set responsive (RWD) iframe dimensions
- Is the free plan supported?
How to embed the quiz into your webpage?
- Complete and publish your quiz (cover, questions, results pages all set)
- Go to “Publish Settings,” choose “Embed in Webpage” under “Publish Mode Selection,” then copy the snippet from the “iframe code” block
- Copy the iframe code and give it to your developer
- width and height between 0 – 2,560 px
- src uses official project URL)
GA4 note: if you have the “FB Pixel and GA4” add-on, your project’s own GA4 keeps tracking normally inside the iframe. What it will not do is report into your website’s GA — your host page does not automatically receive events from inside the embedded quiz. If you need them there, cross-iframe tracking has to be set up separately.
How to Test Before Publishing?
Use this example code to test:
<iframe width="500" height="300" title="OOOPEN Lab" src="https://ooopenlab.cc/quiz/8Kldbn7cBG2BsoKGPnDV" frameborder="0"></iframe>How do I set up UTM source tracking on an embedded quiz?
When the same quiz is embedded across several event pages, ads, EDMs or partner sites, you can tell the traffic apart by adding UTM parameters to the iframe’s src URL. OOOPEN Lab records the source UTM on every response, so you can export a performance report from the backend and see which placement worked best.
Common UTM parameters:
utm_source: where the traffic came from (e.g. facebook, edm, partner_blog)utm_medium: the medium (e.g. social, email, cpc)utm_campaign: the campaign name (e.g. mothers_day_2025)
Example (add the parameters after the ? in the src URL, joining them with &):
<iframe width="500" height="300" title="OOOPEN Lab" src="https://ooopenlab.cc/quiz/8Kldbn7cBG2BsoKGPnDV?utm_source=facebook&utm_medium=social&utm_campaign=mothers_day" frameborder="0"></iframe>Important: the host page’s UTM does not carry into the iframe
This is the most common misunderstanding. If your event page URL is https://yourbrand.com/event?utm_source=facebook, that UTM belongs to the event page only — it is not passed into the quiz embedded inside it. OOOPEN Lab records only the UTM carried by the iframe’s own src URL, so the UTM has to be written directly into that src for the quiz’s source to be tracked.
Tip: give each channel its own UTM parameters on its own iframe, and you can tell the sources apart precisely in the backend and compare performance. For the full export and analysis flow, see Exporting UTM Records.
Responsive (RWD) iframe Setup
Set outer container padding-top to maintain aspect ratio (4:3, 16:9, etc.).（Reference：How TO – Responsive Iframe）
Is the Free Plan Supported?
Free accounts cannot use the embed feature, but can share links.
Paid users can purchase the “Embedding Project on Webpage” add-on, which unlocks the “iframe code” block under “Publish Settings.”
Now register as a Creator and start building with the free trial right away!
Simply click “Login/Register” at the top right to become a Creator. With the free plan, you can create, edit, and publish unlimited projects with no time limit!
The free plan currently offers unlimited trial use with some feature restrictions. You can view details in the backend under “Purchase Plan > Click to Expand Full Feature Comparison Table.” Before officially publishing, simply purchase a plan online to instantly activate your account and unlock publishing permissions within 1 minute!
