PLAINERナレッジセンター
ログイン

デモコンテンツの配布方法

作成したデモコンテンツはPLAINERのURLをそのまま活用する方法と、既存のランディングページやサービスサイトなどのWebページに埋め込む方法があります

PLAINERのURLを活用する方法

  1. デモコンテンツメニューに移動し、活用したいデモのタイトル横の︙ボタンを押します
  2. URLをコピーボタンを押します
  3. クリップボードにURLがコピーされますので、自由にご活用ください

Webページに埋め込む方法

⚠️HTML/CSSの知識が必要です

  1. デモコンテンツメニューに移動し、活用したいデモのタイトル横の︙ボタンを押します
  2. 埋め込みコード生成ボタンを押します
  3. 表示された埋め込みコードをコピーし、お使いのCMSなどで埋め込みたいページにコードを貼り付けてください
    ※デフォルトでは全画面でデモが表示されるようになっています。埋め込む箇所に応じて適切な位置・大きさで表示されるよう調整してください

埋め込みコードサンプル

⚠️HTML/CSSの知識が必要です

ヘルプページ内など、ページの途中に大きなフレームで埋め込む場合

※デモの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>タグ内のmariginとwidth、heightの数値をページに応じて適宜調整してください

関連記事