Per le SPA

Integrare lo snippet JavaScript di SEATEXT AI nella tua Single Page Application (SPA) significa incorporare il codice fornito nel progetto. Questa guida coprirà i passaggi necessari per aggiungere questo snippet, assicurando che si integri armoniosamente con vari framework SPA come React, Vue e Angular.

Snippet SEATEXT AI

Ecco lo snippet SEATEXT AI da inserire:

SEATEXTCODEINTEGRATION

Istruzioni generali

Identifica il punto di ingresso: determina dove si inizializza la tua SPA. Di solito si tratta di un file index.html o di un file JavaScript/TypeScript principale in cui il framework monta l'applicazione. Aggiungi lo snippet: inserisci lo snippet SEATEXT AI all'interno del tag body del file index.html, o nella sezione di inizializzazione equivalente del framework SPA.

Istruzioni per framework SPA specifici

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.

Esempio

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

Esempio

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

Esempio

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

Considerazioni aggiuntive

Considerazioni aggiuntiveCaricamento asincrono: lo snippet include l'attributo async per il tag script, garantendo che lo script SEATEXT AI si carichi in modo asincrono, contribuendo a mantenere le prestazioni di caricamento della pagina. Utilizzo dell'archiviazione locale: lo script memorizza un ID nell'archiviazione locale. Assicurati che la tua applicazione abbia i permessi necessari per accedere e utilizzare l'archiviazione locale. Considerazioni cross-origin: se la tua SPA interagisce con più domini, assicurati che lo script SEATEXT AI sia compatibile e non incontri problemi cross-origin.

Test dell'integrazione

Dopo aver aggiunto lo snippet, segui questi passaggi per garantirne l'integrazione corretta: Build and Serve: compila e servi l'applicazione usando i comandi standard del tuo framework (npm start, npm run serve o ng serve). Ispeziona la pagina: apri gli strumenti di sviluppatore del browser (F12) e controlla le schede Console e Network per verificare che lo script SEATEXT AI si carichi senza errori. Verifica funzionalità: assicurati che le funzioni di SEATEXT AI funzionino come previsto all'interno della tua SPA.

Conclusione

Seguendo questa guida passo passo, puoi integrare senza problemi lo snippet JavaScript SEATEXT AI nella tua Single Page Application. Se incontri problemi o hai bisogno di ulteriore assistenza, contattaci per supporto.