ウィジェット連携ドキュメント
基本的な設置から外観の設定まで、TalkTGをサイトに追加する方法を説明します。
目次
クイックスタート
コードを1行貼り付けるだけで、数分以内に導入できます。
登録してサイトを追加
アカウントを作成し、「サイト」から「サイトを追加」を選び、ドメインを入力します。
Telegramボットを連携
@BotFatherでボットを作成してTokenをコピーし、サイト詳細で連携後、ボットへ /start を送信します。
ウィジェットコードを貼り付け
サイト詳細から埋め込みコードをコピーし、HTMLの </body> の直前に貼り付けます。
準備するもの
- 1TalkTGアカウント
- 2HTMLソースを編集できるウェブサイト
- 3@BotFatherで取得したTelegram Bot Token
インストール
下のスクリプトの YOUR_SITE_ID をダッシュボードに表示されるサイトIDに置き換えてください。
<script src="https://talktg.com/widget.js"
data-site-id="YOUR_SITE_ID" async></script>通常のHTML
</body>の直前にスクリプトを追加します。
Next.js / React
ルートレイアウトでNext.jsのScriptコンポーネントを使用します。
Vue / Nuxt
nuxt.config.tsのapp.head.scriptに追加します。
WordPress
footer.phpの</body>直前、またはヘッダー・フッター用プラグインで追加します。
Shopify
theme.liquidの</body>直前に追加します。
Wix
カスタムコードでBody末尾を選択し、すべてのページに適用します。
ウィジェット設定
「サイト → 対象サイト → ウィジェット設定」で外観と動作を変更できます。
| 項目 | 初期値 | 説明 |
|---|---|---|
| メインカラー | #6366F1 | ボタン、ヘッダー、訪問者メッセージのテーマ色。 |
| 位置 | bottom-right | 右下または左下に表示します。 |
| あいさつ文 | Hi there! | 初回訪問者に表示するメッセージ。 |
| 担当者名 | Support | チャットヘッダーに表示する名前。 |
| 自動ポップアップ | false | 新規訪問者に自動表示するかどうか。 |
| 通知音 | true | 新しい返信で音を鳴らすかどうか。 |
APIリファレンス
以下はウィジェット内部で使われる公開APIです。通常は直接呼び出す必要はありません。
/api/widget/config/{siteId}ウィジェット設定を取得します。
/api/sites/{siteId}/statusTelegramボットの状態を確認します。
/api/chat/send訪問者メッセージを送信します。
/api/chat/history会話履歴を取得します。
/api/chat/poll新しいメッセージを取得します。
仕組み
スクリプトは非同期で読み込まれ、Shadow DOMでスタイルを分離します。
訪問者のメッセージはTalkTGから連携済みTelegramへ転送されます。
Telegramでの返信はウェブのチャット画面に表示されます。
訪問者情報をブラウザに保存し、再訪時も会話を継続します。
よくある質問とトラブル対処
ウィジェットが表示されません
スクリプトの位置、サイトID、ブラウザコンソールのエラーを確認してください。
Telegramにメッセージが届きません
ボットへ /start を送り、ダッシュボードが連携済みになっているか確認してください。
複数ドメインで使えますか？
1サイトにつき1ドメインです。ドメインごとにサイトを作成してください。
サイトが遅くなりませんか？
asyncで非同期に読み込むため、ページ表示をブロックしません。
始める準備はできましたか？
数分で設定できます。クレジットカードは不要です。