ドキュメント

設定

ウィジェットの外観と動作をカスタマイズします。

初期化オプション#

オプションデフォルト説明
agentId必須*エージェントの一意な ID。*人間のみで運用するウィジェットでは、 channelId だけで十分です。
channelId—ウィジェットチャネルの ID。1 つのエージェントが複数のウィジェットを動かしている場合に、どのウィジェットの設定（スタイリング、アウトバウンドのツールチップ/バナー）を適用するかを選択します。人間のみで運用するウィジェットでは唯一の識別子です。 agentId / channelId の少なくとも一方が必須です。
positionbottom-rightbottom-right または bottom-left
primaryColor#3B82F6ウィジェットボタンとヘッダーのブランドカラー
titleSupportヘッダーのタイトルテキスト
greetingautoウェルカムメッセージ（デフォルトではダッシュボード設定から読み込まれます）
languagepageウィジェットの言語を BCP-47 コードで指定します（de、pt-BR）。UI・あいさつ・クイック質問の言語を決めます。省略するとページの <html lang> に従います。lang が en 以外のページは、訪問者のブラウザに関係なくその言語で起動するようになりました。<html lang="en"> だけの場合はテンプレートの既定値とみなして無視し、訪問者には従来の動作（記憶された選択、次にブラウザの言語）を維持します。'browser' を渡すと <html lang> を完全に無視し、ブラウザのみの動作に戻ります。実行時は Respondo.setLanguage('fr') で変更できます。ページを再読み込みしない言語切替に便利です。
placeholder—カスタム入力プレースホルダーテキスト
quickQuestions—最初のメッセージ前に表示される推奨質問の配列
logoUrl—ウィジェットヘッダーに表示されるロゴの URL
avatarUrl—メッセージの横に表示される AIエージェントのアバターの URL
identity—初期化時にユーザー ID をあらかじめ設定（ identify() と同じフィールド）
localStorageKey—userId を自動読み取りする localStorage のキー（GTM / ノーコード構成向け）
chatSizedefaultcompact、default、large — チャットウィンドウの寸法
launcherSizedefaultsmall、default、large — ランチャーボタンのサイズ
offsetBottom20下端からの距離（px）
offsetSide20左端/右端からの距離（px）
borderRadius20チャットウィンドウの角丸（px）
zIndex999999ウィジェットコンテナの CSS z-index
customCSS—高度なスタイリングのためにウィジェット Shadow DOM に注入されるカスタム CSS
testModefalse会話をテストとしてマーク（メインビューから非表示）

完全な設定#

完全な設定javascript
Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  channelId: 'YOUR_CHANNEL_ID',
  position: 'bottom-right',        // 'bottom-right' | 'bottom-left'
  primaryColor: '#2563eb',
  language: 'de',                  // BCP-47。既定: <html lang>（en は弱いシグナル）、'browser' で無視
  title: 'Help Center',
  greeting: 'How can we help?',
  placeholder: 'Ask anything...',
  logoUrl: 'https://yoursite.com/logo.png',
  avatarUrl: 'https://yoursite.com/avatar.png',
  quickQuestions: [
    'How do I get started?',
    'What are the pricing plans?',
    'How do I contact support?'
  ],
  testMode: false,
  localStorageKey: 'myapp_user_id', // localStorage から userId を自動読み取り（GTM / ノーコード）
  chatSize: 'default',              // 'compact' | 'default' | 'large'
  offsetBottom: 20,                 // 下端からの距離（px）
  identity: {                      // 任意: ユーザーが既知の場合は init 時に設定
    email: 'user@example.com',
    name: 'John Doe',
    userId: 'usr_123',
    properties: {                  // カスタムの連絡先プロパティ
      account_type: 'enterprise',
      region: 'eu-west'
    }
  }
});
ほとんどの設定（色、ロゴ、あいさつ、クイック質問）は Channels ダッシュボードから管理されます。ウィジェットは読み込み時にこれらを取得します — 必要なのは、埋め込みコードにある agentId/channelId のペアだけです。