作成したデモコンテンツはPLAINERのURLをそのまま活用する方法と、既存のランディングページやサービスサイトなどのWebページに埋め込む方法があります。
PLAINERのURLを活用する方法
ログインして管理画面に移動し、活用したいデモのタイトル横の︙ボタンを押します
「公開中URLをコピー」ボタンを押します
クリップボードにURLがコピーされますので、自由にご活用ください
Webページに埋め込む方法
⚠️HTML/CSSの知識が必要です
ログインして管理画面に移動し、活用したいデモのタイトル横の︙ボタンを押します
埋め込みコード生成ボタンを押します
表示された埋め込みコードをコピーし、お使いの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の数値をページに応じて適宜調整してください