設置ガイド

導入企業のIT担当者向け設置マニュアルです。
貴社サイトにWidgetを設置する手順を説明します。

概要

EAP Widget は、貴社サイトにJavaScriptタグを1行追加するだけで導入できます。設置後、画面右下にチャットボタンが表示され、従業員がメンタルヘルス支援機能を利用できます。

設置手順

ステップ1: コードを取得

以下のコードをコピーしてください。

<script
  src="https://widget.kazunalab.com/eap/v1/widget.js"
  data-token="貴社専用トークン"
  data-lang="ja"
  data-position="bottom-right">
</script>

重要: 貴社専用トークン は契約時にお渡しするトークンに置き換えてください。

ステップ2: HTMLに追加

HTMLの </body> タグの直前にコードを追加してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>貴社サイト</title>
</head>
<body>
  <!-- 貴社サイトのコンテンツ -->

  <!-- EAP Widget（</body>の直前に配置） -->
  <script
    src="https://widget.kazunalab.com/eap/v1/widget.js"
    data-token="xx-xxxx-xxxx-xxxx"
    data-lang="ja"
    data-position="bottom-right">
  </script>
</body>
</html>

ステップ3: 動作確認

設置後、以下を確認してください。

画面右下にチャットボタンが表示される
ボタンをクリックするとWidgetが開く
「AIチャット相談」で会話ができる

パラメータ一覧

パラメータ	必須	説明	設定例
`data-token`	はい	貴社専用トークン	`"xx-xxxx-xxxx-xxxx"`
`data-lang`	いいえ	言語（ja/en）	`"ja"`（デフォルト）
`data-position`	いいえ	ボタン位置	`"bottom-right"` または `"bottom-left"`
`data-guide`	いいえ	ガイド表示	`"true"`
`data-guide-delay`	いいえ	ガイド遅延（秒）	`"3"`

ガイドメッセージを表示する

初回訪問者に案内を表示する場合：

<script
  src="https://widget.kazunalab.com/eap/v1/widget.js"
  data-token="xx-xxxx-xxxx-xxxx"
  data-lang="ja"
  data-guide="true"
  data-guide-delay="3">
</script>

JavaScript API

ボタンやリンクからWidgetを開くことができます。

// Widgetを開く
EapWidget.open();

// Widgetを閉じる
EapWidget.close();

使用例

<button onclick="EapWidget.open()">相談窓口を開く</button>

トラブルシューティング

ボタンが表示されない

スクリプトタグが正しく記述されているか確認
トークンが正しいか確認
ブラウザの開発者ツール（F12）でエラーを確認

「認証に失敗しました」と表示される

トークンが正しいか確認
有効期限が切れていないか確認

他の要素と重なる

ボタン位置を左下に変更：

data-position="bottom-left"

動作環境

Google Chrome（最新版）
Safari（最新版）
Firefox（最新版）
Microsoft Edge（最新版）

概要