適用於 SPA
Help Center
Getting started
Installation / Set Up
How to use Seatext AI
Variants management
For web designers
Product and pricing
seatextonly Privacy
For spas (React and etc)
將 SEATEXT AI JavaScript 程式碼片段整合到您的單頁應用程式(SPA)中,需要將提供的程式碼嵌入您的專案。本指南將說明新增此程式碼片段所需的步驟,確保它能與 React、Vue 和 Angular 等各種 SPA 框架順暢整合。
SEATEXT AI snippet
以下是您需要插入的 SEATEXT AI 程式碼片段:
SEATEXTCODEINTEGRATION
一般說明
識別進入點:確定您的 SPA 在哪裡初始化。這通常是在 index.html 檔案或您框架掛載應用程式的主要 JavaScript/TypeScript 檔案中。新增程式碼片段:將 SEATEXT AI 程式碼片段插入 index.html 檔案的 body 標籤內,或插入您 SPA 框架的等效初始化區段。
Instructions for specific 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>
其他考量
其他考量非同步載入:程式碼片段包含 script 標籤的 async 屬性,確保 SEATEXT AI 腳本非同步載入,有助於維持頁面載入效能。本機儲存空間使用:腳本會在本機儲存空間中儲存一個 ID。請確保您的應用程式具備存取和使用本機儲存空間的必要權限。跨來源考量:如果您的 SPA 與多個網域互動,請確保 SEATEXT AI 腳本相容,且不會遇到跨來源問題。
Testing the integration
新增程式碼片段後,請依照下列步驟確保整合正確:建置並提供服務:使用您框架的標準指令(npm start、npm run serve 或 ng serve)建置並提供應用程式。檢查頁面:開啟瀏覽器的開發人員工具(F12),檢查主控台和網路分頁,確認 SEATEXT AI 腳本載入時沒有錯誤。功能檢查:確保 SEATEXT AI 功能在您的 SPA 中如預期運作。
結論
依照此逐步指南,您可以將 SEATEXT AI JavaScript 程式碼片段順暢整合到您的單頁應用程式中。如果您遇到任何問題或需要進一步協助,請聯絡支援。
