针对 SPA

确定入口点:确定您的 SPA 在何处初始化。这通常位于 index.html 文件或您的框架挂载应用程序的主 JavaScript/TypeScript 文件中。添加代码片段:将 SEATEXT AI 代码片段插入到 index.html 文件的 body 标签内,或插入到您 SPA 框架的等效初始化部分中。

针对特定 SPA 框架的说明

1. React

在 React 应用程序中,入口点通常是 public/index.html 文件。定位 index.html:在您的 React 项目中找到 public/index.html 文件。插入代码片段:在结束的 </body> 标签之前添加 SEATEXT AI 代码片段。

示例

<!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 应用程序中,入口点通常是 public/index.html 文件。定位 index.html:在您的 Vue 项目中找到 public/index.html 文件。插入代码片段:在结束的 </body> 标签之前添加 SEATEXT AI 代码片段。

示例

<!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 应用程序中,入口点通常是 src/index.html 文件。定位 index.html:在您的 Angular 项目中找到 src/index.html 文件。插入代码片段:在结束的 </body> 标签之前添加 SEATEXT AI 代码片段。

示例

<!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 属性,确保 SEATEXT AI 脚本异步加载,这有助于保持页面加载性能。本地存储使用:该脚本在本地存储中存储一个 ID。请确保您的应用程序具有访问和使用本地存储的必要权限。跨域注意事项:如果您的 SPA 与多个域交互,请确保 SEATEXT AI 脚本兼容且不会遇到跨域问题。

测试集成

添加代码片段后,请按照以下步骤确保其正确集成:构建并运行:使用您框架的标准命令(npm start、npm run serve 或 ng serve)构建并运行您的应用程序。检查页面:打开浏览器的开发者工具 (F12),检查“控制台 (Console)”和“网络 (Network)”选项卡,以验证 SEATEXT AI 脚本是否加载且无错误。功能检查:确保 SEATEXT AI 功能在您的 SPA 中按预期运行。

结论

通过遵循本分步指南,您可以将 SEATEXT AI JavaScript 代码片段无缝集成到您的单页应用中。如果您遇到任何问题或需要进一步帮助,请联系支持团队。