Le formulaire de contact Netcoder s'ajoute à n'importe quel site Web avec quelques lignes de HTML. Vos visiteurs écrivent, et votre agent IA leur répond par courriel en quelques minutes.
1. Installation
Ajoutez un élément vide là où le formulaire doit paraître, et la balise de script suivante juste avant
la balise </body> de la page. Remplacez les valeurs d'exemple par vos clés.
<div id="nc-form"></div>
<script src="https://cdn.netcoder.com/form.v1.js"
data-backend-url="https://chatrelay.netcoder.ca/webform"
data-client-key="YOUR-CLIENT-GUID"
data-agent-key="YOUR-AGENT-GUID"
data-language="fr"
data-container="#nc-form"></script>Le plus simple est de le prendre dans l'application Netcoder : ouvrez votre agent IA, puis Tester et déployer, et l'icône de code de Tester le formulaire. Le code y est donné avec vos clés, prêt à copier.
Votre agent IA doit avoir un canal Web Form, et un canal de courriel d'où répondre : les deux sont mis en place avec Netcoder.
2. Paramètres
À placer sur la balise de script.
| Attribut | Obligatoire | Description | Par défaut |
|---|---|---|---|
data-backend-url | Oui | Adresse du relais Netcoder : https://chatrelay.netcoder.ca/webform | |
data-client-key | Oui | Votre clé client | |
data-agent-key | Oui | La clé de votre agent IA | |
data-language | en ou fr : les libellés du formulaire | en | |
data-phone | visible, required (obligatoire) ou hidden (masqué) | visible | |
data-company | visible, required (obligatoire) ou hidden (masqué) | visible | |
data-title | Titre au-dessus du formulaire | ||
data-container | Sélecteur CSS de l'élément où dessiner le formulaire | Avant le script | |
data-accent-color | Couleur du bouton | #D97955 | |
data-accent-text-color | Couleur du texte du bouton | #FFFFFF |
3. Comment ça fonctionne
- Le visiteur donne son nom, son courriel et un message ; le téléphone et l'entreprise sont
facultatifs, obligatoires ou non demandés, selon
data-phoneetdata-company. - Le formulaire est transmis à Netcoder dès qu'il est envoyé, et le visiteur est remercié aussitôt.
- Votre agent IA répond par courriel, habituellement en quelques minutes, dans la langue du visiteur.
- Un agent dont le rôle est de vendre ajoute aussi le visiteur à vos contacts.
- Un deuxième message de la même adresse courriel poursuit la même conversation.
4. Personnaliser en CSS
Au-delà des couleurs du bouton, personnalisez le formulaire depuis votre propre feuille de style.
Commencez vos sélecteurs par body pour l'emporter, plutôt que d'utiliser
!important.
body .ncf-primary { padding: 12px 28px; }| Sélecteur | Ce que c'est |
|---|---|
.ncf | Le formulaire |
.ncf-title | Le titre |
.ncf-field | Un libellé et son champ |
.ncf-primary | Le bouton d'envoi |
.ncf-status | Les messages sous le bouton |
5. Essais et dépannage
- Essayez avant d'installer — Tester le formulaire, sous Tester et déployer dans l'application, envoie un vrai message : vous recevez la réponse de l'agent par courriel.
- « Configuration invalide » — une clé manque ou est mal formée. Copiez le code depuis l'application.
- Pas de réponse par courriel — vérifiez vos courriels indésirables, puis que l'agent a un canal de courriel.
- Tous les domaines fonctionnent — rien n'est à configurer sur votre serveur.
Besoin d'aide ? Prenez rendez-vous ou écrivez-nous.