🎴 推薦分享卡｜官網嵌入示範

這個頁面示範如何把「推薦分享卡產生器」掛到官網，讓會員打開就能用。
右邊是模擬的會員中心（真的用 iframe 嵌入產生器），你可以改上面的會員資料，看卡片即時跟著變。

三步驟掛上去

前提：把 推薦分享卡產生器.html 上傳到一個 https 的靜態空間（見下方「放哪裡」）。

  1. 上傳檔案：把產生器丟到靜態空間，取得網址。
  2. 貼 iframe：在官網要放的頁面貼上嵌入碼（加 ?embed=1）。
  3. 帶入會員資料：用 postMessage 把登入者的暱稱／推薦碼／等級送進去，會員就不用手動打字。
① 嵌入碼（貼在官網頁面）
<iframe id="cardFrame"
        src="https://你的網址/推薦分享卡產生器.html?embed=1"
        style="width:100%;border:0;max-width:460px"
        title="推薦分享卡" loading="lazy"></iframe>
② 自動帶入會員資料（關鍵）
<script>
  var frame = document.getElementById('cardFrame');

  // 把「登入者的資料」送進產生器
  frame.addEventListener('load', function(){
    frame.contentWindow.postMessage({
      type: 'liwen-member',
      member: {
        name: '<?= 會員暱稱 ?>',
        rb:   '<?= 推薦碼 ?>',   // 例如 543b6
        lv:   '<?= 會員等級 1~4 ?>'
      }
    }, '*');
  });

  // 讓 iframe 高度自動貼合卡片
  window.addEventListener('message', function(e){
    if (e.data && e.data.type === 'liwen-card-height') {
      frame.style.height = (e.data.height + 8) + 'px';
    }
  });
</script>

放哪裡？（擇一）

Firebase Hosting／GitHub Pages／Netlify／Cloudflare Pages 都可以，免費、自帶 https。
若 OLLSTORE 後台可上傳檔案或放自訂頁面，也可直接放上去。
重點：一定要 https，否則 iframe 與分享功能會被瀏覽器擋。

不想用 iframe？

也可請平台把產生器直接整合進會員中心，由後端把會員資料寫進頁面（體驗最好，但需工程）。
產生器已預留接口：網址參數 ?rb=&name=&lv=、全域變數 window.LIWEN_MEMBER、以及 postMessage 三種都支援。

👀 模擬會員中心

下面這些欄位模擬「後端帶入的登入者資料」，改完按套用，iframe 裡的卡片會即時更新。

campub.com.tw/member/referral

⚠️ 匯出的圖片上「網址無法點擊」是正常的（IG 圖片也一樣）。分享時請把連結放在貼文文案或 IG 限動的連結貼紙，或請對方掃 QR Code。