set up
For SPAs (React and etc)
Integrating the SEATEXT AI JavaScript snippet into your Single Page Application (SPA) involves embedding the provided code into your project. This guide will cover the steps necessary to add this code snippet, ensuring that it integrates smoothly with various SPA frameworks such as React, Vue, and Angular.
SEATEXT AI Snippet
Here is the SEATEXT AI snippet you need to insert:
SEATEXTCODEINTEGRATION
General Instructions
  1. Identify the Entry Point: Determine where your SPA initializes. This is typically in an index.html file or a main JavaScript/TypeScript file where your framework mounts the application.
  2. Add the Snippet: Insert the SEATEXT AI snippet within the body tag of your index.html file, or in the equivalent initialization section of your SPA framework.
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.
Example

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

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

<!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>
Additional Considerations
  • Additional ConsiderationsAsynchronous Loading: The snippet includes the async attribute for the script tag, ensuring that the SEATEXT AI script loads asynchronously, which helps in maintaining page load performance.
  • Local Storage Usage: The script stores an ID in the local storage. Ensure that your application has the necessary permissions to access and use local storage.
  • Cross-Origin Considerations: If your SPA interacts with multiple domains, ensure that the SEATEXT AI script is compatible and does not face cross-origin issues.
Testing the Integration
After adding the snippet, follow these steps to ensure it integrates correctly:

  • Build and Serve: Build and serve your application using the standard commands for your framework (npm start, npm run serve, or ng serve).
  • Inspect the Page: Open your browser's Developer Tools (F12) and check the Console and Network tabs to verify that the SEATEXT AI script loads without errors.
  • Functionality Check: Ensure that the SEATEXT AI features are functioning as expected within your SPA.
Conclusion
By following this step-by-step guide, you can seamlessly integrate the SEATEXT AI JavaScript snippet into your Single Page Application. If you encounter any issues or need further assistance, please reach out for support.