Embedボックスで外部ツールやコンテンツを埋め込む
Studioでは、Embedボックスという専用のボックスを使用して、HTML、CSS、JavaScriptを用いたコードの埋め込みが可能です。
このボックスを用いて、Googleマップなどの外部ツールやコンテンツを埋め込み、Webページ上で表示できます。
注意：独自に記述したコードや、外部サービスが提供するコードの内容および動作については、チャット窓口でのサポート対象外となる可能性があります。
Studioコミュニティで過去の投稿を参考したり質問の投稿もご検討ください。
コードタイプ
Embedボックスには、iframeタイプとsandboxタイプがあり、追加するコードの内容によって自動的にタイプ変化します。
iframeタイプ
<iframe> タグのみで構成されているコード
formrunで作成したフォームの埋め込みコード
HubSpot Formの埋め込みコード
注意：HubSpotフォームIDをCMSプロパティで埋め込んでいる場合は、自動的に「sandbox」タイプとして扱われます。
「sandbox」タイプになると、セキュリティ制限により一部機能に制約が発生しますのでご注意ください。
sandboxタイプ
iframeタイプに該当しない、その他全てのコード
また、コード内ではCMSプロパティが追加できます。CMSプロパティをコード内で利用すると、iframeタイプからsandboxタイプへと変化します。
設定手順
エディタの左側にある追加パネルから、Embedボックスをページに配置します。
2. エディタの右側にある設定パネルを開き、埋め込みコード欄にコードを追加します。
3. 最後にサイトを更新し、公開サイトに反映させてください。
注意点とサンプルコード
応用的な利用時には、以下の注意点をあらかじめご覧ください。
スタイル（style）などの扱い
コードタイプ sandbox タイプで、スタイル（style）などを設定した場合、それらはEmbedボックス内でのみ適用されます。ページには、影響を与えません。DOMContentLoaded イベントの扱い
DOMContentLoaded イベントは、発火しません。<script> document.addEventListener('DOMContentLoaded', function() { console.log('発火しません'); }) </script>埋め込みコード内でのリンク設定
リンクを設定する際は、「target=”_blank”」「target=_top”」または「target="_parent"」を設定してください。設定がない場合、Embedボックス内での遷移となります。<a href="<https://studio.design/ja>">studio LP</a> <a href="<https://studio.design/ja>" target="_blank">studio LP _blank</a> <a href="<https://studio.design/ja>" target="_top">studio LP _top</a> <a href="<https://studio.design/ja>" target="_parent">studio LP _parent</a>
関連記事
embed script speakerdeck