Ajoutez Socialjuice à React ou Next.js

Commencez avec votre propre extrait

Créez et enregistrez le widget dans les widgets du site Web ou copiez l'extrait de formulaire de collecte à partir des Formulaires d’avis. Conservez chaque URL, paramètre de requête, ID d'espace, ID de widget et filtre. Un exemple d’identifiant provenant d’un autre site affichera le contenu de quelqu’un d’autre.

Construire le composant

1. Placez l'iframe dans un composant à l'emplacement prévu. Convertissez les attributs HTML en équivalents React, tels que className et allowFullScreen. Donnez à l'iframe un titre descriptif.
2. Conservez l'initialisation du navigateur uniquement sur le client. Dans Next.js, suivez les conventions de composant client et de script de votre projet.
3. Si l'extrait fourni utilise un assistant de redimensionnement, chargez ce script externe une fois. Initialisez uniquement après que l'iframe d'assistance et la cible existent.
4. Nettoyez les gestionnaires de redimensionnement lorsque le composant est démonté et évitez les ID en double ou l'initialisation lors de la navigation entre les itinéraires.
5. Gardez le cadre réactif à l'intérieur de son parent. Pour un formulaire de collecte, conservez les autorisations de caméra et de microphone fournies et utilisez HTTPS.

Vérifier la navigation et le mobile

Testez le chargement initial de la page et la navigation aller-retour. Vérifiez que l'iframe n'est pas initialisée deux fois et que la page ne défile pas horizontalement. Un formulaire de collecte doit également comporter un lien d'ouverture normal dans un nouvel onglet pour les navigateurs qui bloquent l'enregistrement intégré.

Utilisez les instructions d'intégration de l'agent dans le tableau de bord et choisissez React / Next.js pour un transfert contenant l'extrait exact. N'installez pas de scripts de données structurées à l'intérieur de l'iframe ; ceux-ci appartiennent à la page hôte.