Για SPA

Η ενσωμάτωση του αποσπάσματος JavaScript του SEATEXT AI στην εφαρμογή Single Page Application (SPA) σας περιλαμβάνει την ενσωμάτωση του παρεχόμενου κώδικα στο project σας. Αυτός ο οδηγός θα καλύψει τα βήματα που απαιτούνται για την προσθήκη αυτού του αποσπάσματος κώδικα, διασφαλίζοντας ότι ενσωματώνεται ομαλά με διάφορα SPA frameworks όπως React, Vue και Angular.

Απόσπασμα SEATEXT AI

Ακολουθεί το απόσπασμα SEATEXT AI που πρέπει να εισάγετε:

SEATEXTCODEINTEGRATION

Γενικές οδηγίες

Εντοπισμός του σημείου εισόδου: Καθορίστε πού αρχικοποιείται το SPA σας. Αυτό γίνεται συνήθως σε ένα αρχείο index.html ή σε ένα κύριο αρχείο JavaScript/TypeScript όπου το framework σας φορτώνει την εφαρμογή. Προσθήκη του αποσπάσματος: Εισάγετε το απόσπασμα SEATEXT AI μέσα στην ετικέτα body του αρχείου index.html, ή στην αντίστοιχη ενότητα αρχικοποίησης του SPA framework σας.

Οδηγίες για συγκεκριμένα SPA frameworks

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.

Παράδειγμα

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

Παράδειγμα

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

Παράδειγμα

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

Πρόσθετες σκέψεις

Πρόσθετες σκέψειςΑσύγχρονη φόρτωση: Το απόσπασμα περιλαμβάνει το χαρακτηριστικό async για την ετικέτα script, διασφαλίζοντας ότι το script SEATEXT AI φορτώνεται ασύγχρονα, γεγονός που βοηθά στη διατήρηση της απόδοσης φόρτωσης της σελίδας. Χρήση τοπικής αποθήκευσης: Το script αποθηκεύει ένα ID στην τοπική αποθήκευση. Βεβαιωθείτε ότι η εφαρμογή σας έχει τα απαραίτητα δικαιώματα πρόσβασης και χρήσης της τοπικής αποθήκευσης. Ζητήματα cross-origin: Αν το SPA σας αλληλεπιδρά με πολλαπλά domains, βεβαιωθείτε ότι το script SEATEXT AI είναι συμβατό και δεν αντιμετωπίζει προβλήματα cross-origin.

Έλεγχος της ενσωμάτωσης

Μετά την προσθήκη του αποσπάσματος, ακολουθήστε αυτά τα βήματα για να βεβαιωθείτε ότι ενσωματώνεται σωστά: Build και Serve: Κάντε build και serve την εφαρμογή σας χρησιμοποιώντας τις τυπικές εντολές του framework σας (npm start, npm run serve ή ng serve). Έλεγχος σελίδας: Ανοίξτε τα Developer Tools του browser σας (F12) και ελέγξτε τις καρτέλες Console και Network για να επιβεβαιώσετε ότι το script SEATEXT AI φορτώνεται χωρίς σφάλματα. Έλεγχος λειτουργικότητας: Βεβαιωθείτε ότι οι λειτουργίες SEATEXT AI λειτουργούν όπως αναμένεται μέσα στο SPA σας.

Συμπέρασμα

Ακολουθώντας αυτόν τον οδηγό βήμα προς βήμα, μπορείτε να ενσωματώσετε απρόσκοπτα το απόσπασμα JavaScript του SEATEXT AI στην εφαρμογή Single Page Application σας. Αν αντιμετωπίσετε οποιοδήποτε πρόβλημα ή χρειαστείτε περαιτέρω βοήθεια, επικοινωνήστε για υποστήριξη.