Installer le widget¶

Ce guide explique comment ajouter le widget de chat Voxum à votre site web. Le processus consiste à copier un petit morceau de code et à le coller dans votre site web.

Allez à Widget dans le menu de gauche
Faites défiler jusqu'à la section Code d'intégration
Vous verrez un code qui ressemble à ceci :

<script src="https://app.voxum.ai/widget.js"
        data-property="your-property-id">
</script>

Cliquez sur Copier dans le presse-papiers

Installation par plateforme¶

Choisissez votre plateforme de site web ci-dessous pour des instructions spécifiques.

WordPress¶

Méthode éditeur de thèmeMéthode extension (Recommandée)

Allez à Apparence → Éditeur de thème dans l'admin WordPress
Sélectionnez votre thème actif
Trouvez et cliquez sur footer.php
Collez le code du widget juste avant </body>
Cliquez sur Mettre à jour le fichier

Installez l'extension « Insert Headers and Footers » (ou similaire)
Allez à Réglages → Insert Headers and Footers
Collez le code du widget dans la section Pied de page
Cliquez sur Enregistrer

Pourquoi utiliser une extension ?

Utiliser une extension garde votre code en sécurité quand vous mettez à jour votre thème.

Shopify¶

Allez à Boutique en ligne → Thèmes
Cliquez sur Actions → Modifier le code sur votre thème actuel
Dans le dossier Layout, cliquez sur theme.liquid
Trouvez </body> près du bas
Collez le code du widget juste avant </body>
Cliquez sur Enregistrer

Squarespace¶

Allez à Paramètres → Avancé → Injection de code
Collez le code du widget dans la section Pied de page
Cliquez sur Enregistrer

Note

L'injection de code nécessite un forfait Squarespace Business ou supérieur.

Wix¶

Allez à votre éditeur Wix
Cliquez sur Ajouter (+) → Intégrer → Intégrations personnalisées → Intégrer un widget
Cliquez sur Entrer le code
Collez le code du widget
Positionnez le widget (il apparaîtra dans le coin quoi qu'il en soit)
Cliquez sur Appliquer

Alternativement :

Allez à Paramètres → Code personnalisé
Cliquez sur + Ajouter du code personnalisé
Collez le code
Définissez l'emplacement sur Corps - fin
Appliquez à Toutes les pages
Cliquez sur Appliquer

Webflow¶

Allez à Paramètres du projet → Code personnalisé
Collez le code du widget dans la section Code du pied de page
Cliquez sur Enregistrer les modifications
Publiez votre site

HTML personnalisé / Autres plateformes¶

Pour toute plateforme qui vous permet de modifier le HTML :

Trouvez votre modèle HTML principal ou fichier de pied de page
Localisez la balise fermante </body>
Collez le code du widget immédiatement avant </body>
Enregistrez et publiez

Exemple de placement :

    <!-- Votre contenu de page au-dessus -->

    <script src="https://app.voxum.ai/widget.js"
            data-property="your-property-id">
    </script>
</body>
</html>

Vérifier l'installation¶

Après avoir ajouté le code :

Visitez votre site web dans un nouvel onglet de navigateur
Cherchez la bulle de chat dans le coin inférieur droit
Cliquez dessus pour ouvrir le chat
Tapez un message de test
Vérifiez que vous recevez une réponse

Par défaut, le widget apparaît sur toutes les pages. Pour l'afficher uniquement sur certaines pages :

WordPress avec extension¶

Utilisez une extension comme « Widget Logic » ou configurez votre extension d'en-tête/pied de page pour afficher le code uniquement sur des pages spécifiques.

Code conditionnel (Avancé)¶

Enveloppez le code du widget dans une condition basée sur le langage de template de votre plateforme :

Exemple WordPress :

<?php if (is_page('contact') || is_page('tarifs')): ?>
<script src="https://app.voxum.ai/widget.js"
        data-property="your-property-id">
</script>
<?php endif; ?>

Pages spécifiques seulement¶

Si vous pouvez modifier des pages individuelles, ajoutez le code du widget uniquement aux sections de code personnalisé de ces pages.

Dépannage¶

Vérifiez ces éléments :

Placement du code - Est-il avant </body> ?
Publié - Avez-vous enregistré et publié vos modifications ?
Cache - Essayez de vider le cache de votre navigateur
Bloqueurs de publicités - Désactivez temporairement les bloqueurs de publicités
Erreurs console - Vérifiez les outils de développement du navigateur pour les erreurs

ID de propriété - Vérifiez que votre ID de propriété est correct
Domaine - Assurez-vous que votre domaine est enregistré dans Voxum
JavaScript - Vérifiez les erreurs JavaScript dans la console

Le widget est conçu pour apparaître dans le coin inférieur droit. C'est intentionnel et ne peut pas être modifié.

Si le widget couvre du contenu important :

Ajoutez du rembourrage à votre pied de page : padding-bottom: 80px;
Assurez-vous que la zone du widget est libre d'éléments critiques

Plusieurs widgets apparaissent¶

Vous avez peut-être ajouté le code plus d'une fois. Cherchez le code du widget sur votre site et supprimez les doublons.

Besoin d'aide ?¶

Si vous n'êtes pas à l'aise pour modifier le code de votre site web :

Copiez votre code de widget depuis le panneau d'administration
Envoyez-le à votre développeur web ou équipe informatique
Dites-leur : « Veuillez ajouter ce code avant la balise body fermante sur notre site web »

La plupart des développeurs sauront exactement quoi faire avec cette instruction.

Tester sur différents appareils¶

Après l'installation, testez sur :

[ ] Ordinateur de bureau (Chrome, Firefox, Safari)
[ ] Téléphone mobile
[ ] Tablette
[ ] Différentes tailles d'écran

Le widget devrait fonctionner de manière cohérente sur tous les appareils.

Prochaines étapes¶

Personnaliser l'apparence - Faites correspondre le widget à votre marque
Paramètres de comportement - Configurez le comportement du widget
Guide de démarrage rapide - Guide de configuration complet

Installer le widget¶

Obtenir votre code de widget¶