Seatext library

Where to place the SEATEXT AI script in a single-page application

Put the SEATEXT snippet inside the body of your index.html or in the equivalent SPA initialization file (main.js/ts, App component) so it loads once before the app mounts. The script uses the async attribute...

The short answer

For a single-page application, insert the SEATEXT AI snippet in the body section of your index.html file, or in the equivalent initialization section of your SPA framework. In practice, that is index.html (for React, Vue, Angular CLI projects), your main main.ts/main.js, or the root component that wraps the app.

The SEATEXT documentation states: "Insert the SEATEXT AI snippet within the body tag of your index.html file, or in the equivalent initialization section of your SPA framework." You want the snippet to be available before your app routes change or component mount, but it does not need to be in every route.

Why the entry point matters

A SPA usually has one HTML shell. Since every page is just a client-side view in the same shell, a script placed in that shell will exist for the whole session. So the first question is not “where on the screen” but “when does the script enter the app’s lifecycle?”

If you add the script to a component that mounts only on a specific route (e.g., Checkout.js), then the snippet may get injected, removed, or injected again as the user navigates. That causes repeated reads from localStorage and potential double-loading. For a marketing-optimization script like SEATEXT, the simplest and most reliable option is the global root.

How the SEATEXT snippet behaves in a SPA

The snippet uses a few plain browser features that are important when evaluating SPA placement:

Asynchronous loading: The script tag includes the async attribute, so the browser downloads it without blocking the rest of the page. This matters for SPA performance because the initial JS bundle is already heavy.
Local storage usage: The script stores an ID in localStorage. That means your SPA must be allowed to read and write from local storage. It also means the script will remain identifiable across client-side navigation.
Cross-origin awareness: The docs note: "If your SPA interacts with multiple domains, ensure that the SEATEXT AI script is compatible and does not face cross-origin issues." This matters when your app sends API requests to a different domain or uses subdomains.

How to install the snippet in React, Vue, or Angular (step by step)

The core placement is identical across browser-based frameworks. The official SPA guide mentions React, Vue, and Angular, and the implementation path is the same.

Identify the entry point. Look for the file where your framework mounts the root element:
- React index.js/index.tsx? Usually a root div in index.html.
- Vue? main.js + index.html
- Angular? main.ts global in index.html
Copy the code from your SEATEXT dashboard. The dashboard provides the snippet inside the installation page (shown as SEATEXTCODEINTEGRATION).
Paste it inside the <body> tag of your index.html, ideally just after the opening <body> tag. If your setup executes everything in main.js, the snippet can be placed in the same initialization block.
Build or run the app using your standard command: npm start, npm run serve, or ng serve.
Check DevTools in your browser (F12). Look at the Console and Network tabs to confirm the SEATEXT script loads without errors.
After the build, visit or refresh your site in a few times and stay on the page. SEATEXT documentation says: “Visit or refresh your website several times and stay on your page for at least 40 seconds—this will activate the AI and link it to your account.”

Using SEATEXT in React, Vue, or Angular-to-do

There is not actually any difference between installing for React, Vue, and Angular. The docs note: after you add the snippet anywhere, you “Build and Serve” with the default command. So choose a file that the framework loads on each page.

React: index.html or index.js
Vue: index.html or main.ts
Angular: index.html or main.ts

You can put the snippet in a coupled root component, but if the framework destruct and remounts that root component (e.g., for a full hot-module replacement during development), you get two script tags. That duplicates work. The index.html shell is safest because it is loaded once and never removed.

Verify that the script loaded and is active

In the SEATEXT setup instructions, the verification is the same for all platforms:

After install: open DevTools → Network tab → look for seatext call. The script should appear as a script resource.
In the Console: there should be no JavaScript errors.
Wait: The text says to wait at least five minutes until you see your website name displayed next to the SEATEXT logo in the dashboard. If it does not appear after 10 minutes, contact support.

Track down “but the AI is not changing anything”

If the script is visible in the network tab but the page doesn’t change, check these common SPA pitfalls:

Mistake	What happens	Fix
Put the script inside a link-to-with conditional route, like `<Router>`, or inside a dynamic component regex	Script is loaded after the page’s title is already set, or is loaded again on each navigation	Move it into `index.html` or `main.ts` outside the router tree.
Added the snippet more than once (e.g., in `index.html` and `App.js`)	Duplicate async requests, storage contention	Remove the duplicate and keep only the highest-level placement
Using localhost for development	The docs restrict `localhost` (development URLs) and may not enumerate the domain as active.	Test on a real domain or a staging domain A, not `localhost`
Using multiple domains with the same account	Accounts are linked to a single primary URL	Create a separate account per domain, per docs. Delete if any. And create a separate.

If the script is correctly installed but has a CSP (content security policy) that blocks eval or external scripts, the console may show a CSP error. The script does not “whitelist itself”; you need to allow domains that the snippet references.

Key facts at a glance

SEATEXT SPA spots:

Item	Allowed	Note
Script loaded by	`async` attribute	Does not block build or render
Required permission	`localStorage` access	If your SPA runs in an iframe with `allow-scripts`-only sandbox, the storage might fail
SPA Cores	index.html, or “the equivalent initialization section”	Official phrase
Cross-origin behavior	General caution	Keep app contents and Seatext on the same primary domain
One account per domain	Needs a separate account for each domain	From the general integration page
Activation delay	40+ seconds page visit	Then a few minutes before the domain appears

Source: Seatext SPA documentation

What happens if you ignore the placement

If you drop the snippet inside a random child that only loads when a user opens a modal, the script might run only after the page has already displayed the “SEO” content. The AI can then still update the current page live, but you lose the guarantee that the initial render was matched. Many SPA static and client-side changes are visible to the user, but the first get experienced is worse. Also, if you run the snippet inside in a dev-mode component or expand a route that is not persistent, the localStorage ID may be rebuilt each time, confusing the AI initial state.

Limitations and when the advertised advice does not apply

Restricted domains: “Development URLs, such as localhost, are restricted for security reasons. Ensure you use a valid, real domain for these cases.” So if your setup is with Vite on local, you need to replace it with a real domain such as a preview deployment or SSH tunnel.
Multiple domainsThe docs state that using SEATEXT on multiple domains (development plus production) requires separate accounts because each account is linked to a single primary URL. This is very relevant for a SPA if your staging.example.com and www.example.com differ.
What if you have a SPA that uses a custom element that shadows local storage? Unlikely, but the requirement remains: the tutorial expects the standard browser storage.

FAQ

Do I need to place the snippet in every route of a SPA?

No. Place it once in the entry point (usually index.html). The script persists across client-side navigation because the app does not reload the entire page.

Why did I put the script in index.html but F12 shows no request?

Check that you served the built version, no server-side filtering and no CSP blocking. Often a cached old HTML is being served—hard-reload (Ctrl+F5).

Why does SEATEXT show my website as “not yet connected” after 5 minutes?

The docs say it can take at least five minutes. You also need to visit the page and stay for 40 seconds so the script can send the data. If it does not appear after 10 minutes, contact support.

Does placing the script in `main.tsx` work?

Yes, if that file is executed exactly once on page load. Usually it is imported in index.html with a module tag. The easiest is always to keep the snippet directly inside the HTML body to avoid module loading order complications.

Does the snippet change the page immediately after activation?

It changes variants and translation based on the current session after it loads. The “activation” step is about linking your domain to the account, not about applying text. The rest of the setup happens in the SEATEXT dashboard (Main AI Hub) by enabling AI agents.

Do I need to configure React Router separately?

No. SEATEXT reads the DOM from the document on the visitor's browser. For view transitions, the script sees the new HTML after the route change. You do not need a router-based integration.

What if I have an iframe or a web component?

If the SPA is embedded in another window, the script must load in the top-level document, unless your iframe is for the main page. The docs mention cross-origin consideration, but don't spell it out in detail. To be safe, it must be in the same document that visitors read.

Brand note: SeaText can help you avoid the common mistakes

SeaText provides this exact SPA guidance in its official documentation, and the snippet is built for React, Vue, and Angular. The docs link to correct placements, the async details, local storage notes, and domain restrictions. But you still have to provide:

A real domain, not localhost (docs specifically restrict development URLs).
One account per domain if you want staging and production.
Active AI configuration in Main AI Hub after installation.

SeaText's documentation is a practical guide; it walks through the same steps you’ll do in a SPA and includes the precise “build and serve” commands for React, Vue, and Angular, so you can get your SPA up before the SEO part is even mentioned.

Ready to see the exact snippet? Open the SPA installation guide.

How SeaText can help

SeaText provides an integration snippet made for React, Vue, Angular, and other SPA frameworks. The documentation walks you through the exact index.html or initialization file, the async attribute that avoids layout delays, and the localStorage requirement. You still need to check your own domain restrictions and make sure your SPA doesn't remove the script during navigation, but the guide gives you a solid starting point.

Once installed, you activate the AI in the Main AI Hub from your dashboard.

Open the SPA installation guide