素のhtmlサイトにライブチャットを入れる

2026年9月30日 · 著者: kuba · 10分で読めます

素のHTMLサイトにライブチャットを入れるのに必要なのは、ちょうど1行です。</body>の前に置くscriptタグです。このガイドでは、手書きのページや静的サイトジェネレーターで作ったサイトのどこにその1行を置くか、一緒に設定できるすべてのオプション、そしてクリック前に何も読み込まれないことをブラウザで確認する方法を紹介します。

その1行

<script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>

サイトキーはダッシュボードのインストールページにあり、スニペットにすでに入った状態でコピーボタンと一緒に表示されます。site_live_で始まる公開キーです。どのみちページのソースに載るものですし、登録したドメインでしか動作しません。

これが読み込むファイルはランチャーです。ボタン、そのスタイル、ダッシュボードで公開したデザインが入っています。gzip圧縮で4 kb未満です(超えるとビルドが失敗します)。私たちのAPIへのリクエストは0件で、Cookieも設定しません。チャットパネルとサーバーへの接続は、訪問者がクリックしたときにだけ読み込まれます。

このテーマが初めてなら、基本ガイドで、チャットウィジェットがページにかけるコストと確認すべき点を説明しています。

置く場所

閉じタグ</body>の直前です。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My site</title>
    <link rel="stylesheet" href="/style.css">
  </head>
  <body>
    <h1>Hello</h1>
    <p>Everything else on your page.</p>

    <script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>
  </body>
</html>

そこに置く理由と、asyncを付ける理由です。

bodyの最後に置けば、タグより上にあるものを何も待たせません。ブラウザがタグにたどり着く頃には、コンテンツはもう表示されています。
**async**は、ファイルをバックグラウンドで取得し、届いたらページを止めずに実行するようブラウザに伝えます。外さないでください。

すべてのページに、1回ずつ

チャットは、訪問者が質問を持ちそうなすべてのページに置くべきで、たいていは全ページです。どう入れるかはサイトの作り方で変わります。

手書きのページ。 各.htmlファイルにタグを貼り付けます。フォルダ内で</body>を検索すれば全部見つかります。あとでページを追加するときは、既存のページをコピーして始めれば、タグも一緒に付いてきます。

共通のフッター。 ページが共通のフッターファイル(サーバーサイドインクルード、PHPのinclude、テンプレートのパーシャル)を読み込んでいるなら、そこに1回だけタグを置きます。

静的サイトジェネレーター。 すべてのページが継承するベースレイアウトに置きます。

ジェネレーター	ファイル
Jekyll	`_layouts/default.html`、または`_includes/footer.html`
Hugo	`layouts/_default/baseof.html`、またはフッターのパーシャル
Eleventy	`_includes/`内のベースレイアウト
Astro	ベースレイアウトのコンポーネント
Pandoc、自作スクリプト	渡しているHTMLテンプレート

タグが2回入ってしまったページも心配いりません。ランチャーはすでにページにあるかを確認し、2つ目は何もしません。とはいえ無駄なリクエストにはなるので、1つにしておきましょう。

コードで設定する

ダッシュボードで選んだデザインはランチャーの中に入っているので、上の1行だけでインストールは完了です。設定をHTML側で持ちたい場合は、タグの上のscriptでwindow.Spookatを指定します。

<script>
  window.Spookat = {
    style: "clean",
    font: "system",
    accent: "#2F6FEB",
    side: "right",
    greeting: "hi. questions about an order? ask here.",
    lang: "en"
  };
</script>
<script src="https://cdn.spookat.com/s/YOUR_SITE_KEY.js" async></script>

ページとダッシュボードの設定が食い違う場合は、ページが優先されます。各キーの意味は次のとおりです。

キー	指定する値	内容
`style`	8種類のスタイルのどれか	デザイン。`brutal`、`clean`、`glass`、`soft`、`terminal`、`paper`、`retro`、`swiss`
`font`	`"system"`、または17種類のホスト済みフォントのどれか	ウィジェットのフォント。`system`は何もダウンロードしません。ホスト済みフォントはクリック後に私たちのCDNから読み込まれ、Googleからは読み込みません
`accent`	`"#RRGGBB"`	ブランドカラー。その上の文字色はコントラストに応じて選ばれます
`side`	`"right"`または`"left"`	ランチャーの位置
`greeting`	テキスト、200文字まで	訪問者が最初に見るメッセージ。空の場合はスタイル既定のもの
`label`	テキスト、40文字まで	丸いボタンを、このテキスト入りのピル型にします
`lang`	`"en"`や`"pl"`などの言語コード	ウィジェットの言語。既定は訪問者のブラウザの言語、次に英語
`user`	`{ id, sig }`、cool guy以上	ログイン中のユーザー。あなたのサーバーで署名します

userの署名方法を含む完全なリファレンスはドキュメントにあります。

多言語サイト

言語ごとにフォルダがある(/en/、/pl/)サイトなら、フォルダごとにlangを指定すると、ウィジェットがブラウザではなくページに合わせて表示されます。ウィジェットは12言語に対応しています。チームには会話ごとに訪問者の言語が表示されます。

ひとこと添えたランチャー

シンプルなサイトには、訪問者がよく聞くはっきりした質問があることが多いものです。「〜に配送できますか」「予約できますか」など。"questions? ask a human"のようなlabelを付けると、アイコンがそれを伝える小さなピル型になります。スマートフォンでも角に表示されるので、短くしてください。

訪問者に見えるもの

角にあなたのサイトの色のボタンがあります。クリックすると、あいさつ文と、人間が返信することを伝える1行が入ったパネルが開きます。訪問者が入力すると、メッセージはSlackやDiscordのスレッド、または当社のインボックスとスマホアプリに届き、あなたの返信がウィジェットに戻ります。返信前に離脱していてメールアドレスを残していれば、cool guy以上のプランでは返信をメールで送ります。チャットは、履歴の保存期間が切れるまで(broke afでは30日)、ページを移動しても再訪問しても、その端末に残ります。

確認する

古いキャッシュやストレージが影響しないよう、サイトをプライベートウィンドウで開きます。そしてDevToolsを開きます(F12、または右クリックして「検証」)。

Network。 「Disable cache」にチェックを入れて再読み込みし、フィルターにspookatと入力します。リクエストは1件。cdn.spookat.comからのランチャーで、転送量は約2 kbです。コードのwindow.Spookatで公開したものと違うスタイルを指定している場合は2件で、どちらもcdn.spookat.comからです。api.spookat.comには何も送られません。
Application(Firefoxでは「ストレージ」)。Cookie:Spookatのものはありません。Local storage:まだ何もありません。キーが1つ現れるのは、最初のメッセージを送った後だけです。その端末でチャットを保持するためのものです。
ランチャーをクリック。 パネルのスクリプトと、選んだスタイルのスタイルシートがCDNから読み込まれ、チャットが接続されます。テストメッセージを送って、SlackやDiscordに届くのを確認してください。

ランチャーが表示されない場合:

Networkタブに何も出ない。 そのページにタグがない、HTMLコメントの中に入っている、またはビルド工程で削除されています。ページのソースを表示してspookatを検索してください。
リクエストが失敗する。 長さの違うキーには、CDNが404を返します。URL内のキーをダッシュボードのものと見比べてください。
ランチャーがデフォルトの見た目で表示され、ずっと接続しない。 キーが1文字違うだけなら、ランチャーはそのまま読み込まれます。キーをダッシュボードのものと見比べてください。
ランチャーは出るが、チャットが接続しない。 登録したドメインとは別のドメインで開いています。ローカルファイル、localhost、ステージング環境などです。チャットは登録したドメインとそのサブドメインでのみ接続します。
Content Security Policyでブロックされている。 コンソールに該当するディレクティブが表示されます。スクリプト、スタイル、フォントにはhttps://cdn.spookat.comを、接続にはwss://api.spookat.comを、画像にはdata:を許可してください。ロゴやチームメンバーの写真はdata:画像だからです。ランチャーは自分のshadow rootに小さな<style>ブロックも追加するので、style-srcでインラインスタイルを許可する必要があります。window.Spookatをインラインスクリプトで指定している場合は、そのスクリプトにポリシーのnonceかハッシュを付けてください。

追加しないほうがいいもの

素のHTMLサイトが速いのは、間に何もないからです。その状態を保ちましょう。

チャットのためだけにタグマネージャーを入れない。 スクリプトを読み込むためのスクリプトで、ランチャーより重くなります。
パネルにpreloadやprefetchを付けない。 パネルのダウンロードが、訪問者全員についてクリックの前に移ってしまいます。
deferとasyncを組み合わせて悩まない。 このタグにはasyncだけで正解です。
数秒後にチャットを開くラッパーを付けない。 全員にパネル全体を読み込ませ、スマートフォンではページを覆ってしまいます。本当にチャットを開いた人には、あいさつ文が同じ役目を果たします。

ホスティングは関係ない

GitHub Pages、Netlify、Cloudflare Pages、共用サーバーのFTPフォルダ、押し入れのサーバー。タグは素のHTMLなので、ファイルがどこから配信されていても動きます。ビルド工程もパッケージもサーバーのコードも要りません。

返信先をつなぐ

最後に、ダッシュボードでSlackかDiscordを接続し、チャンネルを選びます。接続せずに、当社のインボックスとスマホアプリで返信してもかまいません。訪問者ごとに専用のスレッドができ、チャンネルの誰でも返信でき、シート課金はありません。料金はbroke afで1サイトあたり月$4.99です。

チェックリスト

async付きのタグを1つ、</body>の前に、すべてのページに(または共通レイアウトに1回)。
設定をコードで持つなら、その上にwindow.Spookat(任意)。
プライベートウィンドウで確認済み:クリック前のリクエストは1件(公開していないスタイルをコードで指定している場合は2件、どちらもcdn.spookat.comから)、Cookieなし。
ウィジェットから送ったテストメッセージがSlackかDiscordに届いた。

トライアルは14日間で、カードは不要です。この1行を貼れば、静的サイトでも質問に答えられるようになります。