前提条件
STUDIO は JavaScript の埋め込みに「Embed ボックス」と「カスタムコード」の 2 種類を用意しています。「カスタムコード」はサイト全体 / ページの head や body にスクリプトを仕込む上位機能（有料プラン限定）ですが、ミツモリンクの script タグは **Embed ボックス**で動作します。Embed ボックスは Free プランを含む全プランで利用できます。Embed ボックスは内部的に iframe（Sandbox 型）で描画されるため、フォームの高さに合わせてボックスのサイズを調整する必要があります。
- STUDIO アカウントとプロジェクト（無料の Free プランでも可）
- ミツモリンクでフォームを 1 個以上作成済み
- STUDIO プロジェクトの編集権限
設置手順
- 01
ミツモリンクでフォーム ID を確認する
ミツモリンクのダッシュボードで対象のフォームを開き、「埋め込みコード」タブに表示される 1 行の script タグをコピーします。
- 02
STUDIO エディタでページを開く
STUDIO ダッシュボードプロジェクトエディタを開く設置したいページをエディタで開きます。フォームを配置したい位置に移動しておくとスムーズです。
- 03
Embed ボックスを追加する
左サイドバー追加Embedエディタ左側のツールバーから「追加」メニューを開き、「Embed」ボックスを選択してキャンバスにドラッグします。フォームは縦に長くなりやすいため、単独のセクションに配置するのがおすすめです。
- 04
埋め込みコードを貼り付ける
設置した Embed ボックスをクリックし、右側のプロパティパネルにある「HTML」入力欄を開いて、ミツモリンクでコピーしたコードをペーストします。Embed ボックスは最大 3 万字まで貼り付けできますので、ミツモリンクの 1 行 script タグは余裕で収まります。
- 05
ボックスの高さを十分に広げる
Embed ボックスは iframe（Sandbox 型）で描画されるため、中身のフォームがどれだけ縦に伸びてもボックス自体は自動拡張しません。プレビューで項目をすべて展開した状態を確認し、下部が切れないようにボックスの高さを手動で広げてください。PC 表示とスマホ表示でそれぞれ調整することをおすすめします。
- 06
プレビュー → 公開する
エディタ右上の「プレビュー」で実際の表示を確認した後、「公開」ボタンで本番に反映します。
<script src="https://mitsumolink.com/widget/widget.global.js" data-widget-id="YOUR_WIDGET_ID"></script>YOUR_WIDGET_ID の部分を、ミツモリンクでコピーしたコードの data-widget-id の値に置き換えてください。
動作確認
公開後、以下を確認してください。
- 公開 URL でページを開くとフォームが表示される
- カテゴリをすべて展開した状態でもフォーム下部が切れていない
- 項目を選択すると合計金額がリアルタイムで更新される
- 「見積もりを送信する」ボタンから実際に送信できる
- Pro プランをご利用中の場合、事業者用メール通知が届く
よくあるトラブル
次のステップ
別の CMS にも設置したい方は、他のガイドをご覧ください。まだフォームを作っていない方は、無料で最初のフォームを数分で作成できます。
STUDIO 公式の参考リンク
他の CMS ガイド