star

文章編輯: O 編 | 2025-06-30

如何將測驗嵌入活動網頁中?可以在發布前測試嗎?

如何將測驗嵌入活動網頁中?可以在發布前測試嗎?

想要讓訪客在自家活動頁面直接完成心理測驗、看到結果、立即分享嗎?只要「嵌入」iframe,就能將心理測驗與任何其他 OOOPEN Lab 互動遊戲模組,無縫整合到你的活動頁、品牌官網、個人部落格中!

本篇文章,將教你如何 3 步驟完成設定:

如何將測驗嵌入活動網頁中?

要將測驗嵌入活動網頁,可分為以下三個步驟:

  1. 完成測驗並發布:確認題目、計分及結果頁等皆設定完成。
  2. 進入「分享與發布設定」:找到「嵌入語法」區塊。
  3. 複製 iframe 程式碼:交給前端人員貼到網頁 HTML,可不限次數重複使用。
    • width 與 height 可介於 0 – 2,560 px 之間。
    • src 欄位填入專案正式發布網址。
  4. 特別提醒:若與「流量助攻:FB Pixel + GA4」進階功能併用,由於 GA4 無法偵測 iframe 內部互動,因此專案數據僅能於測驗後台追蹤。
圖片來源|超開放實驗室「將測驗嵌入活動/品牌網頁」後台編輯示意圖
圖片來源|超開放實驗室「將測驗嵌入活動/品牌網頁」前台嵌入後的示意圖(以佳格健康GO:母親節測驗、博客來:媽媽的真心話大調查為例)

如何在發布前先進行測試?

如果想要在發布前先進行測試,可以直接試用下列範例程式碼

<iframe width="500"
        height="300"
        title="超開放實驗室"
        src="https://ooopenlab.cc/quiz/8Kldbn7cBG2BsoKGPnDV"
        frameborder="0"></iframe>

RWD(響應式)iframe 尺寸設定方法

如果想要採用 RWD 設定,針對不同螢幕的寬高比例,設定不同的 iframe 尺寸,可以參考以下範例教學,透過外層容器的 padding-top 來維持寬高比(aspect ratio),常見比例有 4:3、16:9 等。(參考文章:How TO – Responsive Iframe

免費方案可以用嗎?

目前免費方案雖然能夠建立並發布測驗,但沒有開放「嵌入」的功能,因此只能直接分享連結,不能內嵌。

若已經擁有付費帳號,則可以在加購「流量助攻:將測驗嵌入活動/品牌網頁」功能後,至後台「分享與發布設定」中,解鎖「嵌入語法」區塊,直接複製 iframe 程式碼進行設定。

現在就註冊成為創造家,開始免費試用製作全模組!

現在只要點擊右上方「登入/註冊」成為「創造家」,就能以免費方案,無限期試用、建立與發布所有專案!

免費方案目前提供無限期試用與部分功能限制,可以前往後台「購買方案 > 點擊展開完整功能比較表」查看細節,直到正式發布前再線上刷卡購買方案,就能在 1 分鐘內完成帳號開通並取得發布模組的權限!


猜你也喜歡……

  • 如何上傳專案的背景音樂?音樂會在哪些頁面播放?
    去看看
  • 如何設定「結果頁呈現相同比率」?
    去看看
  • 如何設定專案連結縮圖?如何為不同結果設定縮圖?
    去看看

讓溝通變好玩

回首頁關於我們關於我們使用者服務條款與
隱私權政策
檢舉濫用行為

Copyright © 2025 OOOPEN Lab