Seatext library

How to Add the SeaText AI Snippet to Your Website for General Integration

Copy the SeaText AI snippet from your dashboard and paste it into the <head> of every page you want to personalize. Verify the script loads, check that agents are active, and troubleshoot common issues.

Adding the SeaText AI snippet to your site takes less than a minute. The snippet is a small JavaScript tag that loads asynchronously, stores a visitor ID in local storage, and begins rewriting copy, translating content, or matching landing pages to ad keywords depending on which agents you activate.

What the snippet does and why it matters

The SeaText snippet injects a lightweight client script (under 15 KB) into the page. When the script runs, it reads URL parameters, visitor context, and language settings. It then activates the AI agents you have turned on in the dashboard. Agents can rewrite headlines, translate text, or match landing pages to paid‑search keywords.

This matters because it lets a single canonical page serve many personalized experiences. You avoid building dozens of static landing pages, reduce bounce rates, and improve conversion metrics.

How the snippet behaves on page load

The snippet includes the async attribute, so the browser fetches it without blocking rendering. According to the documentation, the script executes in under 15 ms before the first paint. This timing ensures no visual shift (CLS = 0) and preserves PageSpeed scores.

On load, the script writes a unique visitor ID to localStorage. The ID persists across page views and sessions, allowing agents to maintain continuity for the same user.

If the page is a single‑page application, the snippet runs once when the initial HTML shell loads. Subsequent route changes do not reload the script, so agents continue to work as long as the SPA does not reload the page.

Prerequisites before you start

You need a SeaText account and an active project. Log in, open the project, and copy the snippet labeled SEATEXTCODEINTEGRATION from the installation page. The snippet already includes the async attribute so it will not block page rendering. Your site must allow third‑party scripts and permit access to localStorage; otherwise the visitor ID cannot persist across sessions.

If your site spans multiple domains or subdomains, confirm that the script can load cross‑origin without being blocked by Content Security Policy headers. The documentation notes that cross‑origin issues can prevent the snippet from initializing on secondary domains.

General integration for traditional multi‑page sites

  1. Open the HTML template or layout file that wraps every page (often header.php, layout.html, or a shared _Layout.cshtml).
  2. Paste the snippet inside the <head> tag, before any other third‑party scripts.
  3. Save and deploy the change to staging or production.
  4. Visit a few pages and open Developer Tools (F12). In the Console and Network tabs you should see the SeaText script load without errors.

That is all that is required for standard server‑rendered sites. The snippet will execute on every page view and apply the active agents automatically.

Integration for single‑page applications (React, Vue, Angular)

SPAs mount once and then swap views client‑side, so the snippet must live in the initial HTML shell or the framework bootstrap file.

React

  1. Locate public/index.html (Create React App) or your custom HTML entry point.
  2. Insert the snippet inside the <body> tag, just before the closing </body>.
  3. Run npm start or your build command and verify in the Console that the script loads.

Vue.js

  1. Open index.html at the project root (Vite) or public/index.html (Vue CLI).
  2. Place the snippet in the <body> section.
  3. Run npm run serve and check the Network tab for the SeaText request.

Angular

  1. Edit src/index.html.
  2. Add the snippet inside <body>.
  3. Run ng serve and confirm the script appears in the Console without CSP violations.

The documentation emphasizes identifying the SPA entry point — typically index.html or the main TypeScript bootstrap file — and inserting the snippet there so it loads before the first route renders.

Integration with tag managers and consent tools

If you use Google Tag Manager (GTM) or another tag manager, create a Custom HTML tag that contains the SeaText snippet. Set the tag to fire on Page View – All Pages and place it at the top of the tag sequence. This ensures the script runs before other marketing tags.

When a consent management platform blocks localStorage or third‑party scripts, the snippet cannot store the visitor ID and will skip personalization. Configure your consent tool to allow the SeaText domain and localStorage access after the user gives marketing consent.

Performance and privacy considerations

The snippet is under 15 KB and loads asynchronously, so it adds negligible bandwidth. Execution time is measured at under 15 ms before the first paint, keeping Cumulative Layout Shift at zero (CLS = 0). This performance profile meets Core Web Vitals thresholds.

Privacy‑wise, the script only writes a random identifier to localStorage. No personal data is sent until an agent needs to fetch content from SeaText’s servers. All network calls are made over HTTPS.

If you operate under strict privacy regulations, you can disable the snippet via a data‑layer flag until the user consents. The snippet will then remain idle and not create the localStorage ID.

Verification steps that apply to every integration

  1. Build and serve your application using the standard command for your stack.
  2. Open Developer Tools (F12) and switch to the Console and Network tabs.
  3. Confirm the SeaText script loads with a 200 status and no red error messages.
  4. Check localStorage: type localStorage.getItem('seatext_visitor_id') in the Console. A non‑null value means the ID was created.
  5. Functionality check: trigger an active agent (e.g., add utm_term=shoes to the URL to test keyword matching, or switch browser language to test translation).

If any step fails, move to the troubleshooting section.

Troubleshooting

  • CSP blocks: Ensure your Content‑Security‑Policy includes script-src https://cdn.seatext.com and connect-src https://api.seatext.com. Add unsafe-inline only if you must allow the inline snippet (the provided snippet is self‑contained, so this is rarely needed).
  • Cross‑origin errors: Verify that the script URL is reachable from all domains. If you host the snippet on a CDN, whitelist that domain in your CSP.
  • localStorage unavailable: Private‑incognito mode or strict cookie consent can disable localStorage. The console will show a warning like “localStorage is not available”. Adjust your consent settings or fall back to sessionStorage.
  • Snippet not firing in GTM: Check that the Custom HTML tag is set to fire before other tags. Use the GTM preview mode to see the tag order.
  • Multiple domains: Add each domain in the SeaText project settings. The same snippet works across domains as long as the origin is allowed.

Common mistakes to avoid

  • Placing the snippet in the footer of an SPA — the app may have already rendered before the script executes.
  • Adding the snippet only to the homepage — personalization works per page, so every template or route entry needs the tag.
  • Forgetting async — the provided snippet already includes it; do not remove it.
  • Blocking localStorage via cookie consent tools — the visitor ID will reset on every page view, breaking continuity.

Key facts

PropertyDetail
Snippet attributeIncludes async for non‑blocking load
SizeUnder 15 KB
Execution timeUnder 15 ms before visual paint
CLS impactCLS = 0 (no layout shift)
StorageUses localStorage for visitor ID persistence
Cross‑originMust be allowed on multi‑domain setups
SPA placementInside <body> of index.html or framework entry point
VerificationConsole, Network tab, and localStorage ID check

Limitations and when this guide does not apply

This guide covers client‑side snippet insertion only. Server‑side rendering frameworks that stream HTML before the <head> closes may need the snippet injected via a middleware or template helper instead of a static file. If you use a strict CSP that disallows inline scripts or third‑party domains, you must add the SeaText origin to script-src and connect-src directives. The snippet does not replace existing analytics or tag managers; it runs alongside them.

Frequently asked questions

What happens after I paste the snippet?

The browser fetches the SeaText script asynchronously. It creates a visitor ID in localStorage, then activates any agents you have turned on in the dashboard.

How can I confirm that agents are active?

Open the SeaText dashboard, view the Agents panel, and ensure the toggle is green. In the browser console you will see messages like “SeaText agent Google Ads initialized”.

My site uses a strict Content Security Policy. Will the snippet work?

Only if you add SeaText’s script domain to script-src and its API domain to connect-src. Without these allowances the script will be blocked and you will see CSP errors in the console.

Does the snippet work with Google Tag Manager or other tag managers?

Yes. Create a Custom HTML tag with the snippet and fire it on All Pages. Place it before other marketing tags to ensure early personalization.

Can I use the same snippet on multiple domains?

Yes, but each domain must be listed in your SeaText project settings. The snippet will load cross‑origin as long as CSP permits it.

What if localStorage is blocked in private browsing?

The script will still load, but it cannot store the visitor ID. Personalization will reset on each page view. Consider falling back to sessionStorage or disabling agents for those users.

Will the snippet increase page load time?

No. It is under 15 KB, loads asynchronously, and runs in under 15 ms before paint, keeping Core Web Vitals healthy.

Is there a separate snippet for each agent?

No. One universal snippet loads the platform; agents are toggled on or off in the dashboard.

Learn more

Visit the website for more information.

Learn more