概要
PLAINERで作成したコンテンツ・シナリオを、WebサイトやLPのページ内にiFrameで埋め込む方法をご案内します。
⚠️ 埋め込みにはHTML/CSSの知識が必要です。
埋め込みコードの生成手順
ログインして管理画面に移動し、埋め込みたいコンテンツのタイトル横の「︙」ボタンを押します
「公開中埋め込みコード生成」を押します
表示された埋め込みコードをコピーし、埋め込みたいページのHTMLに貼り付けてください
埋め込みコードの種類
埋め込みコードは通常版とスタートボタン付きの2種類があります。
通常版：ページを開くと同時にデモが自動再生されます
スタートボタン付き：ページを開いた際に「デモを開始する」ボタンが表示され、クリックするとデモが始まります。訪問者が能動的にデモを開始できます
埋め込みコードサンプル
※デモのURLは該当のものに書き換えてください
ページの途中にフレームで埋め込む場合（ヘルプページ・マニュアル等）
<div style="padding: 0; overflow: hidden; margin: 0 calc(50% - 45vw); width: 90vw; height: 70vh;"><iframe src="https://product.plainer.co.jp/c/XXXXX/XXXXXXXXXX/XXXXXXXXXX" id="plainer-demo-iframe" sandbox="allow-scripts allow-same-origin" style="border: none; width: 100%; height: 100%" scrolling="yes"> </iframe> </div><script>const iframe = document.getElementById(plainer-demo-iframe); const parentUrlParams = window.location.search.substring(1); iframe.onload = function () { iframe.contentWindow.postMessage( { message: { url: document.URL, plainer_query: parentUrlParams }, }, * ); }; </script>
最初の<div>タグ内のmarginとwidth、heightの数値をページに応じて適宜調整してください
ユースケース別の活用例
A. LP・サービスサイトに大きなフレームで埋め込む
製品紹介ページやLPのメインコンテンツとして、デモを全画面近くのサイズで表示します。訪問者がページを離れずにデモを体験できるため、CVR向上が期待できます。
B. ヘルプページ・マニュアルの途中に挿入する
操作手順の説明箇所にインラインでデモを埋め込み、テキストと合わせて直感的に操作を案内できます。
C. CTAクリックでポップアップ表示する（応用）
ページ内のCTAボタンをクリックするとポップアップモーダルでデモが開く形式です。外部サービスとHTML/CSS/JavaScriptを組み合わせた応用的な実装が必要です。
詳細な実装手順は クリックすると別ページに遷移することなくポップアップでデモが開くリンクをサイト内に設置したい をご覧ください。
※HTML/CSS/JavaScriptの知識が必要です。個別のサポートは致しかねます。
URLを使った共有方法（メール・Slack・資料等）をお探しの場合は、デモコンテンツ/シナリオの共有方法 をご覧ください。