KnoAskのチャットボットを自社のWebサイトに設置する方法を説明します。コピー&ペーストするだけで、簡単に設置できます。
ウィジェットを設置するには、まずボットの公開トークン（Bot Token）を取得する必要があります。
💡 ヒント
ボットトークンは、ボットごとに自動生成される一意の文字列です。セキュリティのため、トークンは他人に共有しないでください。
最も簡単な方法です。HTMLファイルに1行のコードを追加するだけで設置できます。
HTMLの`
`タグの閉じタグの直前に、以下のコードを追加してください：<script
src="https://app.knoask.com/widget.js"
data-bot-token="YOUR_BOT_TOKEN"
data-api-url="https://app.knoask.com"
data-theme="light"
data-mode="floating"
data-position="bottom-right">
</script>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>My Website</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my website content.</p>
<!-- KnoAsk Widget -->
<script
src="https://app.knoask.com/widget.js"
data-bot-token="YOUR_BOT_TOKEN"
data-api-url="https://app.knoask.com"
data-theme="light"
data-mode="floating"
data-position="bottom-right">
</script>
</body>
</html>
| 属性 | 必須 | 説明 | デフォルト値 |
|---|---|---|---|
src |
必須 | ウィジェットJavaScriptファイルのURL | - |
data-bot-token |
必須 | ボットの公開トークン（ボット詳細画面で取得） | - |
data-api-url |
オプション | APIのベースURL | 現在のドメイン |
data-theme |
オプション | テーマ（light または dark） |
light |
data-position |
オプション | ウィジェットの位置（bottom-right または bottom-left、data-mode="floating"時のみ有効） |
bottom-right |
data-mode |
オプション | 表示モード（floating または inline） |
floating |
data-inline-target |
オプション | インライン表示時の描画先セレクタ（例: #knoask-inline-chat） |
未指定時はscript直前 |
data-inline-height |
オプション | インライン表示時のチャット欄の高さ（例: 640px, 70vh） |
640px |
data-theme属性で、ウィジェットのテーマを変更できます：
data-position属性で、ウィジェットの表示位置を変更できます：
社内FAQのように「常時表示のチャット欄」が必要な場合は、data-mode="inline"を指定してください。右下アイコンではなく、指定した要素内にチャット欄を表示します。
<div id="knoask-inline-chat"></div>
<script
src="https://app.knoask.com/widget.js"
data-bot-token="YOUR_BOT_TOKEN"
data-api-url="https://app.knoask.com"
data-theme="light"
data-mode="inline"
data-inline-target="#knoask-inline-chat"
data-inline-height="640px">
</script>
data-inline-targetで指定した要素が存在しない場合は、scriptタグ直前に自動挿入して表示されます。data-inline-heightはpx/vh/vw/rem/em/%が利用できます。WordPressを使用している場合は、専用のプラグインを使用することで、より簡単に設置できます。
bot_idで指定します。
プラグインをインストールすると、以下のショートコードが使用できます：
[knoask_chat bot_id="1" position="bottom-right"]
このショートコードを、ページや投稿に追加するだけで、チャットボットが表示されます。
📝 注意
利用前に、プラグイン同梱のREADME/INSTALLATIONに記載の要件（WordPress・PHPバージョン、API設定）をご確認ください。
セキュリティのため、ウィジェットが動作するドメインを制限することができます。
example.com、www.example.com）。
複数のドメインを追加する場合は、カンマで区切ります。
🔒 セキュリティのベストプラクティス
本番環境では、必ずドメイン制限を設定することを推奨します。これにより、不正なサイトでウィジェットが使用されることを防げます。
ウィジェットを設置したら、以下の点を確認してください：
floatingでは画面右下（または左下）にチャットボタン、inlineでは指定した要素内にチャット欄が表示されるか確認します。
以下の点を確認してください：
</body>タグの直前に配置されているかボットの設定で、現在のドメインが許可されていません。以下のいずれかの方法で解決できます：
以下の点を確認してください：
以下の点を確認してください：
ウィジェットの設置が完了したら、以下のページも参照してください：