Voor SPAs

Het integreren van de SEATEXT AI JavaScript‑snippet in uw Single Page Application (SPA) houdt in dat u de meegeleverde code in uw project opneemt. Deze gids behandelt de benodigde stappen om deze code‑snippet toe te voegen, zodat deze soepel integreert met verschillende SPA‑frameworks as React, Vue en Angular.

SEATEXT AI‑snippet

Hier is de SEATEXT AI‑snippet die u moet invoegen:

SEATEXTCODEINTEGRATION

Algemene instructies

Identificeer het instappunt: bepaal waar uw SPA wordt geïnitialiseerd. Dit gebeurt meestal in een index.html‑bestand of een hoofd‑JavaScript/TypeScript‑bestand waarin uw framework de applicatie mount. Voeg de snippet toe: plaats de SEATEXT AI‑snippet binnen de body‑tag van uw index.html‑bestand, of in de overeenkomstige initialisatiesectie van uw SPA‑framework.

Instructions for Specific SPA Frameworks

1. React

In een React‑applicatie is het instappunt meestal het bestand public/index.html. Zoek index.html: vind het bestand public/index.html in uw React‑project. Voeg de snippet toe: plaats de SEATEXT AI‑snippet net vóór de afsluitende </body>-tag.

Example

<!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 een Vue.js‑applicatie is het instappunt doorgaans het bestand public/index.html. Zoek index.html: vind het bestand public/index.html in uw Vue‑project. Voeg de snippet toe: plaats de SEATEXT AI‑snippet net vóór de afsluitende </body>-tag.

Example

<!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 een Angular‑applicatie is het instappunt meestal het bestand src/index.html. Zoek index.html: vind het bestand src/index.html in uw Angular‑project. Voeg de snippet toe: plaats de SEATEXT AI‑snippet net vóór de afsluitende </body>-tag.

Example

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

Aanvullende overwegingen

Aanvullende ConsiderationsAsynchronous Loading: de snippet bevat het async‑attribuut voor de script‑tag, waardoor het SEATEXT AI‑script asynchroon laadt, wat helpt de paginaprestaties te behouden. Local Storage Usage: het script slaat een ID op in de lokale opslag. Zorg ervoor dat uw applicatie de benodigde permissies heeft om lokale opslag te gebruiken. Cross-Origin Considerations: als uw SPA met meerdere domeinen communiceert, zorg dan dat het SEATEXT AI‑script compatibel is en geen cross‑origin problemen ondervindt.

De integratie testen

Nadat u de snippet heeft toegevoegd, volgt u deze stappen om een correcte integratie te garanderen: Build en serve: bouw en serveer uw applicatie met de standaardcommando’s voor uw framework (npm start, npm run serve of ng serve). Inspecteer de pagina: open de ontwikkelaarstools van uw browser (F12) en controleer de Console‑ en Netwerk‑tabbladen om te verifiëren dat het SEATEXT AI‑script zonder fouten laadt. Functionaliteitscontrole: zorg dat de SEATEXT AI‑functies naar verwachting werken as binnen uw SPA.

Conclusie

Door deze stapsgewijze gids te volgen, kunt u de SEATEXT AI JavaScript‑snippet naadloos integreren in uw Single Page Application. Mocht u problemen ondervinden of verdere hulp nodig hebben, neem dan contact op voor ondersteuning.