Pour les SPA

L'intégration du snippet JavaScript SEATEXT AI dans votre application monopage (SPA) consiste à incorporer le code fourni à votre projet. Ce guide détaille les étapes nécessaires pour ajouter cet extrait de code, en assurant une intégration fluide avec divers frameworks SPA tels que React, Vue et Angular.

Snippet SEATEXT AI

Voici le snippet SEATEXT AI à 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 du fichier JavaScript/TypeScript principal où votre framework monte l'application. Ajouter le snippet : insérez le snippet SEATEXT AI dans la balise body de votre fichier index.html, ou dans la section d'initialisation équivalente de votre framework SPA.

Instructions pour frameworks SPA spécifiques

1. React

In a React application, the entry point is usually the public/index.html file. Locate index.html: Find the public/index.html file in your React 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>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

In a Vue.js application, the entry point is typically the public/index.html file. Locate index.html: Find the public/index.html file in your Vue 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>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 snippet inclut l'attribut async pour la balise script, garantissant que le script SEATEXT AI se charge de manière asynchrone, ce qui préserve les performances de chargement de la page. Utilisation du stockage local : le script stocke un identifiant dans le local storage. Assurez-vous que votre application dispose des autorisations nécessaires pour accéder au stockage local et l'utiliser. Considérations cross-origin : si votre SPA interagit avec plusieurs domaines, vérifiez que le script SEATEXT AI est compatible et ne rencontre pas de problèmes cross-origin.

Test de l'intégration

Après avoir ajouté le snippet, suivez ces étapes pour vérifier l'intégration : Compiler et servir : compilez et servez votre application avec les commandes standard de votre framework (npm start, npm run serve ou ng serve). Inspecter la page : ouvrez les outils de développement du navigateur (F12) et consultez les onglets Console et Réseau pour vérifier que le script SEATEXT AI se charge sans erreur. Vérification fonctionnelle : assurez-vous que les fonctionnalités SEATEXT AI opèrent comme prévu dans votre SPA.

Conclusion

En suivant ce guide étape par étape, vous pouvez intégrer de manière transparente le snippet JavaScript SEATEXT AI dans votre application monopage. Si vous rencontrez des difficultés ou avez besoin d'une assistance supplémentaire, n'hésitez pas à contacter le support.