Pour les SPA

Intégrer le fragment JavaScript SEATEXT AI dans votre application monopage (SPA) implique d'intégrer le code fourni dans votre projet. Ce guide couvrira les étapes nécessaires pour ajouter ce fragment de code, en veillant à ce qu'il s'intègre parfaitement avec les différents frameworks SPA tels que React, Vue et Angular.

SEATEXT AI Snippet

Voici le fragment SEATEXT AI que vous devez insérer :

SEATEXTCODEINTEGRATION

Instructions générales

Identifier le point d'entrée : Déterminez où votre SPA s'initialise. Il s'agit généralement d'un fichier index.html ou d'un fichier JavaScript/TypeScript principal où votre framework monte l'application. Ajouter le fragment : Insérez le fragment SEATEXT AI dans la balise body de votre fichier index.html, ou dans la section d'initialisation équivalente de votre framework SPA.

Instructions pour les frameworks SPA spécifiques

1. React

Dans une application React, le point d'entrée est généralement le fichier public/index.html. Localiser index.html : Trouvez le fichier public/index.html dans votre projet React. Insérer le fragment : Ajoutez le fragment SEATEXT AI juste avant la balise de fermeture </body>.

Exemple

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>React App</title> </head> <body> <div id="root"></div> <script> localStorage.setItem('seatext_id', "96733aab-aaad-4e0e-90ec-5c899e524514"); window.globalSeatextID = "96733aab-aaad-4e0e-90ec-5c899e524514"; </script> <script async src="https://login.seatext.com/seatext.js?id=96733aab-aaad-4e0e-90ec-5c899e524514"></script> </body> </html>

2. Vue.js

Dans une application Vue.js, le point d'entrée est généralement le fichier public/index.html. Localiser index.html : Trouvez le fichier public/index.html dans votre projet Vue. Insérer le fragment : Ajoutez le fragment SEATEXT AI juste avant la balise de fermeture </body>.

Exemple

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue App</title> </head> <body> <div id="app"></div> <script> localStorage.setItem('seatext_id', "96733aab-aaad-4e0e-90ec-5c899e524514"); window.globalSeatextID = "96733aab-aaad-4e0e-90ec-5c899e524514"; </script> <script async src="https://login.seatext.com/seatext.js?id=96733aab-aaad-4e0e-90ec-5c899e524514"></script> </body> </html>

3. Angular

In an Angular application, the entry point is usually the src/index.html file. Locate index.html: Find the src/index.html file in your Angular project. Insert the Snippet: Add the SEATEXT AI snippet just before the closing </body> tag.

Exemple

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Angular App</title> </head> <body> <app-root></app-root> <script> localStorage.setItem('seatext_id', "96733aab-aaad-4e0e-90ec-5c899e524514"); window.globalSeatextID = "96733aab-aaad-4e0e-90ec-5c899e524514"; </script> <script async src="https://login.seatext.com/seatext.js?id=96733aab-aaad-4e0e-90ec-5c899e524514"></script> </body> </html>

Considérations supplémentaires

Considérations supplémentairesChargement asynchrone : Le fragment inclut l'attribut async pour la balise script, garantissant que le script SEATEXT AI se charge de manière asynchrone, ce qui aide à maintenir les performances de chargement de la page. Utilisation du stockage local : Le script stocke un ID dans le stockage local. Assurez-vous que votre application dispose des autorisations nécessaires pour accéder et utiliser le stockage local. Considérations inter-origine : Si votre SPA interagit avec plusieurs domaines, assurez-vous que le script SEATEXT AI est compatible et ne rencontre pas de problèmes de cross‑origin.

Test de l'intégration

Après avoir ajouté le fragment, suivez ces étapes pour vous assurer qu'il s'intègre correctement : Construire et servir : Construisez et servez votre application en utilisant les commandes standard de votre framework (npm start, npm run serve, ou ng serve). Inspecter la page : Ouvrez les outils de développement de votre navigateur (F12) et vérifiez les onglets Console et Réseau pour vous assurer que le script SEATEXT AI se charge sans erreurs. Vérification de la fonctionnalité : Assurez-vous que les fonctionnalités SEATEXT AI fonctionnent comme prévu au sein de votre SPA.

Conclusion

By following this step-by-step guide, you can seamlessly integrate the SEATEXT AI JavaScript snippet into your Single Page Application. If you encounter any issues or need further assistance, please reach out for support.