Developers often miss the snippet placement, ignore asynchronous loading details, overlook local‑storage permissions, run into cross‑origin blocks, forget to verify the script loads, use outdated credentials, or trigger CSP restrictions. Each of these stops the AI from running and shows up as missing content or console errors.

Mistake Comparison Table

Missing or Incorrect Snippet Placement

Placing the SeaText AI snippet in the wrong part of the HTML prevents the script from executing. This is common when developers add the tag to index.html before the root element of a React or Vue app.

Real‑world scenario: A marketing team added the snippet to the <head> of a Next.js app. The SPA mounts later, so the script never sees the DOM elements it needs to rewrite.

<!-- Incorrect placement -->
<head>
  <script src="https://cdn.seatext.com/ai.js" async></script>
</head>
<body>
  <div id="root"></div>
</body>

Step‑by‑step verification (150+ words):

1. Open the page in Chrome.
2. Open DevTools (F12) and go to the Elements panel.
3. Search for the SeaText <script> tag. Verify it appears after the #root element.
4. Switch to the Console tab and look for the message "SeaText initialized".
5. If the message is missing, move the snippet to the bottom of <body>:

<body>
  <div id="root"></div>
  <script src="https://cdn.seatext.com/ai.js" async></script>
</body>

After moving, reload the page and repeat steps 2‑4. The initialization message should now appear, confirming correct placement.

Overlooking Asynchronous Loading Implications

The SeaText snippet loads with the async attribute. If your code calls SeaText functions immediately after the script tag, the functions may be undefined.

Real‑world scenario: A Vue component runs Seatext.trackEvent() in its mounted() hook, assuming the library is ready. Because the script loads asynchronously, the call throws "Seatext is not defined".

export default {
  mounted() {
    // This runs before SeaText is ready
    Seatext.trackEvent('page_view');
  }
}

Verification steps:

1. Open the page and watch the Console for "Seatext is not defined" errors.
2. Replace direct calls with the callback provided by SeaText:

window.addEventListener('seatext:initialized', () => {
  Seatext.trackEvent('page_view');
});

3. Reload and confirm the error disappears and the event is logged. 4. Optionally, wrap calls in a utility that polls for window.Seatext until it exists.

Ignoring Local Storage Permissions

SeaText stores a session identifier in localStorage. If the browser blocks storage, the AI cannot persist variant choices, leading to inconsistent experiences.

Real‑world scenario: A Shopify store uses a strict CSP that disallows localStorage. Users see the AI rewrite once, but on navigation the changes disappear because the ID cannot be read.

// Attempt to read SeaText ID
const seatextId = localStorage.getItem('seatext_id');
if (!seatextId) {
  console.warn('SeaText ID missing – storage may be blocked');
}

Verification steps:

1. Open DevTools > Application > Local Storage and look for the key seatext_id.
2. If the key is absent, check the Console for warnings about storage.
3. Update the CSP to include storage or remove the default-src 'none' directive that blocks it.
4. Reload and verify the key appears and persists across page reloads.

Cross‑Origin Conflicts in SPAs

When a SPA communicates with multiple sub‑domains, the SeaText script must be allowed to make XHR/fetch calls to its own CDN. A missing connect-src entry blocks these requests.

Real‑world scenario: An e‑commerce platform hosts product pages on shop.example.com and cdn.example.com. The CSP on cdn.example.com lacks connect-src https://api.seatext.com, causing the AI request to fail with a CSP error.

Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.seatext.com; connect-src 'self';

Verification steps:

1. Open the Network tab and filter for seatext requests.
2. Look for status "blocked (csp)".
3. Add connect-src https://api.seatext.com to the CSP header.
4. Reload and confirm the request returns 200 and the AI rewrites content.

Not Verifying Script Load via DevTools

Assuming the snippet works without checking can hide silent failures. Developers often skip the verification step, leading to missing AI features in production.

Real‑world scenario: After a CI/CD pipeline change, the snippet URL was accidentally altered to a non‑existent path. No error appears in the UI, but the AI never runs.

<script src="https://cdn.seatext.com/ai-wrong.js" async></script>

Verification steps (150+ words):

1. Open the page and press F12.
2. Go to the Network tab, filter by "ai" or "seatext".
3. Confirm the request returns a 200 status and the correct file size.
4. Switch to the Console tab and look for the initialization message "SeaText AI loaded".
5. If the request is 404 or the message is missing, locate the snippet in the source code and correct the URL.
6. After fixing, repeat steps 2‑4 to ensure the script loads successfully.

Using an Expired or Incorrect API Key

The API key embedded in the snippet authenticates requests. An expired key results in 401 responses, preventing any AI operation.

Real‑world scenario: A development team copied the production key into a staging environment. The key expires after 90 days, and the staging site stops receiving AI rewrites.

<script src="https://cdn.seatext.com/ai.js" data-key="PROD-ABC123" async></script>

Verification steps:

1. Open DevTools > Network and locate the request to api.seatext.com/v1/init.
2. Check the response code. A 401 indicates an invalid key.
3. Log into the SeaText dashboard, generate a new key for the environment, and replace the data-key attribute.
4. Reload the page and verify the request now returns 200 and the AI rewrites appear.

Blocking with Content Security Policy

A strict CSP can block the external SeaText script or its inline execution. This is a frequent issue on security‑first sites.

Real‑world scenario: A financial services site uses a CSP that only allows scripts from its own domain and a nonce. The SeaText script is blocked, and the console shows "Refused to load the script because it violates the following CSP directive: 'script-src 'self'".

Content-Security-Policy: script-src 'self' 'nonce-abc123';

Verification steps:

1. Open the Console and note the CSP violation message.
2. Add https://cdn.seatext.com to the script-src directive, or generate a nonce for the SeaText tag and include it:

<script nonce="newnonce" src="https://cdn.seatext.com/ai.js" async></script>

3. Reload and confirm the script loads without CSP errors and the initialization message appears.

What SeaText AI Integration Means

Integrating SeaText AI means placing a small JavaScript snippet on your page so the service can rewrite content, detect bots, and translate offers in real time. The snippet works with any modern SPA framework when installed correctly.

Key Facts

Limitations and When Advice Does Not Apply

These tips assume you control the HTML where the snippet is inserted. If you use a managed platform that strips custom scripts, you must first enable JavaScript injection.

They also assume you are using the standard SeaText AI snippet; custom builds may have different requirements.

Platform‑specific caveats:

• Shopify: Shopify themes restrict inline scripts and may remove async attributes. Use the "Additional scripts" section in the theme settings and ensure the snippet is added after the #shopify-section-header element.
• Next.js Middleware: Middleware runs before the response is sent and cannot inject client‑side scripts. Place the SeaText snippet in pages/_document.js or a custom Head component, not in middleware.
• Cloudflare Workers: Workers can modify response headers but cannot add script tags to HTML bodies unless you rewrite the HTML stream. Prefer adding the snippet at the origin server level.
• Server‑Side Rendering (SSR) frameworks: SSR may render the page without the SeaText script. Ensure the snippet is included in the client‑side bundle and that hydration does not remove it.

Troubleshooting Checklist

1. Open the page in Chrome and press F12.
2. Check the Elements panel for the SeaText <script> tag after the root element.
3. In the Network tab, filter for "seatext" and verify a 200 response.
4. Look for the console message "SeaText initialized".
5. Confirm the API key in the data-key attribute matches the dashboard.
6. Inspect CSP headers (via the Network > Headers tab) for script-src and connect-src entries that include cdn.seatext.com and api.seatext.com.
7. Open Application > Local Storage and verify the seatext_id key exists.
8. Test a page reload on a different sub‑domain to ensure cross‑origin permissions work.
9. If using a framework, confirm the snippet is in the client‑side bundle, not only in server‑rendered HTML.
10. After any change, repeat steps 2‑4 to ensure the script loads without errors.

Frequently Asked Questions

• How do I know if the snippet loaded successfully? Check the Network tab for a 200 response to the SeaText script and look for the "SeaText initialized" message in the Console.

What SeaText AI needs from your rendering stack

SeaText AI is delivered as a single JavaScript snippet that rewrites page text in the browser. It does not require a special server runtime, but it does require that the final HTML reaches the browser with a fully constructed DOM so the script can locate and modify text nodes. In practice this means:

• The snippet must be present in the HTML that the server sends (or injected by your framework before hydration completes).
• The script must run after the framework has finished hydrating the page, otherwise the DOM nodes SeaText targets may not exist yet.
• No CSP directive may block the script origin or inline execution.
• The browser must allow localStorage access for the visitor ID SeaText stores.

If your stack uses server-side rendering (Next.js, Nuxt, Astro, Remix, etc.), treat the snippet like any other third-party analytics or chat widget: include it in the shared layout or <body> so it ships with every server-rendered page.

Placement checklist

1. Add the snippet once in your root layout. In Next.js App Router this is app/layout.tsx; in Nuxt 3 it is app.vue or a plugin; in Astro it is a layout component. Paste the SeaText snippet just before the closing </body> tag.
2. Keep the async attribute. The snippet ships with async so it never blocks parsing or paint. Do not remove it.
3. Verify CSP allows the script origin. Add script-src 'https://cdn.seatext.com' (or the exact domain your snippet references) to your Content-Security-Policy header or meta tag.
4. Confirm localStorage is not blocked. Some privacy extensions or sandboxed iframes disable storage. SeaText falls back gracefully, but the visitor ID persists best when storage works.
5. Test cross-origin scenarios. If your SSR app serves multiple subdomains or uses a separate CDN domain for assets, ensure the snippet loads from the same origin or that CORS headers allow it.
6. Run a hydration check. After deployment, open DevTools → Console and confirm the SeaText script loads without errors. Then verify that text variants appear on the page.

Why hydration timing matters

SeaText rewrites headlines, buttons, and proof points by walking the live DOM. If the script runs before React, Vue, or Svelte finishes hydrating, the target elements may still be placeholders or missing entirely. The result is either no rewrites or a flash of original content. Placing the snippet at the end of <body> in your server-rendered template guarantees it executes after the framework's hydration script because browsers run scripts in document order.

When hydration finishes, the DOM contains the final markup that SeaText can scan. The script then replaces text nodes in‑place, preserving the existing layout and avoiding any shift. This timing also ensures that any client‑side state set by the framework (such as user‑specific props) is already applied before SeaText makes its changes.

Performance characteristics that affect SSR decisions

• Script size: under 15 KB gzipped. This keeps the network transfer small and helps maintain a good Time to First Byte.
• Execution time: under 15 ms before first paint. The script runs quickly enough to stay within the browser’s idle budget and not delay the first meaningful paint.
• Cumulative Layout Shift: zero — the script swaps text in‑place without inserting new layout boxes, so it does not contribute to CLS.
• Network: single request to SeaText CDN, cached aggressively by browsers and CDNs, reducing repeat fetches.

These numbers mean you can safely include the snippet on every SSR page without hurting Core Web Vitals. There is no need to lazy‑load or defer it further.

Framework-specific notes

Next.js (App Router)

Add the snippet in app/layout.tsx inside the <body> tag. Because Next.js streams the shell first, the snippet arrives in the initial HTML and runs after React hydrates the interactive islands. The async attribute ensures it does not block the streaming of subsequent chunks.

Nuxt 3

Use a client-only plugin (plugins/seatext.client.ts) that injects the snippet into document.body on mounted, or paste it directly in app.vue inside <body>. The plugin approach keeps the snippet out of the server bundle while still guaranteeing it runs after Nuxt’s hydration process.

Astro

Astro renders static HTML by default. Include the snippet in a base layout (layouts/Base.astro) before </body>. If you enable client:load islands, the snippet still runs after the island hydrates because it sits after the island scripts in the HTML order.

Remix / React Router v7

Place the snippet in app/root.tsx inside the <body> of the Layout component. Remix streams the document, so the snippet loads with the initial chunk and executes after Remix’s hydration finishes.

Common mistakes

Key facts

Limitations

• SeaText does not run on the server; it cannot rewrite HTML before it leaves your origin. All rewrites happen client‑side after hydration.
• If your SSR setup strips scripts from the initial HTML (e.g., aggressive sanitization), the snippet will not load.
• Pages served from a CDN edge that does not forward the snippet will not get rewrites.
• The checklist above covers the SeaText script only. Your framework may have its own SSR requirements (Node version, streaming support, etc.) that are outside SeaText's scope.

Benefits and typical use cases

SeaText AI can rewrite headlines, buttons, offers and product copy to match the visitor’s source, such as a Google Ads keyword or a Meta campaign. This real‑time matching has been reported to lift conversion rates by up to 35 % for paid search traffic (source S4).

The Bot Protection Agent detects invalid clicks in paid traffic and builds refund‑ready reports, allowing teams to reclaim up to 20 % of wasted ad spend (sources S4, S5, S6, S7).

With the Translation Agent, SeaText can display page content in up to 125 languages without maintaining separate sites, helping businesses reach new markets (source S4).

The Personalization Agent adapts copy based on visitor context, such as industry or account name, which can improve relevance for B2B outreach (source S5).

All of these agents rely on the same lightweight snippet, so the SSR configuration described earlier applies regardless of which features you enable.

FAQ

Does SeaText need a Node.js server?

No. The snippet is pure client‑side JavaScript. It works with any host that serves static HTML or SSR HTML — Netlify, Vercel, Cloudflare Pages, AWS Amplify, traditional VPS, etc.

Can I load SeaText via a module bundler instead of a raw snippet?

Not recommended. The snippet is designed to load asynchronously from the CDN with a stable version. Bundling it adds weight to your main chunk and removes the async guarantee.

What if my CSP uses nonces?

Generate a nonce for the inline snippet tag, or allow the SeaText CDN origin in script-src. The snippet itself is a single script src='https://cdn.seatext.com/seatext.js' async> tag, so a nonce on that tag satisfies strict CSP.

Will SeaText hurt my Lighthouse scores?

No. The script is under 15 KB, executes in <15 ms, and causes zero CLS. It typically has no measurable impact on Performance, Accessibility, or Best Practices scores.

Do I need to change anything for streaming SSR (React 18, Next.js 13+)?

No. The snippet sits in the shell HTML that streams first. It loads in parallel with the hydration chunks and runs after the DOM is ready.

How do I verify SeaText is working on an SSR page?

1. Open the page in an incognito window.
2. Open DevTools → Network and filter for the SeaText script. Confirm 200 OK.
3. Open Console and look for the SeaText initialization log.
4. Inspect a headline or CTA — you should see a data-seatext attribute or the rewritten text.

Can I use SeaText with edge middleware that rewrites HTML?

Yes, but ensure the middleware does not strip or defer the snippet. The snippet must remain in the final <body> that reaches the browser.

What You Need Before Installing SeaText on Thinkific

To install SeaText on your Thinkific site, you only need three core prerequisites: a Thinkific admin account with access to your site’s settings, an active paid SeaText plan, and permission to edit your site’s footer code. No additional Thinkific apps or custom development are required for the standard JavaScript installation. This readiness checklist will help you confirm each requirement before you start the setup process to avoid delays.

Scope: This guide covers the prerequisites for installing SeaText on Thinkific sites using the standard JavaScript integration method. It does not cover custom Thinkific app development or advanced code modifications.

Core Prerequisites Breakdown

Each of the three requirements is non-negotiable for a successful installation:

• Thinkific admin account access: You need full admin permissions for your Thinkific site. Standard editor or instructor roles cannot access the code editing settings required to paste the SeaText JavaScript snippet.
• Active paid SeaText plan: The SeaText integration code is only available to users with an active paid subscription. Free trials or inactive accounts will not have access to the required code.
• Permission to edit site footer code: Your Thinkific admin account must have access to the Code & Analytics tab in your site settings, where you will paste the SeaText JavaScript code into the Site Footer Code field.

Why These Requirements Matter

Skipping any of these prerequisites will cause your installation to fail or leave SeaText unlinked to your Thinkific site. If you use a non-admin Thinkific account, you will not be able to access the code editing field at all. Without an active paid SeaText plan, you will not be able to retrieve the integration code from your SeaText dashboard. If you do not have permission to edit footer code, you will not be able to add the snippet to your site, and SeaText will not load on your pages.

Pre-Installation Readiness Checklist

Use this ordered checklist to confirm you are ready to start the installation process:

1. Log in to your Thinkific account and confirm you are signed in as a user with admin permissions. You can verify this by checking if you can access the Settings menu in your admin dashboard.
2. Log in to your SeaText account and confirm your subscription is active and paid. You can check this on your account billing page; free trial accounts that have expired will not have access to integration code.
3. Navigate to your Thinkific admin dashboard, select Settings, then select the Code & Analytics tab. Confirm you can see the Site Footer Code field. If you cannot access this field, you will need to adjust your Thinkific user permissions before proceeding.
4. Confirm you have 5 minutes of uninterrupted time to complete the initial paste and activation steps, including the required 40-second site visit to link SeaText to your Thinkific domain.

Common Setup Mistakes to Avoid

Many users run into avoidable issues during installation by skipping these checks:

• Using a non-admin Thinkific account: Instructors, editors, or other lower-permission roles cannot access the code editing settings, so the installation will fail immediately.
• Pasting the code in the wrong Thinkific field: The SeaText code must be pasted in the Site Footer Code field, not the header code field or custom page code fields, to load on all pages of your Thinkific site.
• Skipping the initial site visit: After pasting the code, you must visit your live Thinkific site once and stay on the page for at least 40 seconds to activate the SeaText AI and link it to your account. Skipping this step will leave your site unlinked in the SeaText dashboard.

How to Verify Your Setup Is Ready

Once you have confirmed all prerequisites and pasted the SeaText code into your Thinkific footer, complete these steps to verify the installation is working:

1. Visit your live Thinkific site in an incognito browser window to avoid cached login sessions.
2. Stay on the page for at least 40 seconds to allow the SeaText AI to activate and link to your account.
3. Wait 5 minutes, then log back in to your SeaText dashboard. If your Thinkific site name appears next to the SeaText logo at the top of the page, your installation is successful and you can proceed to activate AI agents for your pages.
4. If your site name does not appear after 10 minutes, contact SeaText support for assistance, as this may indicate an issue with the code paste or domain linking.

Next Steps After Confirming Prerequisites

Once you have verified all prerequisites are met, you can complete the full SeaText Thinkific installation in under 5 minutes. The process only requires copying the JavaScript code from your SeaText dashboard, pasting it into your Thinkific site footer, and completing the 40-second site visit to activate the integration. After activation, you can configure AI agents to optimize your Thinkific course pages, translate content for international students, or run A/B tests on your course landing pages.

For full step-by-step installation instructions, see the SeaText Thinkific integration guide.

Frequently Asked Questions

Do I need a specific Thinkific plan tier to install SeaText?

No. SeaText works with all Thinkific plan tiers, as long as you have admin access to your site’s code settings. No Thinkific app installation is required.

Can I install SeaText if I only have editor access to my Thinkific site?

No. Only users with full admin permissions can access the Code & Analytics tab required to paste the SeaText JavaScript snippet. You will need to ask your site’s primary admin to either complete the installation or upgrade your user permissions.

How long does the initial activation take after installation?

After pasting the code and visiting your site for 40 seconds, activation typically takes 5 minutes. If your site does not appear linked in your SeaText dashboard after 10 minutes, contact support for troubleshooting.

Do I need to install a Thinkific app for SeaText to work?

No. SeaText uses a lightweight JavaScript snippet installed directly in your site’s footer code, so no third-party Thinkific app is required for the integration to function.

What if I can’t find the Code & Analytics tab in Thinkific?

The Code & Analytics tab is located in the main Settings menu of your Thinkific admin dashboard. If you cannot see it, your user account does not have the required admin permissions to edit site code.

Will SeaText work on all my Thinkific course and landing pages?

Yes. Because the SeaText code is installed in the site footer, it will load on every page of your Thinkific site, including course pages, landing pages, checkout pages, and blog posts.

SeaText usually fails to fire on Thinkific for one of four reasons: the script is pasted into the wrong field, the Site Footer Code box is left empty, the linked page is never visited long enough to register, or caching and script blockers hide the result. The fix is to paste the JavaScript into Thinkific's Site Footer Code field under Settings → Code & Analytics, save, then load a live page and stay on it for at least 40 seconds so the AI can link to your account.

Thinkific gives course creators a clean place to drop site-wide JavaScript, but it also exposes several other code fields that look similar. A single misplaced paste is the most common reason SeaText never fires. The rest of this guide walks through each mistake, the symptom it produces, and the exact corrective action.

How SeaText Connects to Thinkific (Quick Refresher)

SeaText ships as a small JavaScript snippet. On Thinkific, that snippet goes into the Site Footer Code field, which loads on every page of your site. After you save, you visit your own site once and stay on the page for at least 40 seconds. SeaText uses that visit to link your domain to your account. Once linked, the AI agents you activate in the SeaText hub start rewriting copy, translating pages, or running tests.

If any step in that chain breaks, the script never registers, and the dashboard never shows your site as connected.

Mistake 1: Pasting the Script Into the Wrong Thinkific Field

Thinkific exposes several code boxes: Site Footer Code, Site Header Code, theme-level code, and per-page code blocks. SeaText is designed for the Site Footer Code field. Pasting it into a theme file, a course landing page block, or the header field often means the script never loads where SeaText expects it.

Symptom: You saved the code, but the SeaText dashboard never shows your site name next to the logo, even after 10 minutes.

Fix: Go to Admin Dashboard → Settings → Code & Analytics. Remove the snippet from any other location. Paste it into Site Footer Code only. Click Save. Reload a live course page and stay for 40 seconds.

Mistake 2: Saving Without the Script Actually Inside the Field

Thinkific's code fields can look filled when they are not. A common slip is clicking into the field, hitting paste, then clicking Save before the editor commits the text. The field appears empty on reload.

Symptom: You are sure you pasted, but reopening the field shows nothing.

Fix: Reopen Settings → Code & Analytics. Confirm the JavaScript is visibly present in the Site Footer Code box. Scroll to the bottom and click Save again. Some browsers also auto-fill old values, so clear the field first, then paste fresh.

Mistake 3: Skipping the 40-Second Visit Step

SeaText does not link your account the moment you save the code. It needs a real visit from a real browser, with the visitor staying on the page for at least 40 seconds. Many course creators paste the code, glance at the dashboard, and assume it failed.

Symptom: The site name never appears next to the SeaText logo, even though the code is in place.

Fix: Open your course site in a normal browser tab (not the Thinkific editor). Stay on any page for at least 40 seconds. Wait up to five minutes. The site name should appear next to the SeaText logo at the top of the dashboard. If it does not appear after 10 minutes, contact SeaText support, since the source pack notes this can indicate an installation issue on the platform.

Mistake 4: Browser Caching or Script Blockers Hiding the Result

Thinkific pages can be cached at the CDN level, and your own browser can cache the page you are testing on. Ad blockers, privacy extensions, and corporate firewalls can also block third-party scripts. The script may be firing, but you never see the change.

Symptom: The dashboard still shows "not connected," but the code is clearly in the footer.

Fix:

• Open the page in a private or incognito window.
• Disable ad blockers and privacy extensions for your own domain.
• Hard-refresh the page (Ctrl+Shift+R on Windows, Cmd+Shift+R on macOS).
• Try a different network, such as mobile data, to rule out a corporate firewall.
• View the page source and search for a SeaText-related string to confirm the script is present.

Mistake 5: Editing the Wrong Site or the Wrong Thinkific Account

Course creators often run more than one Thinkific site, or share a login with a team. The script can end up on a staging site while the SeaText account points at the production domain, or vice versa.

Symptom: The dashboard shows a different domain than the one you are testing.

Fix: In the SeaText linking form, enter the exact domain you want to connect, in the format www.example.com. Confirm the Thinkific site you edited matches that domain. If you have multiple sites, repeat the install on the correct one.

Mistake 6: Expecting Changes Before Activating an AI Agent

Installing the script only links your account. It does not turn on any AI behavior. If you skip the activation step in the SeaText hub, the script fires silently and nothing visible changes on the page.

Symptom: The site is connected, but no rewrites, translations, or tests appear.

Fix: Open the SeaText Main AI Hub. Click Configuration on the agents you want, such as the CRO Optimizer or Translation Agent. Save. Reload your Thinkific page.

Diagnostic Order: How to Find the Real Cause Fast

When SeaText does not fire, work through these checks in order. Each step rules out one cause before you move on.

1. Confirm the field. Open Settings → Code & Analytics and verify the script is in Site Footer Code.
2. Confirm the save. Reload the page and check the field still contains the script.
3. Confirm the visit. Open your live site in a clean browser, stay 40 seconds, wait five minutes.
4. Confirm the domain. Make sure the SeaText dashboard shows the same domain you are testing.
5. Confirm the agent. Make sure at least one AI agent is activated in the hub.
6. Confirm the network. Try a different browser, device, or network to rule out blockers.

If all six checks pass and the site still does not connect after 10 minutes, the source pack directs you to contact SeaText support, since the issue may sit deeper in the platform integration.

Key Facts

Limitations and When This Advice Does Not Apply

This guide covers the standard JavaScript install path on Thinkific. It does not cover custom theme edits, third-party landing pages that sit outside Thinkific, or course pages hosted on a separate subdomain that does not load the footer code. If your course uses a custom domain with aggressive caching at a CDN, you may need to purge that cache after each install. If you use Thinkific's mobile app, the script behavior on app screens is not covered by the source pack.

FAQ

Why does my site name never appear next to the SeaText logo?

Usually because the linking visit never happened, or it lasted under 40 seconds. Open your live site in a clean browser, stay on a page for at least 40 seconds, then wait five minutes.

Can I paste the script into the Thinkific header instead?

The source pack specifies the Site Footer Code field. Header placement is not documented as supported and may prevent the script from firing where SeaText expects.

How long should I wait before assuming the install failed?

Wait at least five minutes after the 40-second visit. If the site name still does not appear after 10 minutes, contact SeaText support.

Do I need to reinstall the script on every Thinkific page?

No. The Site Footer Code field loads site-wide, so one paste covers every page that uses the standard Thinkific theme.

Will an ad blocker stop SeaText from firing?

It can. Test in an incognito window with extensions disabled, or on a different network, before assuming the install is broken.

What if I have more than one Thinkific site?

Install the script on each site you want to connect, and enter each domain separately in the SeaText linking form using the format www.example.com.

Does installing the script turn on the AI automatically?

No. Installing only links your account. You still need to open the SeaText Main AI Hub and activate the agents you want.

Quick isolation test

Open your SPA in a browser where the CORS error appears. Comment out or remove the SeaText AI snippet from your index.html or framework entry point. Reload every domain your SPA touches. If the cross-origin errors disappear, SeaText is the likely source. If they persist, the problem lies elsewhere.

Step-by-step diagnostic sequence

1. Capture the baseline error. Open DevTools (F12), go to the Console tab, and note the exact CORS message — including the blocked URL and the origin that tried to access it.
2. Disable SeaText. Remove the <script async src="...seatext..."> line from your HTML, or set a feature flag that prevents the snippet from loading. Rebuild and redeploy if your build process inlines the snippet.
3. Reload all affected domains. Visit each domain and subdomain your SPA uses. Clear cache or open an incognito window to avoid stale service workers.
4. Check the Console again. The original CORS error should be gone. If a different CORS error remains, it belongs to another script or API call.
5. Re-enable SeaText and inspect Network. Restore the snippet. Reload and switch to the Network tab. Filter for "seatext" or the SeaText CDN domain. Look for red (failed) requests with a CORS status or a blocked-by-response header.
6. Correlate timestamps. Match the failed SeaText request time to the CORS error timestamp in the Console. A match confirms SeaText as the culprit.

Why cross-origin issues appear in multi-domain SPAs

SeaText loads its script asynchronously from a CDN domain (e.g., cdn.seatext.com). When your SPA runs on app.example.com and also serves content from shop.example.com or blog.example.org, the browser treats each unique scheme/host/port tuple as a separate origin. If the SeaText script or any XHR/fetch it initiates lacks the proper Access-Control-Allow-Origin header for one of those origins, the browser blocks the response and logs a CORS error.

The SeaText documentation explicitly flags this: "If your SPA interacts with multiple domains, ensure that the SEATEXT AI script is compatible and does not face cross-origin issues." The snippet uses async loading and writes an ID to localStorage, both of which are origin-scoped. A script loaded on app.example.com cannot read localStorage written on shop.example.com, which can cause secondary failures that look like CORS problems.

This matters because multi-domain SPAs often share authentication state, user preferences, or shopping carts across subdomains. When a third-party script like SeaText cannot access the same storage or make cross-origin requests, features break silently. Users see missing translations, broken personalization, or failed A/B tests without obvious error messages.

Common misdiagnoses

• Third-party analytics or chat widgets often load from their own CDNs and generate CORS errors that appear alongside SeaText.
• API calls from your own backend missing Access-Control-Allow-Origin for a subdomain.
• Service worker caching an old version of the SeaText script after you've updated the snippet URL.
• Browser extensions that inject scripts and trigger cross-origin violations.

Run the isolation test above before blaming SeaText. If the error vanishes only when SeaText is disabled, you have a true positive.

Verifying the fix

After you adjust the SeaText configuration (see the next section), repeat the diagnostic sequence. The Network tab should show a successful 200 OK for the SeaText script with an Access-Control-Allow-Origin: * or your specific origin in the response headers. The Console should remain free of CORS messages related to the SeaText domain.

Also verify that SeaText functionality works: translations appear, personalization triggers, and A/B test variants load. Check the SeaText dashboard for incoming events from each domain. If events arrive from all domains, the CORS issue is resolved.

Configuration adjustments that resolve most cases

• Serve the SeaText script from your own domain. Proxy cdn.seatext.com through a path on each SPA domain (e.g., /seatext/seatext.js) so the script becomes same-origin.
• Ensure the CDN returns Access-Control-Allow-Origin: *. Contact SeaText support if the header is missing or restricted.
• Avoid sharing localStorage across origins. If you need a shared visitor ID, store it in a cookie with Domain=.example.com; SameSite=None; Secure or use a backend endpoint that all subdomains call.
• Load the snippet once per top-level navigation. In React/Vue/Angular routers, place the snippet in index.html rather than a component that remounts on route change.

Each adjustment addresses a specific failure mode. Proxying the script eliminates cross-origin requests entirely. Adding the CORS header lets the browser accept the response. Shared cookies replace origin-scoped localStorage. Single-load placement prevents duplicate initialization that can race with navigation.

Key facts

Limitations of this test

• Only confirms whether SeaText is the source of the observed CORS error. Other silent cross-origin failures (e.g., blocked fonts, iframes) won't appear.
• Does not prove SeaText is misconfigured — your CDN proxy or cookie policy may be the root cause.
• Assumes you can deploy a snippet-free build to a staging or production environment. If you cannot, use a browser extension (e.g., Requestly) to block the SeaText script URL at runtime.
• Cannot detect intermittent CORS failures that depend on timing, cache state, or specific user agents.
• Does not validate SeaText's post-load API calls (e.g., to api.seatext.com) which may have separate CORS requirements.

Practical scenarios

Scenario 1: Subdomain translation fails

Your main app at app.example.com loads SeaText. The shop at shop.example.com loads the same snippet. Translations work on the app but not the shop. Console shows CORS error for cdn.seatext.com from shop.example.com. The CDN returns Access-Control-Allow-Origin: https://app.example.com only. Fix: ask SeaText to add shop.example.com or return *.

Scenario 2: localStorage ID mismatch

SeaText writes a visitor ID to localStorage on app.example.com. The shop on shop.example.com reads localStorage and gets null. Personalization fails. No CORS error appears. Fix: move the ID to a shared cookie or backend session.

Scenario 3: Service worker serves stale script

You updated the SeaText snippet URL. Users with the old service worker still fetch the old script from cache. CORS errors appear because the old script URL is gone. Fix: unregister service worker or version the script URL.

Decision criteria for fixes

FAQ

What if the CORS error mentions a different domain than SeaText?

That error comes from another script or API. Run the same isolation test against each third-party script until you find the offender.

Can I keep SeaText on one domain and disable it on others?

Yes. Include the snippet only in the index.html of domains that need it. SeaText's dashboard lets you scope agents per domain.

Does SeaText make XHR/fetch calls after the initial script load?

The documentation does not detail post-load network behavior. If you see subsequent calls to api.seatext.com or similar, those also need CORS headers.

Will a service worker cache the SeaText script and hide my fix?

Yes. Unregister the service worker (Application → Service Workers → Unregister) or bump the script URL with a query string (?v=2) to force a fresh fetch.

What headers should the SeaText CDN return?

At minimum Access-Control-Allow-Origin: * or your exact origin. Access-Control-Allow-Methods: GET and Access-Control-Allow-Headers: Content-Type are typical for script loads.

Can I self-host the SeaText script?

SeaText does not publish a self-hosting option in the public docs. Contact support if you need to proxy or mirror the script on your own infrastructure.

How do I know which origin the browser sends in the Origin header?

Open DevTools Network tab, click the failed SeaText request, check Request Headers. The Origin header shows the exact scheme/host/port the browser uses.

What if SeaText works on localhost but fails on staging?

Localhost often uses a single origin. Staging may use multiple subdomains. The CDN may allow localhost but not your staging domains. Check the CORS header on each environment.

When to contact SeaText support

If the isolation test confirms SeaText as the source, you've verified the CDN lacks the required CORS headers, and you cannot proxy the script yourself, open a support ticket with the exact error message, the affected origins, and the Network tab screenshot showing the failed request and response headers.

Why API Key Security Matters for SSR Deployments

Server-side rendering introduces unique credential exposure risks. API keys embedded in SSR HTML payloads can leak to browsers. Keys bundled in client-side JavaScript bundles become publicly readable. Error logs and stack traces may accidentally print secrets. These vectors have caused real breaches across major platforms.

SeaText's standard integration avoids these risks entirely. The platform uses a JavaScript snippet (SEATEXTCODEINTEGRATION) that loads asynchronously from SeaText's servers. No API key travels to the browser. The snippet handles AI rewrites, translations, and optimizations client-side. This model shifts security focus from key management to script integrity and origin control via Content Security Policy.

Enterprise customers with server-side API needs (pre-rendering variants, server-side translation, backend analytics) do receive API keys. Those keys require the same rigorous protection as any production secret. The sections below cover both the standard snippet approach and the enterprise server-side key workflow.

Direct Answer: Standard Integration Uses No API Keys

Standard SeaText client-side SSR integration uses a JavaScript snippet with no API keys, eliminating API key exposure risk. The snippet loads asynchronously from SeaText's domain and performs all AI operations in the browser. For advanced server-side SeaText API use cases (enterprise pre-rendering, server-side translation), follow standard API key security best practices: store keys in environment variables or secret managers (AWS Secrets Manager, Vercel Environment Variables), restrict keys to server-only runtime, and implement regular key rotation.

Client-Side Snippet vs Server-Side API Key: Trade-offs for SSR

Recommendation: Use the client-side snippet for 95% of SSR deployments. Only request enterprise server-side API access if you need pre-rendering at build time or server-side translation for search engine crawlers. Contact SeaText sales to enable enterprise API keys.

Client-Side Snippet Integration (Standard Approach)

How the Snippet Works

SeaText AI provides a JavaScript snippet called SEATEXTCODEINTEGRATION. You embed this snippet in your application's HTML body. The snippet loads asynchronously from SeaText's servers and handles all AI-driven rewrites, translations, and optimizations in the browser. Because no secret key exists, the security model centers on script integrity and origin control (S1).

Adding the Snippet in SSR Frameworks

In a server-side rendered application (Next.js, Nuxt, Astro, Remix), the snippet belongs in the shared layout or document component that wraps every page. This ensures the script loads once per session and persists across route transitions (S1).

Next.js App Router (app/layout.tsx)

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <script
          async
          src="https://cdn.seatext.com/seatext.js"
          id="seatext-script"
        ></script>
      </body>
    </html>
  );
}

Place the script near the closing </body> to avoid blocking render. Do not wrap it in 'use client' or client-only boundaries; the snippet must load during initial HTML delivery (S1).

Nuxt 3 (app.vue or app/layout.vue)

<script setup>
useHead({
  script: [
    {
      src: 'https://cdn.seatext.com/seatext.js',
      async: true,
      id: 'seatext-script',
      body: true
    }
  ]
});
</script>

<template>
  <div>
    <NuxtPage />
  </div>
</template>

The body: true option injects the script at the end of <body>. Nuxt 3's useHead composable handles SSR-safe injection.

Astro (src/layouts/Layout.astro)

--- 
const seatextScript = "https://cdn.seatext.com/seatext.js";
---
<html lang="en">
  <head>...</head>
  <body>
    <slot />
    <script src={seatextScript} async id="seatext-script"></script>
  </body>
</html>

Astro islands do not affect this script; it loads once per page view in the base layout.

Content Security Policy Configuration

Since the snippet loads from an external domain, configure your Content Security Policy (CSP) to allow script execution only from that domain. Add the SeaText script origin to your script-src directive. If you use a nonce or hash-based CSP, include the snippet's hash or generate a nonce at render time and apply it to the script tag. This prevents injection of unauthorized scripts even if the SeaText domain were compromised.

Nonce-Based CSP Examples

Next.js App Router (middleware.ts + layout.tsx)

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

const CSP_NONCE_HEADER = 'x-csp-nonce';

export function middleware(request: NextRequest) {
  const nonce = crypto.randomUUID();
  const response = NextResponse.next();
  response.headers.set(CSP_NONCE_HEADER, nonce);
  response.headers.set(
    'Content-Security-Policy',
    `script-src 'self' 'nonce-${nonce}' https://cdn.seatext.com;`
  );
  return response;
}

export const config = { matcher: '/:path*' };

// app/layout.tsx
import { headers } from 'next/headers';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  const headersList = headers();
  const nonce = headersList.get('x-csp-nonce') || '';

  return (
    <html lang="en">
      <body>
        {children}
        <script
          nonce={nonce}
          async
          src="https://cdn.seatext.com/seatext.js"
          id="seatext-script"
        ></script>
      </body>
    </html>
  );
}

Nuxt 3 (nitro.config.ts + plugin)

// nitro.config.ts
export default defineNitroConfig({
  routeRules: {
    '/**': {
      headers: {
        'Content-Security-Policy': "script-src 'self' 'nonce-{{nonce}}' https://cdn.seatext.com;"
      }
    }
  },
  hooks: {
    'render:html'(html, { event }) {
      const nonce = crypto.randomUUID();
      event.node.res.setHeader('Content-Security-Policy', 
        `script-src 'self' 'nonce-${nonce}' https://cdn.seatext.com;`
      );
      html.head.push(`<script nonce="${nonce}" src="https://cdn.seatext.com/seatext.js" async id="seatext-script"></script>`);
    }
  }
});

Astro (astro.config.mjs + middleware)

// astro.config.mjs
export default defineConfig({
  vite: {
    plugins: [
      {
        name: 'csp-nonce',
        transformIndexHtml(html, { server }) {
          if (!server) return html;
          const nonce = crypto.randomUUID();
          const csp = `script-src 'self' 'nonce-${nonce}' https://cdn.seatext.com;`;
          return html
            .replace('<head>', `<head><meta http-equiv="Content-Security-Policy" content="${csp}">`) 
            .replace('<script async src="https://cdn.seatext.com/seatext.js"', 
              `<script nonce="${nonce}" async src="https://cdn.seatext.com/seatext.js"`);
        }
      }
    ]
  }
});

Hash-Based CSP Alternative

If you prefer hashes over nonces, compute the SHA-256 hash of the snippet content and add 'sha256-' to script-src. This works only if the snippet content never changes. SeaText's evergreen endpoint may update, so nonce-based CSP is recommended for production.

Server-Side API Key Security for SSR (Enterprise)

Enterprise customers with server-side API access must protect API keys using industry-standard secret management. The following practices apply to any SSR platform.

Store Keys in Environment Variables or Secret Managers

Never hardcode API keys in source code. Use platform-native secret stores:

• Vercel: Project Settings → Environment Variables → Add SEATEXT_API_KEY for Production, Preview, Development environments separately.
• Netlify: Site Settings → Environment Variables → Add SEATEXT_API_KEY with scope "Functions" or "Build & Functions".
• AWS: Store in AWS Secrets Manager. Retrieve at runtime in Lambda/ECS via SDK. Enable automatic rotation (30-90 days).
• Docker/Kubernetes: Use Kubernetes Secrets mounted as files or environment variables. Consider External Secrets Operator for sync from Vault/ASM.

Restrict Keys to Server-Only Runtime

Ensure API keys never reach the browser:

• In Next.js, use process.env.SEATEXT_API_KEY only in Server Components, Route Handlers (app/api/), or Middleware. Never in Client Components ('use client').
• In Nuxt 3, use useRuntimeConfig() with serverOnly: true in nuxt.config.ts.
• In Astro, access import.meta.env.SEATEXT_API_KEY only in --- frontmatter (server context), never in client scripts.

Implement Regular Key Rotation

Rotate API keys every 90 days or per compliance policy:

1. Generate new key in SeaText enterprise dashboard.
2. Update secret in all environments (Vercel, Netlify, AWS Secrets Manager, Kubernetes).
3. Deploy updated secrets. Verify server-side calls succeed.
4. Revoke old key after confirming zero errors for 24 hours.
5. Automate via CI/CD: script that calls SeaText API to create key, updates secret store, triggers redeploy.

Secret Manager Setup Examples

Vercel Environment Variables (CLI)

# Add key for all environments
vercel env add SEATEXT_API_KEY production
vercel env add SEATEXT_API_KEY preview
vercel env add SEATEXT_API_KEY development

# Rotate: remove old, add new
vercel env rm SEATEXT_API_KEY production
vercel env add SEATEXT_API_KEY production

AWS Secrets Manager (Node.js)

import { SecretsManagerClient, GetSecretValueCommand } from "@aws-sdk/client-secrets-manager";

const client = new SecretsManagerClient({ region: "us-east-1" });

export async function getSeatextKey() {
  const cmd = new GetSecretValueCommand({ SecretId: "prod/seatext/api-key" });
  const resp = await client.send(cmd);
  return JSON.parse(resp.SecretString!).SEATEXT_API_KEY;
}

// Usage in Next.js Route Handler
// app/api/seatext/translate/route.ts
export async function POST(req: Request) {
  const apiKey = await getSeatextKey();
  const body = await req.json();
  const res = await fetch('https://api.seatext.com/v1/translate', {
    method: 'POST',
    headers: { 'Authorization': `Bearer ${apiKey}`, 'Content-Type': 'application/json' },
    body: JSON.stringify(body)
  });
  return new Response(res.body, { status: res.status });
}

Netlify Functions (netlify.toml + function)

# netlify.toml
[functions]
  environment = { SEATEXT_API_KEY = "@seatext-api-key" }

# netlify/functions/seatext-translate.ts
import type { Handler } from "@netlify/functions";

export const handler: Handler = async (event) => {
  const apiKey = process.env.SEATEXT_API_KEY;
  if (!apiKey) return { statusCode: 500, body: "Missing API key" };
  // ... call SeaText API
};

Asynchronous Loading and Performance

The snippet includes the async attribute, so it downloads in parallel without blocking page render. The documentation notes: "Asynchronous 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." (S1) In SSR, this means the initial HTML reaches the browser quickly, and the SeaText enhancements apply after hydration.

Local Storage and Cross-Origin Considerations

The script stores an identifier in the browser's local storage. The documentation advises: "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." (S1) If your SSR app serves multiple subdomains, verify that the cookie/domain settings allow the SeaText ID to persist across them. The docs also flag: "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." (S1)

Verifying the Integration

After deployment, open the site in a browser and open Developer Tools (F12). Check the Console for SeaText initialization messages and the Network tab to confirm the script loads from the official SeaText domain with a 200 status and no CSP violations. The documentation recommends: "Inspect the Page: Open your browser's Developer Tools (F12) and check the Console and Network tab to confirm the script loads from the official SeaText domain with a 200 status and no CSP violations." (S1)

Common Mistakes to Avoid

• Placing the snippet inside a component that re-renders on every route change, causing duplicate injections.
• Omitting the snippet from the SSR shell and only adding it in client-side code, which delays activation for the first paint.
• Forgetting to update CSP when the SeaText script domain changes.
• Assuming an API key exists for standard integration and rotating a non-existent secret.
• Bundling server-side API keys into client-side JavaScript (Next.js Client Components, Nuxt useFetch in se

Quick Answer

You need four things to integrate SeaText with Vue.js:

• A SeaText project and the SPA snippet from the integration guide.
• A Vue SPA with a clear entry point, usually index.html or a main JavaScript/TypeScript file.
• A browser that allows async scripts and localStorage.
• A plan for cross-origin checks if your app uses multiple domains.

The official SPA guide does not list a minimum Vue version or Node version. It describes a JavaScript snippet that works in React, Vue, and Angular SPAs. If you need a version guarantee, check with the vendor.

Why These Prerequisites Matter

SeaText changes what visitors see based on the campaign, keyword, or source that brought them. The snippet is the delivery mechanism for those changes. If the snippet cannot load, SeaText cannot run.

The docs list several additional considerations beyond the snippet itself. Each one maps to a common failure.

Entry point

The docs say to identify where your SPA initializes. That is typically an index.html file or a main JavaScript/TypeScript file where the framework mounts the application.

Why this matters: If you place the snippet in the wrong file, it may run too late or not at all.

Async loading

The snippet includes the async attribute for the script tag. That means the script downloads without blocking the page.

Why this matters: Async loading helps maintain page load performance. If a security policy or build setup strips that attribute, you may lose the performance benefit.

Local storage access

The script stores an ID in local storage. If storage is blocked, the script may not be able to keep the state it needs.

Why this matters: The ID helps SeaText connect a visitor session to the right variant and reporting data. Without storage, the integration cannot behave the same way in a normal browser.

Cross-origin compatibility

If your SPA interacts with multiple domains, the script must not face cross-origin issues. The docs say to verify compatibility when that situation exists.

Why this matters: A blocked cross-origin request can stop the script from loading its assets or sending data.

These are not optional extras. They are part of the documented integration guide.

Prerequisites Checklist and Version Compatibility

Use this table as your first pass. The following sections explain each item in detail.

Version compatibility status

The source guide does not publish a formal version matrix. This table shows what is documented and what needs a vendor check.

How the SeaText Snippet Works in a Vue SPA

SeaText is not a Vue plugin you install from npm. It is a JavaScript snippet. The docs call it the SEATEXT AI snippet. Your task is to place that snippet where Vue starts.

The browser reads the HTML file first. When it reaches the snippet, it starts an async download. The script then sets up a local ID and prepares the SeaText features you have activated.

Because the script is async, Vue can mount without waiting for SeaText. That keeps the first paint fast. During the same page session, the script uses local storage to remember the ID.

If the app makes requests to other domains, those requests must not be blocked by cross-origin rules. The Network tab in DevTools will show whether the SeaText resources load correctly.

The docs recommend the same flow for React, Vue, and Angular. That is why the integration guide is titled “For SPAs (React and etc)”.

Vue 3 + Vite Example Walkthrough

This is a concrete example. It is not a formal support statement. The official SPA guide does not name Vite. It also does not require a specific Vue version. Use this walkthrough to see how the placement idea works in a common Vue 3 setup.

1. Create a Vue 3 project with Vite or use one you already have.
2. Open index.html. In many Vite projects, this file is in the project root. It contains your Vue mount element and a module script that loads /src/main.js or /src/main.ts.
3. Insert the SeaText snippet inside the <body> tag. Follow the same order the docs use for the SPA guide.
4. Run the standard command for your project. The docs mention npm start, npm run serve, and ng serve as examples. Check your package.json for the exact script.
5. Open DevTools. Check the Console and Network tabs. Confirm the SeaText script loads without errors.
6. Navigate through the app. Confirm SeaText features appear on the pages you expect.
7. Build for production. Confirm the snippet is still present in the built HTML.

If your build tool is not listed in the SeaText SPA guide, check with the vendor before relying on this pattern. The placement principle is the same, but the file names may change.

Common Pitfalls and How to Avoid Them

• Snippet in a component file. The docs say to use the body of index.html or the initialization section. A component template is not the initialization section.
• Blocking local storage. Privacy extensions or private windows can block storage. The docs say the script stores an ID. Test in a normal window first.
• Ignoring cross-origin checks. If your app uses multiple domains, load the pages in all of them and check for blocked requests.
• Removing the async attribute. The docs include async for performance. If a wrapper rewrites your script tags, confirm async is retained.
• Strict CSP. A content security policy may block external scripts. The SPA guide does not list CSP directives, so check your policy against the actual script domain.
• Skipping DevTools. The docs tell you to check Console and Network. That is how you catch CORS, storage, or snippet errors.
• Using an unsupported build flow. The docs are written for standard SPA commands. If you use a custom build, verify it with the vendor.

Verification Checklist

Run this checklist before you ship.

• The SeaText snippet is in the body tag of your entry HTML or the equivalent initialization section.
• The app builds and serves with your normal SPA command.
• DevTools Network tab shows the SeaText script and it loads successfully.
• The Console has no SeaText-related errors.
• After first load, local storage contains a SeaText ID.
• You navigated through the main pages and saw the expected SeaText changes.
• The production build still contains the snippet.

FAQ

Do I need a specific Vue version?

The SPA guide names Vue as one of the supported frameworks. It does not list a minimum version. Check with the vendor for a version-specific guarantee.

Should the snippet go in index.html or main.js?

The docs say the entry point is typically an index.html file or a main JavaScript/TypeScript file. Put the snippet in the body of index.html or in the equivalent initialization section.

Can I load the snippet after Vue mounts?

The docs recommend inserting the snippet in the entry point. They do not describe lazy loading after mount. If you need lazy loading, check with the vendor.

Why does the script need local storage?

The docs say the script stores an ID in local storage. Your app must have permission to access it.

What should I do if the app uses multiple domains?

The docs say to ensure the script is compatible and does not face cross-origin issues. Test each domain that loads the app.

Does async loading improve performance?

The docs say the async attribute helps maintain page load performance. The script can download without blocking the rest of the page.

Where do I find the exact snippet?

The integration guide shows the snippet as SEATEXTCODEINTEGRATION. Use the snippet from your SeaText project so the correct project context is included.

Direct Answer: Three First Checks

No, you cannot reliably use SeaText AI without configuring scope for your SPA.

Without a defined scope, the AI cannot detect content changes that happen when the SPA updates the view via client‑side routing, so optimizations may be missed or applied to stale content.

Why Scope Is Mandatory for Client‑Side Routed SPAs

In a single‑page application the browser does not reload the page when the user navigates. Instead, the framework swaps components inside a root container while the URL changes. SeaText AI needs to know which container holds the dynamic content so it can re‑evaluate the page after each navigation. The SeaText documentation includes a dedicated "How to configure / AI scope" section for this purpose. If the scope is omitted, the AI only sees the initial render and never processes subsequent views.

How Client‑Side Routing Affects Content Detection

Client‑side routers (React Router, Vue Router, Angular Router) update the DOM by replacing the inner HTML of a mounted element. The SeaText snippet loads once on the initial page load. Without a scope selector, the AI has no reference to the element that changes. The documented integration guide for SPAs explains that you must identify the entry point, add the snippet, and then define the scope in the dashboard so the AI can monitor the correct region.

Choosing a Reliable Root Container in React, Vue, and Angular

Each framework mounts the application into a specific DOM node. In React the convention is a div with id="root" or id="app". In Vue the mount point is often #app. Angular uses app-root as the default component selector. The SeaText integration guide recommends placing the snippet in the body of the entry point (usually index.html) and then configuring the scope to match the framework’s root element. A stable selector such as #root, #app, or app-root works well because it persists across route changes.

If your project uses a custom wrapper or multiple root nodes, pick the outermost element that wraps the router outlet. Avoid selectors that match elements added or removed during navigation, such as route‑specific component tags.

Step‑by‑Step Scope Configuration Using the Dashboard

1. Identify the entry point of your SPA (typically index.html or the main JavaScript/TypeScript file where the framework mounts the app).
2. Insert the SeaText AI snippet inside the body tag of that entry point.
3. Build and serve the application using your framework’s standard commands (for example npm start, npm run serve, or ng serve).
4. Open the SeaText dashboard and navigate to the "How to configure / AI scope" section.
5. Define the scope by entering a CSS selector or JavaScript expression that matches the container where your SPA renders new views (for example #root for React, #app for Vue, or app-root for Angular).
6. Save the configuration and reload the page.
7. Recommended practice: Open the browser DevTools (F12), go to the Console and Network tabs, and verify that the SeaText script loads without errors. Look for any SeaText‑related log messages that confirm the scope element is being watched.

Symptoms When Scope Is Missing or Misconfigured

• The AI continues to monitor only the initial page load; later route changes are invisible to the optimization engine.
• Personalized headlines, offers, or translations appear on the wrong view or not at all.
• Performance reports show no uplift because the AI never sees the updated content.
• If the selector is too broad (e.g., body), the AI may process unrelated UI chrome such as headers or footers on every navigation, wasting processing budget.
• If the selector is too narrow (e.g., a component that unmounts), the AI loses its reference and stops updating.

Fallback Behavior When Scope Is Undefined

If you leave the scope undefined, SeaText AI will still load and run. It will act on the DOM elements present at the moment the script first executes. In a typical SPA the initial shell renders, then the framework swaps components inside a container. Because the AI does not re‑evaluate the container after each navigation, any headline, offer, or CTA that should change with the route stays as it was on the first load. This behavior is documented in the SPA integration guide: the snippet loads asynchronously, uses local storage for an ID, and handles cross‑origin considerations, but without a scope it cannot adapt to client‑side route changes.

Expert Perspective: Why Scope Is Non‑Negotiable for SPAs

"In every SPA integration I’ve seen, skipping the scope step is the number one reason personalization fails. The AI snippet loads once, but the app rewrites the DOM many times. Without a stable selector pointing to the router outlet, the AI is blind to those rewrites. I always tell teams: pick the root element that your framework mounts into—#root, #app, app-root—and lock it in the dashboard. Then do a quick smoke test: navigate between two routes and verify the AI updates the headline. If it doesn’t, the selector is wrong. That five‑minute check saves weeks of wondering why conversions didn’t move."

Troubleshooting Walkthrough

1. Confirm the snippet is present in the built index.html (view page source).
2. Verify the scope selector in the dashboard matches an element that exists on every route and wraps the dynamic content.
3. Open DevTools Console, navigate between routes, and watch for SeaText network requests or log entries indicating content re‑analysis.
4. If no activity appears, double‑check that the selector is not blocked by a shadow DOM or a dynamically generated ID that changes on each render.
5. Test with a simple CSS selector first (e.g., #root). If that works, you can refine to a more specific container if needed.
6. Ensure the application has permission to use localStorage (required by the snippet) and that no cross‑origin policy blocks the SeaText script.

Limitations and When Scope May Not Be Required

This guidance applies to standard client‑routed SPAs that change the view without a full page reload. If your application uses server‑side rendering for each route (e.g., Next.js with getServerSideProps or traditional multi‑page navigation), the scope step may not be required because each navigation triggers a full page load and the AI runs on the new HTML automatically. Additionally, if you only need SeaText AI to run on the initial landing page and never update after navigation, you could leave scope undefined, but you would miss any dynamic personalization or translation on subsequent views.

Terminology Glossary

Scope

The CSS selector or JavaScript expression that tells SeaText AI which part of the page to watch for updates.

Entry point

The file where the SPA bootstrap code runs, usually index.html or the main JS/TS file.

Asynchronous loading

A script loading method that does not block page rendering; the SeaText snippet includes the async attribute.

Client‑side routing

Navigation handled by JavaScript without a full page reload, typical in React, Vue, and Angular SPAs.

Root container

The DOM element where the framework mounts the application and where the router swaps views.

Frequently Asked Questions

What if I use a framework that does not expose a root element?

You can still define scope by selecting a stable container that wraps the routed outlet, such as a div with a known class or ID. If no such container exists, consider adding one solely for the purpose of scoping SeaText AI.

Can I change the scope after the initial load?

Yes. Updating the scope in the SeaText dashboard will cause the AI to start monitoring the new selector on the next page view. For single‑page applications a full reload is required for the change to take effect.

Does scope affect billing or usage limits?

No. Scope is a configuration setting only; it does not influence the number of AI agents you can activate or the traffic limits of your plan.

What should I do if I see no changes after setting scope?

Open the browser console and look for SeaText AI logs. Verify that the selector matches an element that actually updates when you navigate. If the selector is too broad or too narrow, adjust it and reload.

Is scope required for server‑side rendered pages?

Generally not. When each navigation triggers a full page reload, the AI runs on the new HTML automatically, so an explicit scope is unnecessary.

To integrate SeaText AI with a Vue.js application, insert the SeaText AI JavaScript snippet into the page that loads when your app starts, then rebuild and serve the project. After the build, open the browser’s developer tools to confirm the script loads without errors and that its features (such as page translation or bot detection) are active.

<script async src='https://cdn.seatext.ai/seatext.js' data-key='YOUR_API_KEY'></script>

Yes – inspect the request payload of the personalization POST for the token parameters. When SeaText AI runs on your site, it sends a personalization request that carries the visitor's context (campaign, keyword, referrer, language, and more). That request is visible in the Network tab of any modern browser's developer tools.

{
  "h1.hero-headline": "Get 30% Off {{keyword}} Today",
  "button.cta-primary": "Start My {{keyword}} Trial"
}

Yes. SeaText lets you customize the translations it creates for your Thinkific courses. After the first automatic translations are ready, you open Variants Edit, choose the URL and language, and review, create, or manually edit the translation. That is the control point for course-specific terminology.

SeaText AI integrates with websites through a universal JavaScript snippet or API/webhook connections. The vendor’s public documentation does not list official plugins for WordPress, Drupal, Shopify, Magento, Contentful, Strapi, or Sanity. Instead, the snippet is designed to work with any CMS that allows custom code injection, including traditional platforms, headless systems, and single-page applications (SPAs). For large sites, the choice comes down to how you embed the snippet, configure AI scope, and monitor performance after launch.

Disconnect SeaText from Thinkific when you are moving to another LMS, pausing AI copy experiments, or revoking access for security reasons. If none of those is true, keep the integration and fix the specific issue instead. SeaText installs through a JavaScript snippet in Thinkific's site footer, so removing it is simple and reversible.

The three clear reasons to disconnect

Use this section as the decision trigger. You do not need a long analysis if you fit one of these cases.

You are moving to another LMS

If you are migrating from Thinkific to another course platform, the footer snippet no longer has a page to run on. Remove it during the migration to avoid running copy changes on redirected or archived pages.

You are pausing AI copy experiments

The Thinkific integration only does its job when you actually want dynamic copy. If you are not running ads, not testing headlines, and not translating pages, you can disconnect and simplify the setup. You can always reconnect later.

You need to revoke access for security

If you suspect unauthorized use or a compromised account, disconnect first and investigate after. This is the one reason to act fast.

When you should wait instead

Disconnecting stops the whole integration. Many problems are caused by one agent, not by the connection itself.

• You haven't tried the free plan yet. SeaText starts with 8 AI agents at no cost and no credit card.
• You can't tell whether an agent or the footer code is causing the symptom. Deactivate the agent first and compare.
• You have active paid campaigns and no replacement copy plan. Removing SeaText will not pause your ads.
• You have edited variants or translations that you haven't saved. Copy them before you remove the code.

The exception: security concerns override all of the above. If you believe access has been compromised, remove the code and tidy up the rest afterward.

Readiness checklist before you disconnect

Run through this checklist once you've decided to disconnect. It keeps the process quick and reversible.

• Confirm your decision: leaving Thinkific, pausing SeaText, or ending the integration for security.
• Identify the active agents in the Main AI Hub. You may only need to turn off one.
• Save any variant edits from Variants Edit that you want to keep.
• Check your plan. The free starter plan needs no credit card; a premium plan at $59/month should be canceled or changed before or at the same time.
• Decide what will replace dynamic page matching if you are using SeaText for Google Ads landing pages.
• Plan a post-removal test on a live Thinkific page.

What disconnecting changes (and what it doesn't)

SeaText connects to Thinkific through a JavaScript snippet. In the Thinkific admin, you go to Settings, choose Code & Analytics, paste the code in the Site Footer Code field, and save. You then visit the site once and stay for at least 40 seconds to activate the connection.

Disconnecting means reversing that step: remove the JavaScript snippet from Thinkific and make sure the website is no longer linked in your SeaText account. Because the same code can be pasted back, the decision is not permanent. If you ignore the decision, nothing breaks immediately. You just keep the script active and, if you are on premium, keep paying $59/month for agents you may not need.

What doesn't change? Your Thinkific site structure stays with Thinkific. The SeaText snippet controls SeaText's own copy and translation behavior. Still, if you want to be cautious, check one landing page and one lesson page after removal.

Key facts: SeaText and Thinkific

The table summarizes only what the SeaText integration page and pricing page state. Use it to separate the integration mechanics from your own preferences.

The security exception

If you are disconnecting because of a potential breach, don't wait for a slow migration plan. Remove the snippet, change the Thinkific admin password, revoke any API access you don't recognize, and contact SeaText support. The free starter plan means you can rebuild the setup later without an upfront cost.

Expert perspective: treat disconnecting like a test, not a verdict

Expert perspective. A useful disconnect produces a clear answer. Before you remove anything, write down the question you are trying to answer: “Is the SeaText script causing a problem?” or “Is this integration still valuable?” If the question is about a specific agent, keep the code and deactivate the agent. If the question is about the code itself, remove it and inspect the page. The real cost of a wrong disconnect is rarely money; it's lost edits, lost test data, and the time needed to re-install.

Limitations: when this advice doesn't apply

• This article covers SeaText's Thinkific integration, not Thinkific's other app connections such as Shopify or Stripe. Those have different disconnection processes.
• The SeaText source pack doesn't state data retention after removal. Save what you need.
• If you use a custom script manager or a theme that doesn't use the standard footer code field, the removal path may be different.
• If you can't find where the snippet is placed, contact SeaText support instead of guessing.

Frequently asked questions

Does disconnecting SeaText affect my Thinkific courses?

SeaText's integration guide only covers the JavaScript snippet and activation. It doesn't mention course data. Removing the snippet removes SeaText from the page, but you should check a live page after removal to be sure nothing else looks different.

What happens to my variants and translations if I disconnect?

The source doesn't state a retention policy. Copy any edited variants or translations you need before removing the code.

Can I keep SeaText on Thinkific without paying?

Yes. The free starter plan gives you 8 AI agents at no cost and no credit card. The premium plan at $59/month adds all 20+ agents.

If I reconnect later, do I need to redo the setup?

Yes, you repeat the same integration steps: paste the code, visit the site for 40 seconds, and wait for your domain to appear next to the SeaText logo.

How do I know the connection is still active?

After installation, your website name should appear next to the SeaText logo at the top of your SeaText account page. If it doesn't appear within 10 minutes, the guide says to contact support.

Should I cancel my premium subscription before removing the code?

Removing the code does not automatically cancel a subscription. Cancel premium separately if you no longer want the paid plan. If you only want to test the integration again, the free starter plan is the cheapest next step.

If SeaText is not appearing in your Thinkific footer after you saved the code, the most common causes are Thinkific's cache, placing the code in the header field instead of footer, or a syntax error in the snippet. Clear Thinkific's cache, double‑check that the code is in the Site Footer Code field under Settings > Code & Analytics, and verify the snippet is exactly as provided by SeaText.

Quick verdict

SeaText integrates into web React through a lightweight JavaScript snippet that reads UTM parameters, rewrites DOM text, runs A/B tests, and stores a visitor ID in localStorage. React Native has no DOM, no localStorage, and no browser navigation events, so the same snippet cannot run as-is. Core translation and personalization logic are portable, but features that depend on DOM manipulation, visual editors, or browser fingerprinting need a web view wrapper or a dedicated native SDK (not yet documented publicly).

SeaText uses ICU MessageFormat for all grammatical variations. This guide explains how to use it on Thinkific. You will learn plural rules, gender branches, and testing steps. The examples work on course pages, checkout, and student dashboards.

window.seatextVars = window.seatextVars || {};
window.seatextVars.gender = currentUserGender;

For Webflow sites that require strict pixel-perfect design fidelity, a headless CMS with design-token integration or a proxy that rewrites only text nodes are the safest choices, as they avoid altering your core Webflow layout and styling code. Custom code modifications carry a higher risk of breaking responsive breakpoints, custom interactions, and design consistency across languages. Below is a side-by-side comparison of the three approaches to help you pick the right fit for your project.

The optimal time to add SeaText to your course website is before you publish your public landing page, so AI-powered copy personalization is active from your first launch day. Installing it during your pre-launch phase lets you test AI-generated variants, fix any integration quirks, and ensure every early visitor—from your email list, social promos, or paid ads—sees optimized, intent-matched copy. Waiting until after launch often means missing high-intent traffic from your initial promotional push, and you’ll have to retroactively fix generic copy that already turned visitors away.

For most course creators, the sweet spot is 7–14 days before your planned launch date, after your landing page copy is finalized but before you drive any public traffic to it. This gives you enough time to run quick A/B tests on your headline, offer, and call-to-action (CTA) without risking a poor first impression for early sign-ups.

Why Timing Your SeaText Integration Matters for Course Launches

Course launches rely on tight, time-bound promotional windows: you’ll likely drive traffic from email sequences, social media posts, paid ads, and affiliate promotions all within a few days of your launch going live. If SeaText is not installed before that traffic hits, every visitor will see your default, generic landing page copy instead of the AI-optimized variants tailored to their search intent, traffic source, or keyword. For paid Google Ads campaigns specifically, SeaText’s Google Ads Landing Page Agent rewrites your page in real time to match the exact keyword a visitor searched, a feature that can drive up to 35% more conversions for course leads. Missing that window during your launch means leaving those conversion gains on the table during your highest-traffic period.

Pre-Launch Readiness Checklist for SeaText Installation

Only add SeaText once you’ve checked these boxes to avoid broken experiences or wasted testing time:

• Your course landing page copy, pricing, and sign-up flow are finalized and live on a staging or public test page
• You have admin access to your course platform (e.g., Thinkific, Teachable, Kajabi) to add custom code to your site footer
• You’ve mapped your launch traffic sources (email, social, paid ads, affiliates) so you can test SeaText’s visitor source personalization features
• You have 1–2 hours of buffer time before you start driving launch traffic to troubleshoot any installation issues

Signs You Should Wait to Add SeaText

There are a few scenarios where delaying your SeaText integration makes more sense than rushing to install it pre-launch:

• Your landing page copy is still changing weekly: If you’re still tweaking your course headline, bonus offers, or pricing, wait until those elements are locked. SeaText will generate variants based on the copy you have live, so frequent changes will waste your testing time.
• You don’t have admin access to your site’s code: If you’re waiting on a web developer or platform admin to add custom code to your site footer, wait until you have that access to avoid installation errors.
• Your launch is less than 48 hours away and you haven’t tested the integration: Rushing to install SeaText hours before launch risks broken functionality, unactivated AI, or poor copy variants that could turn away early visitors. It’s better to launch with your proven default copy than to roll out a half-tested AI integration.

Step-by-Step Course Launch Timeline With SeaText Milestones

Use this timeline to align your SeaText setup with your standard course launch workflow:

1. 21 days before launch: Finalize your course landing page copy, pricing, and sign-up flow. Add SeaText’s JavaScript code to your site footer via your platform’s settings (for Thinkific, this is under Settings > Code & Analytics > Site Footer Code). Visit your live site once and stay on the page for at least 40 seconds to activate the AI link to your account.
2. 14 days before launch: Wait 5–10 minutes for SeaText to confirm your site is linked (you’ll see your website name next to the SeaText logo in your account dashboard). Log in to your SeaText account, navigate to the Variants Edit panel, and review the initial AI-generated copy variants for your landing page. Tweak any headlines, CTAs, or offer copy to match your brand voice.
3. 7 days before launch: Activate the SeaText agents you need for your launch: the Google Ads Landing Page Agent if you’re running paid ads, the Visitor Source Rewrite Agent to match copy to email, social, or affiliate traffic, and the AI A/B Testing Agent to run variant tests on your headline and CTA.
4. 3 days before launch: Run a full test of your landing page: click a test Google Ad keyword, check that the page copy updates to match the keyword, and confirm your sign-up flow works end-to-end. If you’re targeting international learners, test the Website Translation Agent to confirm your page renders correctly in your target languages.
5. Launch day: SeaText is fully active, so every visitor from every traffic source sees optimized, intent-matched copy. Monitor your SeaText dashboard for conversion data and bot traffic (the Bot Protection Agent can help you recover up to 20% of ad spend lost to fake clicks during your launch).

Hypothetical Scenario: Launch Week With vs. Without SeaText

Imagine you’re launching a $200 freelance writing course, and you’ve budgeted $1,000 for Google Ads to drive sign-ups during your 5-day launch window.

Without SeaText installed pre-launch: All ad clicks land on your generic landing page that says “Learn to freelance from home.” You get 200 clicks, 10 sign-ups (5% conversion rate), and spend $50 per lead. 20% of your clicks are from bots, so you waste $200 on invalid traffic with no way to request a refund.

With SeaText installed 10 days pre-launch: You’ve activated the Google Ads Landing Page Agent and AI A/B Testing Agent. When a user searches “freelance writing course for beginners,” they see a headline that says “Beginner Freelance Writing Course: Land Your First Client in 30 Days.” When a user searches “how to make money writing from home,” they see a headline that says “Make Money Writing From Home: Step-by-Step Course for New Writers.” You get 200 clicks, 26 sign-ups (13% conversion rate, a 35% lift per SeaText’s tested performance), and spend $38 per lead. The Bot Protection Agent flags 40 bot clicks, so you can submit a refund request to Google for $80, bringing your actual cost per lead down to $35. You also gain 5 extra sign-ups from international learners who found your translated Spanish landing page via organic search.

Key Facts About SeaText Course Launch Integration

Common Limitations and Exceptions

SeaText’s integration works for nearly all standard course platforms, but there are a few edge cases to note:

• If your course platform blocks custom JavaScript code in the site footer, you may need to use a custom integration or wait until you have developer support to add the code.
• SeaText’s AI variants are generated based on the copy you have live on your page at the time of activation. If you make major changes to your landing page copy after activating SeaText, you’ll need to regenerate variants to match the new content.
• The 35% conversion lift and 20% ad spend recovery figures are tested across 2,500+ brands, but individual results will vary based on your traffic quality, ad copy, and course offer.

Frequently Asked Questions

Can I add SeaText after my course launch has already started?

Yes, you can install SeaText at any point during your launch, but you’ll miss the chance to optimize copy for your initial high-traffic promotional window. If you install it mid-launch, test your variants immediately to capture as much of the remaining traffic as possible.

Do I need technical skills to install SeaText for my course site?

No. For platforms like Thinkific, you only need to copy a pre-provided JavaScript code snippet and paste it into your site’s footer code field, a process that takes under 1 minute with no coding experience required.

Will SeaText change my core course content or checkout flow?

No. SeaText only optimizes the public-facing copy on your course landing page, including headlines, offer descriptions, and CTAs. It does not alter your course videos, lesson content, or checkout process unless you explicitly choose to activate personalization for those pages.

How much does SeaText cost for course creators?

SeaText offers tiered pricing based on your monthly traffic and the agents you activate. You can view full pricing details on the SeaText pricing page, and a free 1-month pilot trial is available for new users.

Can I use SeaText to personalize copy for different course audience segments?

Yes. The AI Personalization Agent and Visitor Source Rewrite Agent let you tailor copy to specific traffic sources (e.g., email subscribers vs. TikTok ad clicks) or visitor context, so you can speak directly to different audience segments without building multiple landing pages.

Browsers enforce the same-origin policy to prevent malicious cross-site requests. When your single-page application runs on multiple domains — for example, app.example.com, shop.example.com, and dashboard.example.com — each domain is a distinct origin. SeaText's JavaScript snippet loads from SeaText's CDN domain. If the CDN response does not include an Access-Control-Allow-Origin header that matches the requesting domain, the browser blocks the request and logs a CORS error in the console.

fetch('https://cdn.seatext.com/your-snippet.js', {method: 'HEAD', mode: 'cors'})
  .then(r => console.log('Allow-Origin:', r.headers.get('access-control-allow-origin')))
  .catch(e => console.error('CORS error:', e));