Para SPAs

Integrar el fragmento de JavaScript de SEATEXT AI en tu Single Page Application (SPA) implica incrustar el código proporcionado en tu proyecto. Esta guía cubrirá los pasos necesarios para añadir este fragmento de código, asegurando que se integre sin problemas con varios frameworks de SPA como React, Vue y Angular.

Fragmento de SEATEXT AI

Aquí tienes el fragmento de SEATEXT AI que necesitas insertar:

SEATEXTCODEINTEGRATION

Instrucciones generales

Identifica el punto de entrada: determina dónde se inicializa tu SPA. Normalmente se encuentra en un archivo index.html o en un archivo principal de JavaScript/TypeScript donde tu framework monta la aplicación. Añade el fragmento: inserta el fragmento de SEATEXT AI dentro de la etiqueta body de tu archivo index.html, o en la sección de inicialización equivalente de tu framework SPA.

Instrucciones para frameworks SPA específicos

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.

Ejemplo

<!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.

Ejemplo

<!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.

Ejemplo

<!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>

Consideraciones adicionales

Consideraciones adicionalesCarga asíncrona: el fragmento incluye el atributo async en la etiqueta del script, lo que garantiza que el script de SEATEXT AI se cargue de forma asíncrona y ayuda a mantener el rendimiento de carga de la página. Uso del almacenamiento local: el script guarda un ID en el almacenamiento local. Asegúrate de que tu aplicación tenga los permisos necesarios para acceder y usar el almacenamiento local. Consideraciones de origen cruzado: si tu SPA interactúa con varios dominios, asegúrate de que el script de SEATEXT AI sea compatible y no presente problemas de origen cruzado.

Probar la integración

Después de añadir el fragmento, sigue estos pasos para asegurarte de que se integra correctamente: Compilar y servir: compila y sirve tu aplicación usando los comandos estándar de tu framework (npm start, npm run serve o ng serve). Inspeccionar la página: abre las Herramientas de desarrollador de tu navegador (F12) y revisa las pestañas Consola y Red para verificar que el script de SEATEXT AI se carga sin errores. Comprobación de funcionalidad: asegúrate de que las funciones de SEATEXT AI funcionen como se espera dentro de tu SPA.

Conclusión

Siguiendo esta guía paso a paso, podrás integrar sin problemas el fragmento de JavaScript de SEATEXT AI en tu Single Page Application. Si encuentras algún problema o necesitas más ayuda, no dudes en contactar con soporte.