For SPAs

Att integrera Seatext AI:s JavaScript-kodsnutt i din Single Page Application (SPA) innebär att du bäddar in den tillhandahållna koden i ditt projekt. Den här guiden täcker de steg som krävs för att lägga till denna kodsnutt och säkerställa att den integreras smidigt med olika SPA-ramverk som React, Vue och Angular.

Seatext AI-kodsnutt

Här är Seatext AI-kodsnutten du behöver infoga:

SEATEXTCODEINTEGRATION

Allmänna instruktioner

Identify the Entry Point: Determine where your SPA initializes. This is typically in an index.html file or a main JavaScript/TypeScript file where your framework mounts the application. Add the Snippet: Insert the SEATEXT AI snippet within the body tag of your index.html file, or in the equivalent initialization section of your SPA framework.

Instruktioner för specifika SPA-ramverk

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.

Exempel

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

Exempel

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

Exempel

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

Ytterligare överväganden

Additional ConsiderationsAsynchronous Loading: The snippet includes the async attribute for the script tag, ensuring that the SEATEXT AI script loads asynchronously, which helps in maintaining page load performance. Local Storage Usage: The script stores an ID in the local storage. Ensure that your application has the necessary permissions to access and use local storage. Cross-Origin Considerations: If your SPA interacts with multiple domains, ensure that the SEATEXT AI script is compatible and does not face cross-origin issues.

Testa integrationen

After adding the snippet, follow these steps to ensure it integrates correctly: Build and Serve: Build and serve your application using the standard commands for your framework (npm start, npm run serve, or ng serve). Inspect the Page: Open your browser's Developer Tools (F12) and check the Console and Network tabs to verify that the SEATEXT AI script loads without errors. Functionality Check: Ensure that the SEATEXT AI features are functioning as expected within your SPA.

Slutsats

Genom att följa denna steg-för-steg-guide kan du sömlöst integrera Seatext AI:s JavaScript-kodsnutt i din Single Page Application. Om du stöter på några problem eller behöver ytterligare hjälp, kontakta oss för support.