ドキュメント

ウィジェットのスタイリングとカスタマイズ

初期化オプションまたはダッシュボード UI からウィジェットの外観を制御できます。

サイズプリセット#

chatSize と launcherSize で、組み込みの 3 つのサイズプリセットから選択できます:

chatSizeチャットウィンドウ
compact340 x 460 px
default380 x 520 px
large420 x 600 px

launcherSize は chatSize とは独立してフローティングボタンを制御します:

launcherSizeランチャーアイコン
small48 px22 px
default60 px28 px
large68 px32 px
Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  chatSize: 'large',        // より広く高いチャットウィンドウ
  launcherSize: 'small'     // より小さいフローティングボタン
});

配置#

offsetBottom と offsetSide（ピクセル単位）でウィジェットの位置を微調整できます。 position（bottom-right または bottom-left）と組み合わせることで、配置を完全に制御できます。

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  position: 'bottom-left',
  offsetBottom: 40,          // 下端から 40px（デフォルト: 20）
  offsetSide: 30             // 左端から 30px（デフォルト: 20）
});

角丸と Z-Index#

borderRadius はチャットウィンドウの角の丸みを制御します（デフォルト: 20px）。zIndex は重なり順を設定します（デフォルト: 999999）。

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  borderRadius: 12,    // よりシャープな角
  zIndex: 100000       // 競合を避けるための低い z-index
});

カスタム CSS#

組み込みオプションを超えた高度なスタイリングには、 customCSS 文字列を渡します。これはウィジェットの Shadow DOM に注入され、任意のウィジェットスタイルを上書きできますが、ページには影響しません。

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  customCSS: `
    .respondoai-chat {
      border-radius: 24px;
      box-shadow: 0 12px 48px rgba(0,0,0,0.2);
    }
    .respondoai-launcher {
      box-shadow: none;
      border: 2px solid #e5e7eb;
    }
    .respondoai-header {
      backdrop-filter: blur(10px);
    }
    .respondoai-message.assistant {
      background: #f0f9ff;
    }
    /* アナウンスカード内の CTA ボタンをスタイリング */
    .respondoai-announcement-cta-button {
      border-radius: 999px;
      font-weight: 600;
      letter-spacing: 0.2px;
    }
    /* アナウンスの CTA ボタンをデフォルトの縦積みではなく横一列に配置 */
    .respondoai-announcement-ctas {
      flex-direction: row;
    }
  `
});
カスタム CSS は Shadow DOM 内で実行されます — ページのスタイルから完全に隔離されています。副作用なしに任意のウィジェットクラスを安全に上書きできます。

利用可能な CSS クラス:

クラス要素
.respondoai-widgetルートコンテナ（位置、z-index）
.respondoai-launcherフローティングボタン
.respondoai-chatチャットウィンドウ
.respondoai-headerチャットヘッダーバー
.respondoai-messagesメッセージリストコンテナ
.respondoai-message.userユーザーメッセージの吹き出し
.respondoai-message.assistantボットメッセージの吹き出し
.respondoai-input-area入力バーコンテナ
.respondoai-inputテキスト入力フィールド
.respondoai-send送信ボタン
.respondoai-suggestion-btnクイック質問ボタン
.respondoai-announcement-cta-buttonアナウンスカード内の CTA ボタン
.respondoai-announcement-ctasアナウンスカード内の CTA ボタンを囲むラッパー（レイアウト対象）
すべてのスタイリングオプションはダッシュボードからも設定できます — Channels → Widget → Appearance に移動してください。ダッシュボードで加えた変更は、config API を介して自動的にウィジェットへ配信されます。