Ajouter une bulle vidéo à un site React ou Vue

Comment installer CompleteGreet sur un site React ou Vue ?

Le principe est simple : l’ajout d’un widget de bulle vidéo à React ou Vue passe par le code d’intégration fourni dans votre compte CompleteGreet. Le widget se charge séparément de l’arbre de composants. Vérifiez néanmoins la méthode actuelle dans votre tableau de bord, car elle peut dépendre du produit et du projet.

Voici les étapes à suivre :

1. Connectez-vous à votre tableau de bord CompleteGreet, puis ouvrez la section d’installation disponible dans la navigation actuelle.
2. Choisissez la plateforme de votre site. Pour un projet React ou Vue personnalisé, utilisez l’option correspondant au HTML personnalisé si elle est proposée.
3. Copiez l’intégralité du code associé à votre site. Il contient l’identifiant qui relie le widget à votre compte.
4. Ouvrez le fichier HTML principal ou le composant de mise en page racine, placez le code à l’endroit indiqué par les instructions actuelles, puis enregistrez.
5. Lancez le serveur de développement et ouvrez une page concernée. La bulle devrait apparaître à l’emplacement configuré.

Si elle n’apparaît pas, vérifiez d’abord le domaine autorisé, la console, le cache et les règles d’affichage avant de modifier l’intégration.

Et avec Next.js ou Nuxt ?

Avec Next.js ou Nuxt, le rendu côté serveur demande une précaution supplémentaire. Le widget doit être initialisé dans le navigateur, pas pendant le rendu serveur.

Dans Next.js, utilisez la méthode de chargement de script recommandée pour votre version et votre architecture. Le composant Script peut convenir, mais choisissez sa stratégie après avoir mesuré son effet sur la page et vérifié l’hydratation.

Dans Nuxt, une extension réservée au client peut empêcher l’exécution du code pendant le rendu serveur. Le nom du fichier et sa déclaration dépendent de la version de Nuxt. Suivez la documentation actuelle du projet pour éviter les erreurs liées à l’objet window.

Après le chargement, le comportement dépend des règles définies dans CompleteGreet et de votre routeur. Vérifiez chaque changement de route au lieu de supposer que le widget persiste ou se recharge correctement.

Que peut-on personnaliser avec React ou Vue ?

Ciblage des pages et des visiteurs

Les règles d’URL peuvent limiter la bulle à certaines routes, par exemple la page des tarifs ou une démonstration. D’autres critères peuvent exister selon la configuration actuelle. N’utilisez que ceux que vous pouvez vérifier.

Les règles se règlent normalement dans le tableau de bord plutôt que dans le code du site. L’équipe peut ainsi ajuster la visibilité sans modifier l’application, sous réserve des droits et fonctions disponibles.

Actions des boutons et comportement au clic

Le bouton de la bulle peut conduire vers une URL, un calendrier ou une autre action prise en charge. Choisissez une action claire, puis testez-la de bout en bout.

Une intégration React ou Vue peut aussi écouter des événements si l’API actuelle le permet. Vérifiez les méthodes disponibles et évitez de coupler inutilement le widget à l’état principal de l’application.

Champs de formulaire et acheminement des prospects

Un formulaire court peut être proposé au visiteur si cette fonction est disponible. Limitez les champs aux informations utiles et expliquez clairement la finalité de la collecte.

Les données peuvent être enregistrées dans le tableau de bord ou transmises à une destination configurée. Vérifiez les webhooks, le CRM, les notifications et le consentement avec des données de test.

Identité visuelle et positionnement

Adaptez les couleurs, l’image et la position avec les réglages réellement disponibles. Testez les coins inférieurs ainsi que toute position personnalisée face aux menus, chats, paniers et bannières de cookies.

Parmi les meilleurs widgets vidéo pour les applications modernes, le bon choix dépend surtout du contrôle visuel, des règles d’affichage, des performances et de la compatibilité avec votre projet.

Code d’installation fourni par CompleteGreet

Intégration CompleteGreet fournie dans votre tableau de bord

Configuration avec l’identifiant de votre site

See the static HTML data above for the full breakdown.

Que faut-il vérifier avant la mise en ligne ?

Avant la publication, testez la bulle vidéo sur de vrais appareils. Un simple redimensionnement du navigateur ne reproduit pas toujours le comportement d’iOS Safari, de Chrome mobile ou des éléments flottants de votre interface.

Mesurez les Core Web Vitals avant et après l’installation. Le widget ne devrait pas dégrader sensiblement le LCP, le CLS ou la réactivité de la page. Les recommandations de Google sur les Web Vitals aident à interpréter les mesures actuelles. Utilisez vos propres données et corrigez tout décalage de mise en page observé au chargement.

Contrôlez le ciblage sur chaque route. Avec React et Vue, le widget peut persister ou être réinitialisé lors de la navigation selon l’emplacement du code et le routeur utilisé.

Vérifiez que l’accueil apparaît uniquement sur les URL prévues et qu’il reste absent du paiement, des espaces privés et des pages où il gênerait une tâche.

Pensez aussi à la consommation de données sur mobile.

Évitez de lancer une vidéo lourde sans action du visiteur. Une miniature claire et un bouton de lecture donnent davantage de contrôle et limitent les téléchargements inutiles.

Les conflits d’empilement sont fréquents sur les sites réels. Ouvrez le menu mobile, le panier, les fenêtres modales et la bannière de consentement pour vérifier que la bulle ne masque rien et ne disparaît pas derrière un autre élément.

Parcourez enfin tout le chemin en tant que visiteur déconnecté. Effacez les données de test, puis allez de la page d’arrivée jusqu’à l’action principale. La bulle vidéo doit accompagner le parcours sans interrompre une étape importante.

Exemple de script CompleteGreet avec l’identifiant de votre site

Questions fréquentes

Comment ajouter CompleteGreet à React sans alourdir inutilement le bundle ?

Utilisez la méthode d’intégration recommandée dans votre compte et chargez le code séparément de votre bundle principal lorsque c’est prévu. Mesurez tout de même le poids réseau, l’exécution et le rendu sur votre application.

Pourquoi la bulle CompleteGreet n’apparaît-elle pas pendant le développement local ?

Commencez par vérifier que l’adresse locale et son port sont autorisés dans les réglages du site. Contrôlez ensuite les règles d’URL, le consentement, la console, les bloqueurs et le cache.

CompleteGreet ralentit-il une application React ?

L’effet dépend de la vidéo, du mode de chargement, du réseau et de l’application. Comparez les Core Web Vitals et les requêtes avant et après l’installation au lieu de vous fier à une promesse générale.

Peut-on afficher des vidéos différentes selon les routes de React Router ?

Les règles de page ou l’API actuelle peuvent permettre d’adapter le contenu selon l’URL. Configurez les campagnes disponibles, puis testez chaque route et chaque retour en arrière dans le navigateur.

CompleteGreet fonctionne-t-il avec les frameworks React rendus côté serveur comme Next.js ?

Une intégration côté client peut fonctionner avec Next.js et d’autres environnements SSR. Utilisez la méthode recommandée pour votre version et empêchez le code dépendant du navigateur de s’exécuter pendant le rendu serveur.

Quel forfait choisir pour une application SaaS React avec 10 000 visiteurs mensuels ?

Consultez les tarifs actuels et la définition des visiteurs avant de choisir. Vérifiez aussi les seuils, les dépassements, le nombre de sites et les fonctions incluses, car ces éléments peuvent évoluer.