コードで完全制御
scriptタグのdata属性で全ての設定を管理。バージョン管理やデプロイ自動化との相性も抜群です。
動的なカスタマイズ
JavaScriptでdata属性を変更するだけで、テーマカラーやウェルカムメッセージをリアルタイムに更新できます。
イベント連携
カスタムイベントをリッスンしてGoogle Analyticsやその他のツールと連携。ユーザー行動を詳細に追跡できます。
基本的な使い方
最小限のscriptタグで、デフォルト設定でチャットボットを表示できます。
<script src="https://sokuto.ai/script.js" data-id="YOUR_API_KEY" defer></script>全属性を使った例
全てのdata属性を使用した例です。
<script
src="https://sokuto.ai/script.js"
data-id="YOUR_API_KEY"
data-theme-color="#FF5733"
data-welcome-message="こんにちは！何かお手伝いできますか？"
data-context="このページは料金プランページです"
data-user-context='{"is_logged_in":true,"plan":"pro"}'
data-lang="ja"
defer
></script>Data属性一覧
scriptタグに設定できるdata属性の一覧です。動的更新に対応した属性は、JavaScriptで変更すると即座に反映されます。
data-id必須チャットボットのAPIキー（必須）
data-id="YOUR_API_KEY"data-theme-color動的更新対応チャットボタンとヘッダーのテーマカラー（HEXコード）
data-theme-color="#FF5733"data-welcome-message動的更新対応チャット開始時に表示されるウェルカムメッセージ
data-welcome-message="こんにちは！何かお手伝いできますか？"data-contextAIに追加のコンテキスト情報を渡す（ページ固有の情報など）
data-context="このページは料金プランページです"data-user-contextユーザー情報をJSON形式で渡す（ログイン状態、プラン情報など）
data-user-context='{"is_logged_in":true,"plan":"pro"}'data-lang言語設定（ja または en）
data-lang="en"カスタムイベント
チャットボットから発火されるカスタムイベントをリッスンして、アナリティクスツールと連携できます。
sokutoai:chat_openチャットウィジェットが開かれた時に発火
Detail: timestamp: 開いた時刻（ミリ秒）
sokutoai:message_sentユーザーがメッセージを送信した時に発火
Detail: message: 送信されたメッセージ、timestamp: 送信時刻
Google Analytics連携例
// チャット開始を追跡
window.addEventListener('sokutoai:chat_open', function(event) {
gtag('event', 'chat_open', {
'event_category': 'engagement',
'event_label': 'sokuto_chatbot'
});
});
// メッセージ送信を追跡
window.addEventListener('sokutoai:message_sent', function(event) {
gtag('event', 'chat_message', {
'event_category': 'engagement',
'event_label': event.detail.message
});
});動的更新
JavaScriptでscriptタグのdata属性を変更すると、チャットボットの設定が即座に更新されます。テーマカラーとウェルカムメッセージが動的更新に対応しています。
// テーマカラーを動的に変更
var script = document.querySelector('script[data-id]');
script.setAttribute('data-theme-color', '#00FF00');
// ウェルカムメッセージを動的に変更
script.setAttribute('data-welcome-message', '新しいメッセージです！');WordPressプラグインとの対応表
WordPressプラグインのフック・フィルターと同等の機能をdata属性で実現できます。
| WordPressフック | Data属性 / イベント |
|---|---|
sokutoai_widget_enabled | scriptタグの追加/削除で制御 |
sokutoai_welcome_message | data-welcome-message |
sokutoai_user_context | data-user-context |
sokutoai_script_attributes | 各data属性を直接設定 |
sokutoai_on_chat_open | sokutoai:chat_open |
sokutoai_on_message_sent | sokutoai:message_sent |