Ajouter le code à votre site web
Cela fonctionne sur n'importe quel site, y compris Wix, Squarespace, Webflow ou un site HTML sur mesure.
Étape 1: Copiez le code de votre widget
Dans le tableau de bord, allez dans "Paramètres" → "Installation" et cliquez sur le bouton de copie à côté de "Code d'intégration". Vous trouverez le même code sur "Vue d'ensemble" et dans "Intégrations" → "Autre site web".
Étape 2: Collez le code avant </body>
Collez le code sur chaque page, juste avant la balise </body>, ou dans le champ de code personnalisé ou de scripts de pied de page de votre outil de création de site.
Étape 3: Vérifiez votre site web
Ouvrez votre site dans une nouvelle fenêtre. Le bouton de chat apparaît dans le coin inférieur. Envoyez un message de test ; la conversation s'affiche dans votre "Boîte partagée".
Le code est masqué avec un avis indiquant que le code du widget est suspendu ? Il manque alors encore l'accord de traitement des données. Acceptez-le dans votre compte sur twilper.com.
WordPress et WooCommerce
Étape 1: Installez depuis WordPress.org
Dans WordPress, allez dans Extensions → Ajouter une extension, recherchez "TwilperChat", cliquez sur Installer maintenant, puis sur Activer.
Étape 2: Ou téléversez le fichier zip
Impossible d'installer des extensions depuis WordPress.org ? Téléchargez le "plugin WordPress TwilperChat (.zip)" dans "Intégrations" → "WordPress" et téléversez-le via Extensions → Ajouter une extension → Téléverser une extension. Activez ensuite l'extension.
Étape 3: Saisissez la clé de votre widget
Dans WordPress, allez dans Réglages → TwilperChat → Connexion. Collez la clé affichée avec les étapes WordPress dans le tableau de bord, enregistrez la connexion puis testez-la.
Étape 4: Facultatif : synchronisez pages et produits
Vous voulez que l'IA connaisse vos pages, vos articles et vos produits WooCommerce ? Créez une clé de synchronisation dans le tableau de bord, sous "Intégrations" ("Clé de synchronisation pour le plugin WordPress"), et collez-la dans le plugin. La clé ne s'affiche qu'une seule fois.
Shopify
Étape 1: Ouvrez la fiche Shopify
Allez dans "Intégrations", choisissez Shopify et cliquez sur "Ouvrir la fiche Shopify".
Étape 2: Installez l'application
Terminez l'installation dans Shopify. Le widget est activé dans votre thème actif ; vérifiez-le dans votre boutique.
Étape 3: Vérifiez la synchronisation
Vérifiez dans Twilper que la synchronisation des produits est terminée, pour que l'IA puisse répondre aux questions sur vos produits.
Le bouton indique "Les nouvelles installations Shopify sont suspendues" ? Vous pouvez alors, en attendant, ajouter vous-même le code du widget à votre thème, ou synchroniser les produits manuellement avec l'adresse de votre boutique (maboutique.myshopify.com).
Mon widget a-t-il été détecté ?
La première fois que le widget se charge sur votre site, Twilper enregistre ce domaine pour votre licence. L'étape "Installer le widget" de la liste sur "Vue d'ensemble" passe alors au vert.
- Pas encore vert ? Ouvrez votre site, actualisez la page et vérifiez que le bouton de chat apparaît.
- Assurez-vous que le code se trouve sur le site publié, et pas seulement dans un brouillon ou un aperçu.
- Votre licence fixe le nombre de domaines sur lesquels le widget peut fonctionner. Si un nouveau domaine est refusé, désactivez-en un ancien ou choisissez une offre supérieure.
Couleurs, nom et message de bienvenue
Dans "Personnalisation du widget", vous décidez de l'apparence et du comportement du widget. Vos modifications s'affichent immédiatement dans l'"Aperçu en direct".
Étape 1: Nom et apparence
Saisissez le "Nom du bot" et, si vous le souhaitez, un avatar. Sous "Couleurs", choisissez votre "Couleur principale" et les couleurs des bulles, ou cliquez sur "Style Twilper".
Étape 2: Texte et ton
Sous "Texte et ton", rédigez votre "Message de bienvenue" et votre "Texte indicatif", puis choisissez un ton formel ou informel. Sous "Textes par langue", vous définissez ces mêmes textes en anglais, allemand, français et espagnol.
Étape 3: Comportement
Sous "Comportement", choisissez la "Position" (en bas à droite ou en bas à gauche) et la taille du bouton. Activez éventuellement les "Questions suggérées", un "Message proactif" ou la "Capture de prospects".
Étape 4: Enregistrez
Cliquez sur "Enregistrer". Le widget de votre site prend en compte les modifications.
Bon à savoir
- Le widget utilise automatiquement la langue de votre visiteur, en fonction de la page et du message.
- Ajoutez le code une seule fois par page ; un code en double peut afficher deux boutons de chat.
- Le CSS personnalisé n'est disponible qu'avec l'offre Business.
- Avec "Afficher les sources citées", les visiteurs voient sur quelle page s'appuie une réponse.