适用于单页应用
Help Center
Getting started
Installation / Set Up
How to use Seatext AI
Variants management
For web designers
Product and pricing
seatextonly Privacy
适用于单页应用(React 等)
将 SEATEXT AI JavaScript 代码片段集成到单页应用(SPA)中,需要将提供的代码嵌入项目。本文将逐步说明添加该代码片段的操作,确保其在 React、Vue、Angular 等多种 SPA 框架中顺利运行。
SEATEXT AI 代码片段
以下是您需要插入的 SEATEXT AI 代码片段:
SEATEXTCODEINTEGRATION
通用说明
确定入口点:找出 SPA 的初始化位置,通常是在 index.html 文件或框架挂载应用的主 JavaScript/TypeScript 文件中。添加代码片段:将 SEATEXT AI 代码片段插入 index.html 的 body 标签内,或放置在 SPA 框架对应的初始化位置。
特定 SPA 框架使用说明
1. React
在 React 项目中,入口点通常是 public/index.html 文件。定位 index.html:在项目的 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:在项目的 public 目录下找到该文件。插入代码片段:在 </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:在项目的 src 目录下找到该文件。插入代码片段:在 </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>
其他注意事项
其他注意事项:异步加载:代码片段中包含 script 标签的 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 代码片段集成到单页应用中。如遇问题或需进一步帮助,请随时联系我们获取支持。