Configuration

Personnalisez l’apparence et le comportement du widget.

Options d’initialisation#

Option	Par défaut	Description
agentId	requis*	L’ID unique de votre agent. *Pour les widgets humains uniquement, `channelId` seul suffit.
channelId	—	ID du canal du widget. Détermine quels réglages de widget (style, info-bulles et bannières outbound) s’appliquent lorsqu’un même agent alimente plusieurs widgets, et sert de seul identifiant pour les widgets humains uniquement. Au moins l’un de `agentId` / `channelId` est requis.
position	bottom-right	`bottom-right` ou `bottom-left`
primaryColor	#3B82F6	Couleur de marque pour le bouton et l’en-tête du widget
title	Support	Texte du titre de l’en-tête
greeting	auto	Message de bienvenue (chargé depuis les paramètres du tableau de bord par défaut)
language	page	Langue du widget sous forme de code BCP-47 (`de`, `pt-BR`). Définit l'interface, le message d'accueil et les questions rapides. Si elle est omise, le widget suit le `<html lang>` de la page : une page dont le `lang` n'est pas `en` démarre désormais dans cette langue, quel que soit le navigateur du visiteur. Un simple `<html lang="en">` est considéré comme une valeur de modèle par défaut et ignoré : le visiteur conserve l'ancien comportement (choix mémorisé, puis langue du navigateur). Passez `'browser'` pour ignorer complètement `<html lang>` et revenir au comportement « navigateur uniquement ». Modifiable à la volée avec `Respondo.setLanguage('fr')` — pratique pour les sélecteurs de langue qui ne rechargent pas la page.
placeholder	—	Texte d’espace réservé personnalisé du champ de saisie
quickQuestions	—	Tableau de questions suggérées affichées avant le premier message
logoUrl	—	URL de votre logo affiché dans l’en-tête du widget
avatarUrl	—	URL de l’avatar de l’agent IA affiché à côté des messages
identity	—	Identité utilisateur prédéfinie au moment de l’initialisation (mêmes champs que `identify()`)
localStorageKey	—	Clé localStorage à partir de laquelle lire automatiquement `userId` (pour les configurations GTM / no-code)
chatSize	default	`compact`, `default` ou `large` — dimensions de la fenêtre de chat
launcherSize	default	`small`, `default` ou `large` — taille du bouton lanceur
offsetBottom	20	Distance depuis le bord inférieur (px)
offsetSide	20	Distance depuis le bord gauche/droit (px)
borderRadius	20	Rayon de bordure de la fenêtre de chat (px)
zIndex	999999	z-index CSS pour le conteneur du widget
customCSS	—	CSS personnalisé injecté dans le Shadow DOM du widget pour un style avancé
testMode	false	Marquer les conversations comme test (masquées des vues principales)

Configuration complète#

Configuration complètejavascript

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  channelId: 'YOUR_CHANNEL_ID',
  position: 'bottom-right',        // 'bottom-right' | 'bottom-left'
  primaryColor: '#2563eb',
  language: 'de',                  // BCP-47 ; défaut : <html lang> (en = signal faible), 'browser' l'ignore
  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', // lecture automatique du userId depuis localStorage (GTM / no-code)
  chatSize: 'default',              // 'compact' | 'default' | 'large'
  offsetBottom: 20,                 // distance depuis le bas (px)
  identity: {                      // facultatif : à définir à l’initialisation si l’utilisateur est déjà connu
    email: 'user@example.com',
    name: 'John Doe',
    userId: 'usr_123',
    properties: {                  // propriétés de contact personnalisées
      account_type: 'enterprise',
      region: 'eu-west'
    }
  }
});

La plupart des paramètres (couleur, logo, message de bienvenue, questions rapides) sont gérés depuis le tableau de bord Channels. Le widget les récupère au chargement — vous n’avez besoin que de la paire agentId/channelId issue du code d’intégration.