SPA-sovelluksille

SEATEXT AI:n JavaScript-koodinpätkän integroiminen yksisivuisessa sovelluksessa (SPA) sisältää annetun koodin upottamisen projektiisi. Tässä oppaassa käydään läpi vaiheet, joilla lisätään tämä koodinpätkä, varmistettaen, että se integroituu sujuvasti eri SPA-kehyksien, kuten Reactin, Vue:n ja Angularin, kanssa.

SEATEXT AI-koodinpätkä

Tässä on SEATEXT AI-koodinpätkä, jonka sinun on lisättävä:

SEATEXTCODEINTEGRATION

Yleiset ohjeet

Tunnista aloituspiste: Määritä, missä SPA-sovelluksesi alustetaan. Tämä on yleensä index.html-tiedostossa tai pääasiallisessa JavaScript/TypeScript-tiedostossa, johon kehyssovelluksesi latautuu. Lisää koodinpätkä: Aseta SEATEXT AI -koodinpätkä index.html-tiedostosi body-elementin sisään tai vastaavaan SPA-kehyksesi alustusosioon.

Ohjeet tiettyihin SPA-kehyksiin

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.

Esimerkki

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

Vue.js-sovelluksessa aloituspiste on yleensä public/index.html-tiedosto. Etsi index.html: Etsi public/index.html-tiedosto Vue-projektistasi. Lisää koodinpätkä: Lisää SEATEXT AI -koodinpätkä juuri ennen sulkevaa </body>-tagia.

Esimerkki

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

Angular-sovelluksessa aloituspiste on yleensä src/index.html-tiedosto. Etsi index.html: Etsi src/index.html-tiedosto Angular-projektistasi. Lisää koodinpätkä: Lisää SEATEXT AI -koodinpätkä juuri ennen sulkevaa </body>-tagia.

Esimerkki

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

Lisähuomioita

Muita huomioitavia asioita: Asynkroninen lataus: Koodinpätkä sisältää async-attribuutin script-tagille, mikä varmistaa, että SEATEXT AI -skripti latautuu asynkronisesti, mikä auttaa ylläpitämään sivun lataussuorituskykyä. Paikallisen tallennustilan käyttö: Skripti tallentaa tunnisteen paikalliseen tallennustilaan (local storage). Varmista, että sovelluksellasi on tarvittavat käyttöoikeudet paikallisen tallennustilan käyttöön. Alkuperien väliset huomiot (Cross-Origin): Jos SPA-sovelluksesi on vuorovaikutuksessa useiden verkkotunnusten kanssa, varmista, että SEATEXT AI -skripti on yhteensopiva eikä kohtaa alkuperien välisiä ongelmia.

Integraation testaus

Kun olet lisännyt koodinpätkän, varmista integroinnin onnistuminen seuraavilla vaiheilla: Käännä ja suorita: Käännä ja suorita sovelluksesi käyttämällä kehyksesi vakio-komentoja (npm start, npm run serve tai ng serve). Tarkasta sivu: Avaa selaimesi kehittäjätyökalut (F12) ja tarkista Konsoli- ja Verkko-välilehdet varmistaaksesi, että SEATEXT AI -skripti latautuu ilman virheitä. Toiminnallisuuden tarkistus: Varmista, että SEATEXT AI -ominaisuudet toimivat odotetulla tavalla SPA-sovelluksesi sisällä.

Yhteenveto

Noudata tätä vaiheittista opasta, jotta voit sujuvasti integroida SEATEXT AI:n JavaScript-koodinpätkän yksisivuisessa sovelluksessasi. Jos kohtaat ongelmia tai tarvitset lisäapua, ota yhteyttä tukeen.