Webflow のウィジェットは、名前ではなく目的から選ぶ

先に来るのはプランの関門

Webflow はヘルプ記事2本の冒頭に、同じ条件を刷り込んでいます。サイトとページのカスタムコードの記事と、Code Embed 要素の記事です。Core・Growth・Agency・Freelancer のいずれかの Workspace か、有効な Site plan の付いたサイトが要る、という条件です。pricing の表は逆側から同じことを言います。custom code の行が、無料の Starter site plan の列でも無料の Starter Workspace の列でもダッシュ表示です。

いちばん安く入る道は、そのサイトひとつに有料の Site plan を付けるか、有料の Workspace を取るかです。2026年8月25日時点の webflow.com/pricing で年払い表示に切り替えると、Basic site plan は月 $15、Core Workspace は月 $19 と並び、Core の機能一覧に custom code の名前があります。無料アカウントに試せる部分版はありません。欄そのものが画面にないからです。

ローダーは1回、2つめのウィジェットは div ひとつ

ローダーが入るのは Site settings の Custom code タブ、Footer code の欄です。Webflow はこの欄の中身をすべてのページで閉じる </body> の直前に出力し、スクリプトタグはとくにフッターへ置くよう勧めています。Save changes を押せば、それ以降に公開するものすべてに一緒に載っていきます。

<script src="https://bootsignal.com/bootsignal.js"
        data-site-id="YOUR_SITE_ID" data-lang="ja" defer></script>

関わるスクリプトタグはこれだけです。あとは全部マークアップです。Add パネルを開き、ウィジェットを置きたい位置へ Code Embed をドラッグし、data-bootsignal 属性の付いた div を貼って、保存してモーダルを閉じます。ランディングページのカウントダウンもこれだけですし、10個めのウィジェットも同じ形です。

<div data-bootsignal="countdown"
     data-target="2026-12-31T23:59:59"
     data-expired="The sale has ended!"></div>

請求も同じ形なので、レイアウトを考える前に知っておくと役に立ちます。登録ドメインひとつで月 $20、または1年分で $200、その1行がカタログ全体を覆い、購読したあとに足されたウィジェットも含みます。ページビューや訪問者を数える項目はどこにもないので、ウィジェットを1つではなく3つ計画しても数字は動きません。ドメインを増やす分は別項目になり、ダッシュボードから追加します。残りは料金ページにあります。

構造の面で Webflow に有利な点がひとつあります。Code Embed は自分のマークアップを、サンドボックスの iframe の中ではなくページそのものに置きます。ウィジェットは location.hostname を site id に登録されたドメインと突き合わせ、Google ログインはページの origin を見ます。サンドボックス化された HTML 埋め込みしか用意しないビルダーでは、ウィジェットは自分のドメインの代わりにビルダーのサンドボックスドメインを見て、動くのを拒みます。Webflow はそちら側ではありません。本番のドメインを、先に試すなら .webflow.io のステージングドメインも登録すれば、判定は通ります。

読者に何か言い返してほしいとき

コメントが働くのは、立場を示すページや手順を説明するページです。読者に訂正や質問が生まれる場所がそこだからです。訪問者は Google でログインし、そのログインは BootSignal のすべてのウィジェットで共通です。コレクションページなら、設置はテンプレート1回の修正で終わります。手順は Webflow のコメントウィジェット編に、ウィジェットは Comments にあります。

評価が合うのは性格の違うページです。訪問者が議論するのではなく、対象を判定するページ。テンプレート、レシピ、講座の1章。ここに集まったものは Testimonial Wall にも流れます。この壁はウィジェットが実際に保存したレビューからカードを作るので、誰も書いていない一文を飾ることができません。Ratings は thread id を取ります。点数はサイトではなく対象に付くからです。

日付が売っているとき

カウントダウンは正直でなければ飾りです。募集が本当に金曜に閉まる、価格が本当に真夜中に変わる。それならタイマーは事実を述べ、ページはその分だけ急いで読まれます。data-target に ISO のタイムスタンプを、data-expired にそのあとページが言うべきことを入れてください。時計がゼロに届くまで、みんなが後回しにする部分です。設置手順は Webflow のカウントダウンウィジェット編にあります。

Social Proof Toast は焦りを作るもう一方の役で、他のツールが売る捏造版より意図的に弱くしてあります。サイトで実際に起きた最近の動き、つまり BootSignal がすでに保存しているコメント・リアクション・評価・投票を流し直すだけです。オハイオで誰かが買ったという知らせは作れません。打ち込む欄がないからです。だからまだ誰も使っていないサイトでは、トーストに出すものがありません。後ろに動きの溜まったページ向きです。

ページが長くて、途中で離れられるとき

同じ不満に、2つのウィジェットが両側から答えます。読書進捗バーは上端の細い帯で、訪問者が下るほど埋まっていくので、スクロールバーを掴まなくても残りが分かります。目次はページにすでにある見出しから自分を組み立て、いま読んでいる節を強調します。長いガイドやドキュメントのページが欲しいのはこちらです。どちらも thread id を取りません。保存するものがないからです。

共有がこの組に入る理由は、もっと素っ気ないものです。手で書いた共有リンクは古びますし、ボタンが空のページを投稿する日まで誰も気づきません。共有ウィジェットは要素ひとつで、ブラウザに端末の共有シートがあればそちらへ渡し、なければリンクをコピーします。

メールアドレスを集めるとき

ニュースレターは、ここで唯一 Webflow の利用者に自前の答えがありうるウィジェットです。Webflow のフォームもアドレスを受け取り、送信内容を保存できます。違うのはアドレスの着く場所です。ニュースレターウィジェットは登録を BootSignal の他のデータと同じ場所に置き、訪問者にログインを求めず、data-thread-id を取ります。ブログの購読と順番待ちリストを、フォームを2つ持たずに1つのサイトで回せます。

thread id を取るウィジェットと取らないウィジェット

Webflow の利用者がよく間違えるのはここです。Webflow が間違ったほうを簡単にしているからです。コレクションページのテンプレートの Code Embed の中では、属性値に CMS のフィールドをそのまま差し込めます。その勘は半分ほど当たっています。特定のページについて何かを保存するウィジェットは data-thread-id を取り、その結び付けを望みます。自分の載っているページを読むだけのウィジェットは、その値を無視します。ひとつの値をすべての記事に固定で書けば、記事の全部がひとつの会話を共有します。

この規則は、ここに出ていないウィジェットにもそのまま効きます。投票・ゲストブック・アップボート・リアクション・閲覧数・意見箱はページごとのデータを持つので thread id を取ります。お知らせバー、クッキー同意、ライトボックス、ギャラリー、画像比較、拡大鏡、スプリットフラップ、マインドマップ、Testimonial Wall、エフェクトは取りません。

Designer が見せるものと隠すもの

• <script> タグを含む Code Embed は、Designer のキャンバスにプレースホルダーしか出しません。Webflow がそこで先に描くのは <iframe> と <style> の中身だけで、ほかは描きません。スクリプトが動くのは preview・publish・書き出しの時点です。
• Webflow は、カスタムコードは preview モードで効くけれどサイトを公開するまで本番には出ない、と書いています。ウィジェットは条件をもうひとつ足します。site id に登録されたホスト名でだけ応答し、preview は自分のドメインから配信されません。信用できる試し方は、登録済みドメインの公開された URL で、ステージングも含みます。
• カスタムコードの欄はひとつあたり 50,000 文字まで入ります。Site settings の head とフッター、Page settings の head と body 直前、そして Code Embed のひとつひとつです。1行のローダーはその天井にまるで届きません。Webflow が src で読み込む形を勧めるのもそのためです。
• カスタムコードに <html>・<body>・<head> タグを貼らないでください。レイアウトが壊れると Webflow が警告しています。ここでのマウントはどれもただの div なので、そもそも出番がありません。
• 新しく公開した Webflow のサイトには jQuery 3.5.1 がすでに載っていて、写しが2つあると衝突すると Webflow が警告しています。ここで1つ足すものはありません。

最初の一周はこの順で

1. 公開先のドメインと .webflow.io のステージングドメインを登録し、site id をコピーします。
2. Site settings、Custom code、Footer code にローダーを一度だけ貼り、Save changes を押します。
3. 最初のウィジェット用に Code Embed をひとつ足します。すべての記事に載るものなら、コレクションページのテンプレートに置きます。
4. publish して本番の URL を開き、ひとつが動くのを確かめてから2つめに進みます。
5. 残りは div で足していきます。2本目のローダーも、2つめのサブスクリプションもありません。

何かが描かれないときは、その一覧を逆から歩いてください。ホスト名の登録、サイトの公開、埋め込みが head ではなくページの中にあるか、表が取ると書いた場所に thread id があるか。この4つでほとんど片が付きます。ページに何が要るかを決める前に、まだホスティング型の提供元を見比べている最中なら、代替サービスの比較に値段まで付いた比較があります。