Embedボックスで外部コンテンツを簡単に埋め込む
Studioでは、HTML、CSS、そしてJavaScriptを用いたコードがページに埋め込むことができます。埋め込むには、Embedボックスという専用のボックスをページに配置します。
このボックスを使えば、Googleマップや外部サービスのフォームなどを表示することができます。
注意：独自に記述したコードや外部サービスが提供するコードの内容および動作についてチャット窓口でのサポート対象外となる可能性があります。Studioコミュニティで過去の投稿を参考したり質問の投稿もご検討ください。
コードタイプ
Embedボックスには、iframeタイプとsandboxタイプがあり、追加するコードの内容によって自動的にタイプ変化します。
Iframeタイプ
<iframe> タグのみで構成されているコード
formrunで作成したフォームの埋め込みコード
HubSpot Formの埋め込みコード
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