Comment personnaliser les formulaires pré-chat Zendesk : Le guide complet 2026

Comment personnaliser les formulaires pré-chat Zendesk : Le guide complet 2026

Les formulaires pré-chat Zendesk recueillent les informations des visiteurs avant le début d'un chat en direct. Ils vous permettent de capturer les noms, les e-mails, les numéros de téléphone et de diriger les conversations vers le bon service. Lorsqu'ils sont configurés correctement, ils réduisent les allers-retours et donnent aux agents du contexte dès le premier message.

Le défi ? La documentation de Zendesk est dispersée sur plusieurs pages, couvrant séparément les paramètres d'administration, l'API JavaScript et la configuration du SDK mobile. Ce guide regroupe tout en un seul endroit.

Vous apprendrez à personnaliser les cinq éléments de base du formulaire pré-chat (message d'accueil, profil du visiteur, numéro de téléphone, sélection du service et champ de message) à l'aide de trois méthodes : le tableau de bord d'administration, l'API JavaScript et le SDK iOS. Nous couvrons également les problèmes de dépannage courants et les cas où il est pertinent d'envisager des alternatives basées sur l'IA qui éliminent totalement la complexité de la configuration.

Qu'est-ce qu'un formulaire pré-chat Zendesk ?

Un formulaire pré-chat est une boîte de dialogue qui apparaît avant que les visiteurs ne commencent une session de chat en direct. Il recueille des informations qui aident votre équipe d'assistance à répondre plus rapidement et plus efficacement.

Le formulaire pré-chat n'est disponible que dans le Web Widget Zendesk (Classique), et non dans le nouveau widget de messagerie (Messaging), comme confirmé dans la documentation du formulaire pré-chat de Zendesk. Cette distinction est importante car les options de configuration diffèrent considérablement entre les deux.

Les formulaires pré-chat servent trois objectifs principaux :

• Réduire les allers-retours : Les agents connaissent déjà le nom, l'e-mail et la question initiale du client avant que le chat ne commence.
• Router vers la bonne équipe : La sélection du service garantit que les conversations atteignent le groupe approprié (ventes, support technique, facturation).
• Capturer les coordonnées : Même si le chat est déconnecté, vous disposez de l'e-mail du visiteur pour le suivi.

Le formulaire comprend cinq éléments personnalisables :

Élément	Objectif	État par défaut
Message d'accueil	Texte de bienvenue affiché en haut du formulaire	Activé
Profil visiteur (Nom, E-mail)	Champs d'identité de base	Activé
Numéro de téléphone	Champ de contact facultatif	Désactivé
Sélection du service	Menu déroulant pour le routage	S'affiche si des services existent
Champ de message	Question ou demande initiale	Activé

Comprendre le système de tickets Zendesk et la manière dont les formulaires pré-chat l'alimentent vous aide à concevoir des formulaires qui capturent les bonnes données. Pour les équipes gérant un support omnicanal, le formulaire pré-chat est souvent le premier point de contact du parcours client.

Une alternative aux formulaires pré-chat : eesel AI

Avant de plonger dans la configuration JavaScript, demandez-vous si vous avez réellement besoin d'un formulaire statique. eesel AI propose une approche alternative qui recueille le contexte du client de manière conversationnelle plutôt que par des champs de formulaire.

Voici comment cela fonctionne : eesel AI se connecte à votre compte Zendesk et apprend immédiatement de vos anciens tickets, macros, articles du centre d'aide et de toute documentation connectée. Au lieu de présenter aux visiteurs un formulaire à remplir, le chatbot IA engage une conversation naturelle et extrait les mêmes informations de manière dynamique.

Le processus de configuration ne prend que quelques minutes :

1. Connectez eesel AI à votre compte Zendesk (intégration en un clic).
2. Entraînez-le sur vos sources de connaissances existantes (centre d'aide, anciens tickets, documents internes).
3. Déployez-le sous forme de bulle de chat sur votre site Web ou intégrez-le directement à Zendesk Chat.

Principaux avantages par rapport aux formulaires pré-chat traditionnels :

• Aucune configuration JavaScript : Nous gérons automatiquement la collecte du contexte.
• Collecte de données conversationnelle : Les visiteurs répondent aux questions naturellement, pas via des champs de formulaire rigides.
• Routage intelligent : Notre IA détermine le bon service en fonction du contenu de la conversation.
• Apprentissage continu : Le système s'améliore en fonction des corrections des agents et des nouveaux tickets.

Cette approche convient parfaitement aux équipes qui souhaitent réduire la charge de développement tout en capturant les informations dont elles ont besoin. Vous pouvez commencer par une supervision de l'IA (ébauches pour révision humaine) et passer progressivement à une gestion autonome des tickets à mesure que la confiance grandit.

Pour les équipes qui préfèrent ou exigent des formulaires pré-chat traditionnels, les sections suivantes couvrent les options de personnalisation natives de Zendesk.

Comment personnaliser le formulaire pré-chat Zendesk dans l'administration Zendesk

Le tableau de bord d'administration permet une personnalisation de base sans aucun code. Cela couvre la plupart des cas d'utilisation courants.

Étape 1 : Accéder aux paramètres du formulaire pré-chat

Naviguez vers Centre d'administration > Tableau de bord Chat > Paramètres > Widget > Formulaires > Formulaire pré-chat.

Pour les anciens comptes Chat, le chemin peut être Tableau de bord > Paramètres > Widget.

Étape 2 : Configurer le message d'accueil

Le message d'accueil apparaît en haut du formulaire pré-chat. Restez concis, car les visiteurs veulent commencer à chatter, pas lire des paragraphes.

Le champ d'accueil n'accepte que du texte brut (pas de formatage HTML). Utilisez-le pour :

• Les messages de bienvenue (« Bonjour ! Nous sommes là pour vous aider. »)
• Les instructions (« Veuillez remplir le formulaire ci-dessous afin que nous puissions vous aider plus rapidement. »)
• Les avis sur les heures d'ouverture (« Notre équipe est disponible du lundi au vendredi, de 9h à 18h EST. »)

Étape 3 : Configurer les champs d'identité du visiteur

Activez ou désactivez le Profil visiteur pour afficher ou masquer les champs Nom et E-mail. Ceux-ci sont essentiels pour la communication de suivi.

Les options supplémentaires incluent :

• Autoriser la connexion sociale : Permet aux visiteurs de se connecter avec Facebook ou Google au lieu de taper leurs informations.
• Exiger l'e-mail : Rend le champ e-mail obligatoire.

Un avertissement ici : désactiver entièrement le profil visiteur signifie que vous perdez la possibilité de recontacter les visiteurs après la fin du chat. Ne le désactivez que si vous êtes certain de ne pas avoir besoin de leurs coordonnées.

Étape 4 : Ajouter le champ du numéro de téléphone (facultatif)

Activez la collecte des numéros de téléphone sous Autoriser le numéro de téléphone dans la section Profil visiteur.

Pour rendre le champ du téléphone obligatoire, cochez Exiger le numéro de téléphone dans les paramètres du formulaire pré-chat.

La collecte des numéros de téléphone est utile pour :

• Les scénarios de rappel où une assistance téléphonique peut être nécessaire.
• La collecte d'informations de contact alternatives.
• L'identification des clients à haute valeur ajoutée.

Étape 5 : Configurer la sélection du service

Le menu déroulant des services apparaît automatiquement si vous avez configuré des services dans Zendesk Chat. Si vous ne le voyez pas, créez d'abord des services sous Paramètres > Services.

Vous pouvez personnaliser le libellé du menu déroulant (par exemple, changer « Service » en « Sélectionnez votre équipe » ou « Comment pouvons-nous vous aider ? »).

Notez que vous ne pouvez pas masquer des services spécifiques depuis le tableau de bord d'administration. Pour filtrer les services qui apparaissent, vous devrez utiliser l'API JavaScript couverte dans la section suivante.

Personnalisation avancée du formulaire pré-chat Zendesk avec l'API JavaScript

Pour plus de contrôle sur le formulaire pré-chat, utilisez l'API JavaScript du Web Widget. Cela vous permet de personnaliser les messages d'accueil par langue, de filtrer les services, de pré-remplir les informations sur les visiteurs, et plus encore.

L'objet zESettings

L'objet zESettings est l'endroit où vous définissez la configuration du widget. La règle critique : placez-le AVANT le script du widget Zendesk dans votre HTML.

window.zESettings = {
  webWidget: {
    chat: {
      prechatForm: {
        greeting: { '*': 'Bienvenue ! Comment pouvons-nous vous aider aujourd\'hui ?' },
        departmentLabel: { '*': 'Choisissez votre équipe' }
      }
    }
  }
};

Si vous placez zESettings après le chargement du script du widget, vos paramètres ne s'appliqueront pas. C'est l'erreur la plus courante lors de la personnalisation du formulaire pré-chat.

Personnalisation du message d'accueil et du libellé du service

greeting et departmentLabel prennent tous deux en charge des valeurs spécifiques à la langue. Utilisez le caractère générique '*' pour toutes les langues, ou spécifiez des codes de langue pour un support multilingue :

prechatForm: {
  greeting: {
    'en-US': 'Welcome! How can we help?',
    'fr': 'Bienvenue ! Comment pouvons-nous vous aider ?',
    'de': 'Willkommen! Wie können wir Ihnen helfen?',
    '*': 'Hello!'
  },
  departmentLabel: {
    'en-US': 'Select your team',
    'fr': 'Sélectionnez votre équipe',
    '*': 'Service'
  }
}

Le widget détecte la langue du navigateur du visiteur et affiche le message approprié. Le caractère générique '*' sert de solution de secours pour toute langue non explicitement définie.

Filtrer les services affichés

Utilisez l'objet departments pour contrôler quels services s'affichent dans le menu déroulant :

chat: {
  departments: {
    enabled: ['Ventes', 'Support Technique'],
    select: 'Ventes'
  }
}

Propriété	Type	Description
enabled	Tableau	Liste blanche des noms de services à afficher
select	Chaîne	Service par défaut présélectionné

Important : Les noms des services doivent correspondre exactement (sensible à la casse). Si un nom de service n'existe pas, le menu déroulant peut être entièrement masqué sans message d'erreur.

Pré-remplissage des informations visiteur

Pour les utilisateurs connectés, vous pouvez pré-remplir le formulaire avec les informations que vous possédez déjà. L'API Core fournit deux commandes pour cela :

La commande identify définit le nom et l'e-mail :

zE('webWidget', 'identify', {
  name: 'Jean Dupont',
  email: 'jean@example.com'
});

La commande prefill offre plus de contrôle, y compris des champs en lecture seule :

zE('webWidget', 'prefill', {
  name: {
    value: 'Jean Dupont',
    readOnly: true
  },
  email: {
    value: 'jean@example.com',
    readOnly: true
  },
  phone: {
    value: '0123456789',
    readOnly: false
  }
});

Définir readOnly: true empêche les visiteurs de modifier les valeurs pré-remplies. C'est utile lorsque vous avez déjà vérifié l'identité de l'utilisateur.

Configuration du formulaire pré-chat Zendesk pour le SDK mobile

Pour les applications iOS natives, le SDK Zendesk Chat offre une personnalisation équivalente via des classes Swift.

Configuration iOS avec ChatConfiguration

La classe ChatFormConfiguration vous permet de définir les exigences pour chaque champ du formulaire. Chaque champ a trois états possibles :

État	Description
.required	L'utilisateur doit remplir le champ pour continuer
.optional	L'utilisateur peut ignorer le champ
.hidden	Le champ n'est pas affiché

Voici comment configurer un formulaire pré-chat avec le nom et le service obligatoires, l'e-mail facultatif et le téléphone masqué :

let formConfiguration = ChatFormConfiguration(
    name: .required,
    email: .optional,
    phoneNumber: .hidden,
    department: .required
)

let chatConfiguration = ChatConfiguration()
chatConfiguration.isPreChatFormEnabled = true
chatConfiguration.preChatFormConfiguration = formConfiguration

Pour Objective-C :

ZDKChatFormConfiguration *formConfiguration = [[ZDKChatFormConfiguration alloc]
    initWithName:ZDKFormFieldStatusRequired
    email:ZDKFormFieldStatusOptional
    phoneNumber:ZDKFormFieldStatusHidden
    department:ZDKFormFieldStatusRequired];

ZDKChatConfiguration *chatConfiguration = [[ZDKChatConfiguration alloc] init];
chatConfiguration.isPreChatFormEnabled = YES;
chatConfiguration.preChatFormConfiguration = formConfiguration;

Drapeaux de configuration clés

La classe ChatConfiguration comprend plusieurs drapeaux utiles :

Drapeau	Par défaut	Description
isPreChatFormEnabled	true	Active ou désactive l'ensemble du formulaire
isAgentAvailabilityEnabled	true	Affiche un message quand aucun agent n'est en ligne
isOfflineFormEnabled	true	Permet aux visiteurs de laisser un message en mode hors ligne
isChatTranscriptPromptEnabled	true	Propose l'envoi de la transcription par e-mail à la fin du chat

Pré-remplissage des infos utilisateur avec ChatAPIConfiguration

Si vous définissez les propriétés visitorInfo sur Chat.instance.configuration, les champs de formulaire correspondants sont automatiquement masqués :

Chat.instance?.configuration.visitorInfo = VisitorInfo(
    name: "Jean Dupont",
    email: "jean@example.com",
    phoneNumber: "0123456789"
)

Lorsque toutes les propriétés visitorInfo sont renseignées, le formulaire pré-chat est entièrement ignoré. L'utilisateur peut commencer à chatter immédiatement.

Dépannage des problèmes courants du formulaire pré-chat Zendesk

Même avec une configuration correcte, plusieurs problèmes surviennent fréquemment. Voici les solutions.

Le menu déroulant des services ne s'affiche pas

Cause : Tous les agents de ce service sont hors ligne.

Fix : Assurez-vous qu'au moins un agent est en ligne pour chaque service que vous souhaitez afficher. Alternativement, utilisez departments.enabled dans vos paramètres JavaScript avec des noms de services valides. Si vous effectuez des tests, réglez votre statut sur « En ligne » dans le tableau de bord Chat.

Le departmentLabel personnalisé ne s'applique pas

Cause : La propriété est placée au mauvais niveau d'imbrication.

Fix : Déplacez departmentLabel À L'INTÉRIEUR de l'objet prechatForm, et non au niveau chat :

// MAUVAIS - ne fonctionnera pas
chat: {
  departmentLabel: { '*': 'Sélectionner' }
}

// CORRECT
chat: {
  prechatForm: {
    departmentLabel: { '*': 'Sélectionnez votre équipe' }
  }
}

Cette structure imbriquée est une source courante de confusion dans l'API Zendesk.

Les paramètres ne s'appliquent pas du tout

Cause : L'objet zESettings est placé après le script du widget.

Fix : Assurez-vous que window.zESettings apparaît AVANT l'extrait du widget Zendesk dans votre HTML :

<!-- Paramètres en PREMIER -->
<script>
  window.zESettings = {
    webWidget: {
      chat: {
        prechatForm: {
          greeting: { '*': 'Bonjour !' }
        }
      }
    }
  };
</script>

<!-- Script du widget en SECOND -->
<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=VOTRE_CLE"></script>

Formulaire ignoré lors des déclencheurs proactifs

Cause : Les déclencheurs de chat proactifs sont conçus pour démarrer des conversations sans exiger le formulaire pré-chat.

Fix : C'est un comportement attendu, pas un bug. Si vous avez besoin d'informations sur le visiteur lorsque des déclencheurs proactifs se déclenchent, utilisez l'API identify pour capturer les données après le début du chat :

zE('webWidget:on', 'chat:start', function() {
  // Demander des informations après le début du chat
});

Le widget affiche la mauvaise langue

Cause : Le widget utilise par défaut le paramètre de langue du navigateur.

Fix : Forcez une langue spécifique avec la commande setLocale :

zE('webWidget', 'setLocale', 'fr');

Cela remplace la détection du navigateur et affiche le widget dans la langue spécifiée.

Simplifiez la configuration du chat Zendesk avec eesel AI

La configuration des formulaires pré-chat Zendesk implique de naviguer dans les paramètres d'administration, d'écrire du JavaScript et potentiellement de modifier le code de l'application mobile. Pour les équipes sans ressources de développement dédiées, cette complexité peut ralentir le déploiement.

eesel AI propose une approche différente. Au lieu de configurer des formulaires statiques, vous déployez un agent IA qui :

• Apprend de vos données Zendesk : Anciens tickets, macros, articles du centre d'aide.
• Recueille le contexte de manière conversationnelle : Pas de champs de formulaire rigides, juste une conversation naturelle.
• Route intelligemment : Détermine le bon service en fonction du contenu de la conversation.
• Gère les tickets de manière autonome : Résout les problèmes courants sans intervention humaine.

La configuration prend quelques minutes plutôt que des heures. Connectez votre compte Zendesk, entraînez-le sur vos connaissances existantes et déployez-le. Vous pouvez commencer par laisser l'IA rédiger des réponses que les agents réviseront, puis passer à une gestion autonome à mesure que la confiance grandit.

Pour les équipes utilisant déjà Zendesk, eesel AI fonctionne parallèlement à votre configuration existante. Vous n'avez rien à remplacer, ajoutez simplement une couche intelligente qui gère les conversations de routine.

Les tarifs commencent à 299 $/mois pour le plan Team, qui comprend 1 000 interactions IA. Consultez notre guide des meilleurs chatbots IA pour Zendesk pour une comparaison détaillée des options.

Prêt à simplifier la configuration de votre chat ? Commencez un essai gratuit et voyez comment eesel AI peut réduire la complexité de la configuration tout en améliorant les temps de réponse des clients.

---

Foire aux questions

Q1 : Puis-je personnaliser le formulaire pré-chat Zendesk sans écrire de code ?

R1 : Oui. Le tableau de bord d'administration Zendesk vous permet de configurer les options de base du formulaire pré-chat, notamment le message d'accueil, les champs du profil visiteur (nom et e-mail), la collecte du numéro de téléphone et les libellés du menu déroulant des services. Pour une personnalisation plus avancée du formulaire pré-chat Zendesk, comme le filtrage des services ou le pré-remplissage des données visiteur, vous aurez besoin de l'API JavaScript.

Q2 : Pourquoi la personnalisation de mon formulaire pré-chat Zendesk ne s'applique-t-elle pas après avoir ajouté le code zESettings ?

R2 : La cause la plus fréquente est le placement de l'objet zESettings après le chargement du script du widget. Pour que la personnalisation du formulaire pré-chat Zendesk fonctionne, vos paramètres doivent apparaître AVANT l'extrait du widget dans votre HTML. Vérifiez également que les propriétés telles que departmentLabel sont imbriquées dans l'objet prechatForm, et non au niveau du chat.

Q3 : Comment personnaliser le formulaire pré-chat Zendesk pour n'afficher que certains services ?

R3 : Utilisez la propriété departments.enabled de l'API JavaScript pour mettre sur liste blanche des services spécifiques. Par exemple, définir enabled: ['Ventes', 'Support'] n'affichera que ces deux options dans le menu déroulant. Les noms des services doivent correspondre exactement (sensible à la casse) pour que cette personnalisation du formulaire pré-chat Zendesk fonctionne.

Q4 : Existe-t-il une alternative plus simple à la personnalisation du formulaire pré-chat Zendesk pour recueillir les informations des visiteurs ?

R4 : Oui. Les solutions de chat basées sur l'IA comme eesel AI recueillent le contexte du visiteur de manière conversationnelle plutôt que via des formulaires statiques. Au lieu de configurer des champs de formulaire et du JavaScript, l'IA engage les visiteurs naturellement et extrait les informations nécessaires. Cela élimine le besoin d'une personnalisation complexe du formulaire pré-chat Zendesk tout en capturant les noms, les e-mails et les besoins de routage.

Q5 : Comment configurer la personnalisation du formulaire pré-chat Zendesk pour les applications mobiles ?

R5 : Pour les applications iOS, utilisez la classe ChatFormConfiguration pour définir les exigences des champs (.required, .optional ou .hidden) et la classe ChatConfiguration pour activer ou désactiver le formulaire. Si vous pré-remplissez les propriétés visitorInfo, les champs de formulaire correspondants sont automatiquement masqués. C'est l'approche native de la personnalisation du formulaire pré-chat Zendesk sur mobile.

Q6 : Pourquoi le menu déroulant des services disparaît-il de mon formulaire pré-chat Zendesk ?

R6 : Le menu déroulant des services n'apparaît que lorsqu'au moins un agent est en ligne pour ce service. Si tous les agents sont hors ligne, Zendesk masque le menu déroulant. Une autre cause est l'utilisation de noms de services invalides dans votre tableau JavaScript departments.enabled. Vérifiez que les noms des services correspondent exactement à ce qui est configuré dans vos paramètres Zendesk Chat pour une personnalisation correcte du formulaire pré-chat.

Q7 : Puis-je pré-remplir le formulaire pré-chat Zendesk avec des données client que je possède déjà ?

R7 : Oui. Utilisez la commande identify pour définir le nom et l'e-mail, ou la commande prefill pour plus de contrôle, y compris les champs en lecture seule. Pour les applications mobiles, définissez les propriétés visitorInfo sur la configuration du chat. Lorsque tous les champs sont pré-remplis, la personnalisation du formulaire pré-chat Zendesk peut même permettre d'ignorer entièrement le formulaire et de commencer le chat immédiatement.