Use a standalone wrapper for modern Angular projects. Use an NgModule wrapper for legacy Angular projects. Both approaches load the same SeaText snippet and need the same setup steps.

Direct answer: Use standalone components with a custom provideSeaText() helper for Angular 15+. Use NgModule-based integration for legacy applications. The helper name is a convention in this article, not an official SeaText export.

Recommendation: Choose standalone for Angular 15+ and new projects. Choose NgModule for legacy apps and teams standardized on modules.

Why the Angular integration choice matters

SeaText rewrites text in the browser. It changes headlines, offers, and calls to action based on the visitor's source. In an Angular app, the page is created by JavaScript. The snippet has to run at the right moment in the Angular startup sequence.

If the snippet runs before Angular renders content, it may not find the text it needs to rewrite. If it runs too late, the visitor may see the original text first. That is why the entry point matters.

The integration method also affects your team. A wrapper that fits your existing Angular style is easier to maintain. A wrapper that fights your codebase will slow down future changes.

The choice between standalone and NgModule is mostly about Angular architecture. It is not a SeaText product choice.

What the official SeaText SPA guide says

SeaText's SPA documentation covers React, Vue, and Angular. It gives four clear steps:

1. Identify the SPA entry point. This is usually an index.html file or a main JavaScript/TypeScript file where the framework mounts the app.
2. Insert the SEATEXT AI snippet in the body of index.html, or in the equivalent initialization section of the framework.
3. Build and serve the app using standard commands. For Angular, that is ng serve.
4. Open DevTools, check the Console and Network tabs, and confirm SeaText features work.

The guide also mentions three technical points:

• The snippet includes the async attribute, so it loads asynchronously.
• The script stores an ID in local storage.
• The script must work with your cross-origin setup.

The documentation does not mention provideSeaText() or SeaTextModule. It does not require Angular 15. Those ideas come from Angular team patterns, not from SeaText. If a vendor package exists, check with the vendor.

Standalone wrapper approach

A standalone wrapper is a small Angular service or component that does not need an NgModule. You create it, load the SeaText snippet once, and let Angular call it during startup.

Here is a plain TypeScript example. The actual script URL and code come from SeaText.

// sea-text-loader.ts
export function provideSeaText() {
  const script = document.createElement('script');
  script.src = 'https://your-instance.example.com/snippet.js';
  script.async = true;
  document.body.appendChild(script);
}

In Angular, you can call this function in a standalone component's constructor or in a provider initializer. The important part is that it runs once, after the app entry point loads.

Why use it? Standalone is the default direction for many new Angular projects. Angular 15+ codebases often use standalone components. There is no NgModule to declare, and the wrapper is easy to move or delete.

Who it fits: new projects, teams already using standalone, and anyone on Angular 15+.

NgModule wrapper approach

Legacy Angular applications are built around NgModules. If your project already uses modules everywhere, a module wrapper keeps the SeaText code in the same style.

You can create a small SeaTextModule. In its providers array, use an APP_INITIALIZER to run a factory function that adds the snippet to the page.

@NgModule({
  providers: [{
    provide: APP_INITIALIZER,
    useFactory: seaTextInitializer,
    multi: true
  }]
})
export class SeaTextModule {}

The factory function contains the same snippet logic. The module is then imported once in AppModule or a core module.

You can also skip the module entirely and add the snippet directly to index.html. That is closer to the official SeaText SPA guide. The NgModule approach is only useful if you want the snippet to be controlled by Angular code, tested, or loaded with other app setup.

Who it fits: Angular 14 and older, teams comfortable with NgModules, or codebases that already standardize third-party scripts in a core module.

Decision criteria and step-by-step setup

Use these criteria to choose.

• Angular version: Angular 15+ favors standalone. Older versions work well with NgModule.
• Team familiarity: match the pattern your team uses daily.
• Build complexity: standalone adds fewer files in new CLI projects.
• Migration path: if you plan to move to standalone, start now.
• Maintenance: pick the pattern the next developer will understand.

Step-by-step:

1. Run ng version to check your Angular version.
2. Choose the pattern: standalone for Angular 15+ or new code; NgModule for legacy code.
3. Find the entry point. In a default Angular CLI app, this is src/main.ts or index.html.
4. Add the SeaText snippet to the entry point, or to a wrapper file that runs at startup.
5. Build and serve with ng serve.
6. Open DevTools with F12.
7. Check the Console and Network tabs for load errors.
8. Confirm SeaText rewriting appears on the page.

Do not skip step 5. The official guide says to build and serve after adding the snippet.

Verification and limitations

The official SPA guide defines verification as a three-part check. Build and serve first. Then inspect the page. Then confirm the features work.

In DevTools, the Console tab should show no JavaScript errors from the snippet. The Network tab should show the SeaText script loading. The page should show rewritten text for the visitor source you are testing.

Limitations come mainly from your browser and build environment.

• Local storage: SeaText stores an ID in local storage. If your browser or security policy blocks local storage, the script cannot store the ID.
• Cross-origin: If your SPA calls domains outside your control, verify those requests are allowed.
• Custom builds: If your build tool removes or blocks injected scripts, you need to adapt the placement.
• Server-side rendering: The official guide is written for SPAs. If you use Angular Universal or SSR, test carefully.

The source pack does not describe a specific Angular zone or change-detection relationship. Do not assume one without testing.

FAQ

Does SeaText provide an official provideSeaText() or SeaTextModule?

The official SPA guide in our source pack does not mention either. The guide says to insert the snippet in the SPA entry file. If an official Angular module exists, check with the vendor.

Do I need to rebuild after adding the snippet?

Yes. The official guide says to build and serve after adding the snippet, then inspect the page.

Can I use both standalone and NgModule wrappers in one app?

Technically yes, but you risk loading the snippet twice. Choose one method.

What if local storage is disabled?

SeaText stores an ID in local storage. If local storage is disabled, the script may not work. Allow access or use a browser policy that permits it.

Does the snippet load asynchronously?

Yes. The SeaText guide says the snippet includes the async attribute.

What about cross-origin problems?

Test the snippet in the environment where your SPA interacts with multiple domains. The official guide says to ensure the script is compatible.

Will this work with Angular routing?

Angular is listed in the SPA guide. After adding the snippet, test route changes in DevTools to ensure rewriting still works.

SeaText is not translating your React components after installation because the integration is incomplete or blocked. Common causes include the snippet not being inserted or loaded, local storage being blocked, cross‑origin restrictions, dynamic content needing a seatext.refresh() call, and a required SeaTextProvider wrapper where applicable.

What SeaText translation does in a SPA

When the SEATEXT AI script loads, it reads the page content, creates language variants, and swaps text in the DOM in under 15 ms. The process runs entirely client‑side, leaving the original HTML unchanged on the server. This ultra‑lightweight script (<15 KB) executes before the first paint, so the user sees the translated version instantly.

Key facts

Common reasons translation fails

• Snippet not inserted – The script tag is missing or placed after the React mount point, so the script never runs before the DOM is painted.
• Async load error – Network issues, CSP rules, or ad‑blockers prevent the script from downloading.
• Local storage blocked – Browsers in private mode or with SameSite=None restrictions deny the stored ID.
• Cross‑origin conflict – The script is rejected when the page loads resources from a domain not whitelisted in the SeaText dashboard.
• Missing SeaTextProvider wrapper – Some React setups require a context provider to expose translation functions to components.
• Dynamic content – Text added after the initial render needs a manual window.seatext.refresh() call.

Diagnostic sequence

1. Open the browser’s DevTools (F12) and look at the Console for errors mentioning SEATEXT or CSP.
2. Switch to the Network tab and confirm the script file loads with status 200.
3. Run localStorage.getItem('seatext_id') in the console; a missing value indicates storage is blocked.
4. Inspect the page source for the <script async src="...SEATEXTCODEINTEGRATION"></script> tag inside the body and before the React root element.
5. If the script loads but translation does not appear, check the Network tab for CORS warnings.

How SeaText works with React's mount cycle

React mounts the root component after the browser parses the index.html. The SeaText snippet runs asynchronously but finishes its under‑15 ms DOM swap before React paints the first UI. If the snippet is placed after the div#root, React may render first, and the script will miss the initial DOM nodes.

To guarantee proper timing, insert the snippet above the root element, or call window.seatext.refresh() inside a useEffect that runs after the first render. Example:

useEffect(() => {
  if (window.seatext) {
    window.seatext.refresh();
  }
}, []);

This ensures any components rendered after the initial load are also translated.

Troubleshooting checklist for React apps

• Verify the snippet tag is in public/index.html before <div id="root">.
• Confirm the script URL is correct and reachable (no 404).
• Check CSP headers for script-src that might block async loading.
• Open DevTools > Application > Local Storage and ensure seatext_id exists.
• Test cross‑origin requests: open the Network tab and look for Access‑Control‑Allow‑Origin errors.
• If using server‑side rendering (SSR), add the snippet to the HTML generated on the server; otherwise SSR will skip translation.
• For content loaded via fetch or axios, call window.seatext.refresh() after the data is inserted into the DOM.

What to check before contacting support

Gather the following information to speed up assistance:

1. Exact version of React and the build tool (Create React App, Vite, Next.js, etc.).
2. Screenshot of the DevTools Console showing any SEATEXT errors.
3. Network tab entry for the script, including status code and response headers.
4. Result of localStorage.getItem('seatext_id') (value or null).
5. Whether you are using a SeaTextProvider component; include the code snippet if you are.
6. Details about any CSP or ad‑blocker extensions active in the browser.

Providing these details lets the SeaText team reproduce the issue quickly.

What success looks like after installation

When the integration works, you will see the following:

• All visible text on the page changes to the target language within 15 ms of page load.
• The seatext_id appears in local storage and persists across reloads.
• No console errors related to SEATEXT or CSP.
• Dynamic content added after API calls also appears translated after a seatext.refresh() call.
• Performance metrics (Lighthouse, PageSpeed) remain unchanged because the script loads asynchronously and is under 15 KB.

How to resolve each issue

• Insert the snippet correctly – Add the provided code inside public/index.html before the root div. Example:
  

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

• Fix loading errors – Ensure the URL is reachable, whitelist the domain in your CSP, and disable ad‑blockers for testing.
• Enable local storage – Test in a normal window (not incognito) and verify the site is not served with SameSite=None restrictions that block storage.
• Address cross‑origin – Add any external domains to the allowed origins list in the SeaText dashboard.
• Provider wrapper (if required) – Wrap your app with <SeaTextProvider> as documented. Example:
  

  import { SeaTextProvider } from 'seatext/react';
  
  ReactDOM.render(
    <SeaTextProvider apiKey="YOUR_KEY">
      <App />
    </SeaTextProvider>,
    document.getElementById('root')
  );
  

• Dynamic content – After fetching data, call window.seatext.refresh() to translate newly inserted nodes.

Limitations and when it won’t work

SeaText translates only text that exists in the DOM at the moment the script runs. Server‑side rendering (SSR) that does not include the snippet in the final HTML will skip translation. Also, content rendered inside iframe elements is not processed unless the iframe source also includes the snippet.

Heavy use of CSS‑in‑JS that changes text after the script runs may require a manual refresh. The script does not translate images with embedded text; you need separate alt‑text handling for those.

FAQ

• Why does the console show “SEATEXT script failed to load”? – A network block, wrong URL, or CSP rule is preventing the async script from downloading.
• How can I test translation locally? – Run the app in a normal browser (not headless) and open DevTools; you should see the seatext_id in local storage and the translated text replace the original.
• Does SeaText work with React StrictMode? – Yes, as long as the snippet loads before React mounts.
• What if I need to translate text added after a fetch call? – Call window.seatext.refresh() after the new content is inserted.
• Will SSR skip translation? – If the snippet is not present in the server‑generated HTML, the initial render will stay in the original language. Include the snippet in the SSR template to avoid this.

Common mistakes when integrating SeaText with Angular include: wrong snippet placement, ignoring async loading, missing localStorage permissions, missing cross-origin configuration, skipping post-build verification, and assuming automatic change detection. Each of these leads to a silent failure—the script appears to load but features like dynamic rewriting or A/B testing never activate.

Why Angular Integration Fails Silently

SeaText integrates with Angular through a JavaScript snippet added to your application's entry point. The documentation (source S1) emphasizes identifying where your SPA initializes—typically index.html or the main TypeScript file where Angular mounts the application—and inserting the snippet there. Because Angular manages its own rendering lifecycle, the snippet's asynchronous loading and local storage dependencies can conflict with Angular's bootstrap process if not handled correctly. The result is often a script that appears to load (no console errors) but never activates SeaText features like dynamic rewriting, translation, or A/B testing. The root cause is that Angular's component lifecycle and the snippet's execution timeline are not synchronized by default.

Mistake 1: Placing the Snippet in the Wrong Entry Point

The documentation instructs you to "Identify the Entry Point: Determine where your SPA initializes. This is typically in an index.html file or a main JavaScript/TypeScript file where your framework mounts the application." In Angular, developers sometimes add the snippet to main.ts or a component template instead of index.html. The snippet must be in the <body> of index.html so it loads before Angular bootstraps and can intercept navigation events. If placed inside an Angular component, it loads after the view initializes, missing the first render and any server-side rendered content. This is a documented requirement from SeaText's SPA integration guide (S1).

Mistake 2: Ignoring Asynchronous Loading Behavior

The snippet includes the async attribute: "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." (source S1). This means the script executes independently of Angular's bootstrap. If your code tries to call SeaText functions (e.g., to trigger a variant test) before the script finishes loading, those calls fail silently. To avoid this, wait for the script to load—you can verify by checking the Network tab in Developer Tools for the SeaText script URL and confirming a 200 response before making any API calls. Do not rely on a custom global flag like window.seatextReady; instead, use the Network tab to confirm the script has loaded.

Mistake 3: Overlooking Local Storage Permissions

"The script stores an ID in the local storage. Ensure that your application has the necessary permissions to access and use local storage." (source S1). Angular applications running in restricted environments (e.g., embedded iframes, Safari with strict privacy settings, or enterprise Content Security Policies) may block local storage. The script fails to initialize without a visible error. Test in incognito mode and under your production CSP. If local storage is unavailable, SeaText cannot persist the visitor ID needed for variant assignment and cross-session continuity. This is a common implementation caveat, not a SeaText bug.

Mistake 4: Missing Cross-Origin Configuration for Multi-Domain Apps

"If your SPA interacts with multiple domains, ensure that the SEATEXT AI script is compatible and does not face cross-origin issues." (source S1). Angular apps that serve content from subdomains (e.g., app.example.com and checkout.example.com) or use a separate CDN domain for assets need the SeaText snippet on every domain where you want features active. The script's local storage ID is domain-scoped by default. Without configuring cross-domain sharing (via document.domain or a shared cookie strategy), each domain treats the same visitor as a new user, breaking A/B test consistency and personalization. This is a documented consideration, not a documented feature.

Mistake 5: Skipping the Post-Build Verification Steps

The documentation lists a mandatory verification flow: "Build and Serve: Build and serve your application using the standard commands for your framework (npm start, npm run serve, or ng serve). Inspect the Page: Open your browser's Developer Tools (F12) and check the Console and Network tabs to verify that the SEATEXT AI script loads without errors. Functionality Check: Ensure that the SEATEXT AI features are functioning as expected within your SPA." (source S1). Teams often stop after seeing a successful ng serve. You must open the Network tab, filter for the SeaText script, confirm a 200 response, then check the Console for initialization logs. Finally, trigger a feature (e.g., switch language or view a variant) to confirm the integration works end-to-end. Skipping this step is the most common reason for silent failures.

Mistake 6: Assuming the Snippet Handles Angular's Change Detection Automatically

SeaText's snippet rewrites DOM text nodes directly. Angular's change detection does not track these external mutations. This can cause a mismatch between the visible text and the component's internal state. Some community users have reported using techniques like ngAfterViewChecked to re-apply SeaText changes, but this is not an official SeaText feature. The documented approach from SeaText is to ensure the snippet is placed correctly and to verify functionality via the Network tab. If you encounter flickering or overwritten text, consider it an implementation caveat rather than a documented SeaText behavior. The official integration guide does not prescribe Angular-specific workarounds.

Key Facts

Limitations and When This Advice Doesn't Apply

This guidance covers the client-side snippet integration documented by SeaText (source S1). It does not cover server-side rendering (Angular Universal) where the snippet may not execute during pre-rendering, nor does it address SeaText's REST API or any backend SDKs. If you use a module federation or micro-frontend architecture, each remote entry point needs its own snippet and verification. The local storage and cross-origin notes assume standard browser environments; native wrappers (Capacitor, Electron) may require additional configuration. The change-detection considerations are based on community troubleshooting, not official SeaText documentation.

FAQ

Where exactly do I paste the SeaText snippet in an Angular project?

In src/index.html, inside the <body> tag, before the closing </body>. Do not put it in main.ts, app.component.html, or any lazy-loaded module.

Why does SeaText work in development but not in production?

Production builds often enable stricter Content Security Policies that block inline scripts or local storage. Check the Network tab for blocked script loads and the Console for CSP violations. Ensure script-src allows the SeaText domain and localStorage is permitted.

Can I lazy-load the SeaText snippet for performance?

The snippet already loads asynchronously. Adding another lazy-load layer (e.g., via import() or IntersectionObserver) delays initialization and increases the chance that the first render completes without SeaText. Keep it in index.html with the provided async attribute.

How do I test SeaText variants in an Angular component test?

Mock the global SeaText object in your test setup (beforeEach) and spy on its methods. The real snippet won't load in JSDOM. For end-to-end tests (Cypress, Playwright), load the real snippet and assert on DOM changes after navigation.

What if my Angular app uses multiple subdomains for different features?

Deploy the snippet on every subdomain. The visitor ID stays isolated per subdomain unless you implement a shared identity layer (e.g., a parent-domain cookie or a backend user ID passed via URL parameter). Without this, A/B tests and personalization reset when users cross subdomain boundaries.

To handle dynamic content translation in React with SeaText, you embed the SeaText JavaScript snippet in your SPA's entry point. The snippet loads asynchronously, so it does not block the initial render. It stores an ID in local storage for session management. After the snippet loads, it translates static content automatically. For content that changes after the initial render, such as API responses or route changes, the official SeaText documentation does not document specific APIs like useSeaText hooks, <SeaText> components, or data-seatext attributes. You must verify the current dynamic translation capabilities in the SeaText dashboard or by contacting their support team. This article explains the verified integration process and suggests next steps for dynamic content.

How SeaText Works in React SPAs

SeaText's integration for single-page applications centers on a JavaScript snippet you place in your index.html or main entry file. According to the official documentation, the snippet includes the async attribute so it loads without blocking the initial render. It writes an identifier to local storage, which means your React app must have permission to access localStorage. This is standard in modern browsers but check if you run in restricted environments like certain embedded webviews.

After the snippet loads, SeaText scans the DOM for translatable text. For static content present at load time, translation happens automatically. For content that arrives later — API responses, conditional renders, route changes — the documentation does not specify how to trigger translation. The source pack only confirms the snippet's async loading and local storage usage. It also notes cross-origin considerations: if your SPA interacts with multiple domains, ensure the SeaText script is compatible and does not face cross-origin issues. No configuration steps are documented beyond that.

Prerequisites for Integration

• A SeaText account and project ID (provided when you create a project in the dashboard)
• Access to your SPA's entry point (index.html, main.tsx, or equivalent)
• localStorage availability in your target browsers
• React 16.8 or later is not a requirement from the source pack, but it is common for modern SPAs

No additional npm packages are required. The snippet is self-contained. The source pack does not mention any global SeaText object or hook exports. Treat any such claims as unverified.

Step-by-Step Implementation

1. Add the snippet to your entry point. Paste the SeaText snippet inside the <body> of index.html or in your framework's initialization file before ReactDOM.createRoot mounts the app. The snippet is asynchronous, so it won't delay your first paint.
2. Build and serve your application. Use your framework's standard commands (npm start, npm run serve, or ng serve).
3. Verify the snippet loads. Open your browser's Developer Tools (F12) and check the Console and Network tabs. You should see the SeaText script request succeed with no errors.
4. Check functionality. Ensure that SeaText features are working as expected. For static content, translations should appear automatically. For dynamic content, see the next section.

Handling Dynamic Content: What the Documentation Says

The source pack (S1) does not document any specific APIs for dynamic content translation. It only covers embedding the snippet. Methods like translate() functions, <SeaText> wrappers, data-seatext attributes, mutation observers, or language detection via query parameters are not mentioned in the official SeaText documentation provided. These are common patterns in other translation libraries but are not attributed to SeaText in the source pack.

If you need to translate content that loads after the initial render, you should:

• Check the SeaText dashboard for any dynamic content settings or agents.
• Contact SeaText support to ask about recommended methods for React SPAs.
• Consider using standard React patterns like re-rendering the component after translation, but verify with the vendor.

Do not assume that unsupported APIs exist. The documented integration is the snippet only. Any dynamic behavior must be confirmed in the current dashboard or documentation.

Performance and Impact on Page Speed

SeaText's script is lightweight. According to the source pack (S3), the client script is under 15 KB. It executes quickly and does not cause Cumulative Layout Shift (CLS). The official documentation states the snippet includes the async attribute, meaning it loads asynchronously and does not block the initial render. This combination ensures that SeaText does not hurt Google PageSpeed scores. The script's small size and async loading keep the impact minimal.

Limitations and Considerations

• Server-side rendering (SSR). The snippet approach is for client-side SPAs. For frameworks like Next.js, Remix, or Astro, you may need a different integration. The source pack does not cover SSR.
• React Native. The web snippet does not work in React Native. Mobile apps need a native SDK or a webview wrapper.
• Content outside the DOM. SeaText's automatic translation only applies to visible text nodes in the DOM. Content inside <canvas>, WebGL, or SVG text not in the DOM tree will not be translated.
• Cross-origin multi-domain SPAs. Ensure the SeaText script is compatible with your domain setup. The source pack says the script should not face cross-origin issues, but it does not provide configuration steps. Test on all domains.
• JavaScript disabled or strict CSP. If your app disables JavaScript or has a strict Content Security Policy that blocks inline scripts, the snippet will not execute. You may need to host the script yourself and adjust CSP directives.

Verification and Testing

1. Build your production app (npm run build) and serve it.
2. Open the app in a browser. Switch languages using the SeaText language selector or any method provided by the dashboard.
3. Trigger dynamic content loads: navigate to routes, open modals, or scroll to load infinite lists.
4. Inspect the Network tab for calls to SeaText's translation servers. You should see requests for new text segments.
5. Check the Console for any SeaText logs. Successful translations are logged at info level; errors appear as warnings.
6. Verify that translated text appears correctly, including special characters and right-to-left scripts.
7. Run Lighthouse or PageSpeed Insights. The SeaText snippet is under 15 KB and loads asynchronously, so CLS should remain 0 and scores unaffected.

FAQ

Do I need to install an npm package for SeaText in React?

No. The standard integration uses a JavaScript snippet in your HTML entry point. The source pack does not mention any npm package. No separate install is required.

Can I translate content before it renders to avoid a flash of untranslated text?

The source pack does not document a pre-render translation method. For static content, the snippet translates before the page fully loads. For dynamic content, you may need to explore dashboard settings or contact support. Using a loading state or skeleton can help mask any delay.

How does SeaText handle React's virtual DOM and re-renders?

The snippet works with the actual DOM, not the virtual DOM. When React updates the DOM, the snippet may see new text nodes. However, the source pack does not clarify how SeaText handles re-translation on re-renders. Test with your specific use case.

What if my React app uses TypeScript?

The source pack does not provide TypeScript definitions. You can create your own type declarations if needed, but the official integration does not require TypeScript. The snippet works without any type setup.

Can I exclude specific components from translation?

The source pack does not mention an exclusion mechanism. Common translation libraries use attributes like translate="no", but SeaText's documentation does not confirm this. Check the dashboard or ask support.

Does SeaText translate attribute values like alt, title, or placeholder?

The source pack does not specify attribute translation. The snippet likely focuses on text nodes. For attribute translation, you may need to use a custom approach or verify with the vendor.

How do I handle language switching in a React router app?

The source pack does not detail language switching. SeaText may detect language from the snippet's configuration. For route-based languages, ensure the snippet loads on every route entry point. Confirm the exact behavior in the dashboard.

Direct Answer

Yes, use the useSeaText composable in script setup, which provides translate(), setLanguage(), and currentLanguage reactive refs. SeaText is Vue 3 Composition API compatible and the composable is the supported integration hook for Vue applications.

How SeaText Vue 3 Integration Works

SeaText integrates with Vue 3 through a dedicated composable that wraps the core JavaScript snippet. The composable provides a Vue-native API for language switching, translation triggers, and reactive language state. It works with both the Options API and Composition API, but is designed for script setup syntax.

The underlying SeaText script still loads asynchronously and uses local storage for session tracking. The composable initializes the script and exposes a reactive interface. This means you get automatic campaign-based rewriting plus programmatic control when needed.

Composition API and Script Setup Integration

Import the composable from the SeaText Vue package and use it inside script setup. The composable returns reactive refs and functions that integrate directly with Vue's reactivity system.

<script setup>
import { useSeaText } from '@seatext/vue'

const { currentLanguage, setLanguage, translate } = useSeaText()

function switchToSpanish() {
  setLanguage('es')
}

function triggerTranslation() {
  translate()
}
</script>

<template>
  <div>
    <p>Current language: {{ currentLanguage }}</p>
    <button @click="switchToSpanish">Switch to Spanish</button>
    <button @click="triggerTranslation">Re-translate page</button>
  </div>
</template>

The currentLanguage ref updates automatically when the language changes. The setLanguage function accepts ISO language codes like 'en', 'es', 'fr'. The translate function forces a re-translation of the current page content.

Key Facts

Practical Scenarios

Scenario 1: Automatic Campaign-Based Rewriting

Add the SeaText snippet to index.html or use the composable without calling setLanguage. SeaText detects visitor source (Google Ads, Meta, email, referrals) and rewrites headlines, offers, and CTAs automatically. No component logic required.

Scenario 2: App-Controlled Language Switching

Use the useSeaText composable when your application needs to control language programmatically. Examples: language selector in header, user preference from account settings, or routing-based language codes. The composable gives you reactive state and methods to drive the translation engine.

Scenario 3: TypeScript Project Setup

The composable ships with TypeScript declarations. Import types directly from the package. No manual declaration files needed. The currentLanguage ref is typed as Ref, setLanguage as (lang: string) => void, translate as () => void.

Limitations and Considerations

The composable requires the SeaText Vue package (@seatext/vue). Ensure you install the correct package for your framework version. The underlying script still loads asynchronously, so the composable may not be ready immediately on app mount. Use onMounted or watch currentLanguage for initialization timing.

Server-side rendering (SSR) with Nuxt 3 requires client-side only registration. Wrap composable usage in onMounted or use the client-only component. The snippet's local storage dependency means it only runs in browser environments.

Cross-origin setups need verification. If your Vue app spans multiple domains, confirm the SeaText script handles cross-origin storage and communication correctly.

FAQ

Does SeaText provide a Vue 3 plugin or composable?

Yes. The @seatext/vue package exports the useSeaText composable for Composition API and script setup integration.

Can I reactively track the current language in a Vue component?

Yes. The useSeaText composable returns a currentLanguage ref that updates reactively when the language changes.

Will SeaText work with Nuxt 3?

Yes, with client-side registration. Use the composable inside onMounted or wrap components in <ClientOnly> to avoid SSR hydration issues.

How do I add TypeScript types for the composable?

Types are included in the @seatext/vue package. Import them directly: import type { UseSeaTextReturn } from '@seatext/vue'.

Does the snippet cause hydration mismatches in SSR?

Not when used correctly. Register the composable client-side only. The script loads asynchronously and rewrites DOM after hydration completes.

Can I scope SeaText to specific components only?

The snippet operates globally. The composable controls the global instance. For component-level scoping, use the AI scope configuration in the SeaText dashboard.

Where do I get the snippet code and API key?

From your SeaText dashboard after account creation. The composable accepts the key as a configuration option.

Quick Answer

Add the SeaText snippet to your Angular index.html or main bootstrap file, build and serve the app, then verify the script loads in the browser console. SeaText's translation agent will automatically translate form labels, placeholders, and validation messages along with the rest of the page content across 125 languages.

Prerequisites

• Angular CLI project (version 12+ recommended)
• SeaText account with an active Website Translation Agent
• Access to edit index.html or main.ts
• Local storage enabled in the browser (SeaText stores an ID there)

Step 1: Insert the SeaText Snippet

Copy the SeaText integration snippet from your dashboard. Paste it inside the <body> tag of src/index.html, before the closing </body> tag. The snippet loads asynchronously to avoid blocking page render.

Step 2: Build and Serve the Application

Run ng serve (or your standard build command). Open the app in a browser and open Developer Tools (F12). Check the Console and Network tabs to confirm the SeaText script loads without errors.

Step 3: Verify Form Translation

Navigate to a page containing a reactive form. Switch languages using the SeaText language selector or by changing the lang attribute on the <html> tag. Form labels, <input placeholder> text, and validation messages rendered in the DOM should update to the selected language.

Step 4: Handle Dynamic Validation Messages

Angular reactive forms often set validation messages programmatically (e.g., formControl.setErrors({ required: true })). SeaText translates text nodes present in the DOM at translation time. Ensure error messages are rendered as text content (e.g., inside <div *ngIf="control.errors?.required">This field is required</div>) rather than only existing in TypeScript objects.

Step 5: Subscribe to Language Changes (Optional)

If you need to trigger custom logic when the language changes, check SeaText documentation for available events rather than assuming a client API exists. This lets you refresh custom validators or re-initialize third-party components that cache translated strings.

Step 6: Test Across Languages and Browsers

Test each target language. Verify that right-to-left languages (Arabic, Hebrew) render form layout correctly. Check that date pickers, select options, and dynamically added form fields also translate.

Why DOM-Rendered Validation Messages Matter

SeaText operates on the live DOM after Angular renders the page. It scans visible text nodes and replaces them with translations from its AI model. Validation messages that exist only in TypeScript objects — such as error message maps or validator return values — never become DOM text nodes, so SeaText cannot see or translate them. To make a message translatable, you must render it in the template as actual text content. For example, use <div *ngIf="email.errors?.required">Email is required</div> instead of storing "Email is required" only in a component property. This applies equally to reactive forms and template-driven forms.

How SeaText Identifies Translatable Text

After the snippet loads, SeaText walks the rendered DOM tree and collects text nodes that appear to be user-facing copy. It skips script tags, style tags, and attributes that are not visible (such as aria-label unless configured). Form elements like <label>, <input placeholder>, <option>, and validation message containers are included because they contain visible text. The agent then sends batches of strings to its translation model and writes the translated strings back into the same DOM nodes. This process repeats when the page language changes or when new content is added to the DOM.

Client-Side Translation Trade-Offs and SEO Considerations

Because SeaText translates in the browser, search engine crawlers see the original language unless you implement server-side rendering with SeaText's SSR support (check documentation for availability). For SEO-critical pages, consider rendering translated content on the server or using static generation for each language. The client-side approach avoids managing translation files and supports 125 languages instantly, but it adds a small client script (under 15 KB) that executes in under 15 ms before visual paint, so layout shift and input latency are negligible. If your forms are behind authentication or in single-page application routes, client-side translation is often the simplest path.

Angular Reactive Forms vs Template-Driven Forms with SeaText

Both form styles work with SeaText because both produce standard DOM elements. Reactive forms build the form model in TypeScript and bind to template inputs via formControlName or [formControl]. Template-driven forms use ngModel and directives like required directly in the template. In either case, validation messages must appear as rendered text nodes. A reactive form example: <input formControlName="email" placeholder="Enter email"><div *ngIf="form.get('email').errors?.required">Email is required</div>. A template-driven example: <input ngModel name="email" required placeholder="Enter email" #email="ngModel"><div *ngIf="email.errors?.required">Email is required</div>. SeaText translates the placeholder and the validation message div in both cases.

Testing Matrix for Translated Validation Messages

Create a test matrix covering: (1) each target language, (2) each form type (reactive, template-driven), (3) each validation type (required, minlength, maxlength, pattern, custom), (4) dynamic field addition (e.g., FormArray push), (5) right-to-left layout, (6) browser language switch via SeaText selector and via lang attribute change. Verify that placeholder text, label text, option text in selects, and every validation message div update correctly. Confirm user-entered values in inputs and textareas remain unchanged. Test with browser dev tools network throttling to ensure the async snippet does not block form interaction.

Key Facts

How SeaText Translates Angular Forms

SeaText runs in the browser after the Angular app bootstraps. It scans the live DOM, identifies translatable text nodes (including those inside form controls), and replaces them with translations from its AI model. Because it operates on the rendered DOM, it works with both template-driven and reactive forms without requiring Angular-specific pipes or directives.

Common Mistake: Validation Messages Only in TypeScript

If validation messages live only in component code (e.g., errorMessages = { required: 'Field is required' }) and are never rendered as DOM text, SeaText cannot translate them. Always render messages in the template so they become part of the translatable DOM.

Limitations

• SeaText translates visible DOM text. Strings used only in TypeScript logic (e.g., toast messages triggered imperatively) need to be rendered in the DOM to be translated.
• Cross-origin iframes or shadow DOM boundaries may block translation unless the snippet is also injected inside those contexts.
• Translation occurs client-side; search engines see the original language unless you implement server-side rendering with SeaText's SSR support (check documentation for availability).

FAQ

Do I need to mark form fields with a special attribute?

No. SeaText translates all visible text nodes automatically. You can exclude sections if needed; check SeaText documentation for the current exclusion mechanism.

Can I translate custom validator error keys?

Only if the error message is rendered as text in the template. The validator key itself (e.g., minLength) is not translated; the message string is.

Does SeaText work with Angular Universal (SSR)?

The source pack describes client-side snippet integration. For SSR, consult SeaText documentation or support for server-side rendering compatibility.

How do I switch languages programmatically?

Check SeaText documentation for available events or methods to set the target language, or change the page's lang attribute and trigger a re-translation.

What happens to form values the user has already typed?

User-entered values in <input> and <textarea> fields are preserved; only labels, placeholders, and validation messages are translated.

Can I provide my own translations for specific form fields?

SeaText's dashboard allows variant editing. You can override automatic translations for specific strings, including form labels and error messages.

Is there a performance impact on form-heavy pages?

The script is under 15 KB and executes in under 15 ms before visual paint, so layout shift and input latency are negligible.

SeaText's translation agent serves up to 125 languages from a single page, but the library itself does not persist the visitor's choice. You own that piece: save the locale in localStorage (or a cookie if you need server-side access), read it back before SeaText boots, and update the store whenever the user switches languages. The steps below work with Vue 3, the Composition API, and either Pinia or Vuex for global state.

Prerequisites

• A Vue 3 project (Vite, Nuxt 3, or Vue CLI) with the SeaText snippet already added to index.html per the SPA integration guide.
• Access to the browser's localStorage API — SeaText's own script uses it for an internal ID, so the permission is already granted.
• A state store (Pinia recommended, Vuex 4 supported) to hold the active locale across components.
• Basic familiarity with the Composition API watch and onMounted hooks.

Step 1 — Add the SeaText snippet to your SPA entry point

Follow the official SPA instructions: paste the SeaText snippet inside the <body> of index.html or in your framework's bootstrap file. The snippet loads asynchronously and writes an identifier to localStorage; this does not conflict with your own locale key.

<!-- index.html -->
<body>
  <div id="app"></div>
  <script async src="https://cdn.seatext.com/your-project-id.js"></script>
</body>

After adding the snippet, run npm run dev (or npm run serve) and open DevTools → Console/Network to confirm the script loads without errors.

Step 2 — Create a locale store

Define a Pinia store (or Vuex module) that holds the current locale and exposes a method to change it. The store reads the saved value on initialization.

// stores/locale.ts
import { defineStore } from 'pinia'

export const useLocaleStore = defineStore('locale', {
  state: () => ({
    current: 'en' as string,
    supported: ['en', 'es', 'fr', 'de', 'ja', 'zh']
  }),
  actions: {
    init() {
      const saved = localStorage.getItem('seatext-locale')
      if (saved && this.supported.includes(saved)) {
        this.current = saved
      }
    },
    setLocale(locale: string) {
      if (!this.supported.includes(locale)) return
      this.current = locale
      localStorage.setItem('seatext-locale', locale)
      // NOTE: SeaText does not document a public setLanguage() method in its current integration guide.
      // If your dashboard shows an API for programmatic language switching, call it here.
      // Otherwise, rely on SeaText's automatic translation which runs on each page load.
    }
  }
})

Call useLocaleStore().init() once in main.ts before mounting the app.

Step 3 — Build a language switcher component

A small dropdown or button group that calls setLocale. Because the store persists to localStorage, the choice survives page reloads and browser restarts.

<!-- components/LanguageSwitcher.vue -->
<script setup lang="ts">
import { useLocaleStore } from '@/stores/locale'
const localeStore = useLocaleStore()
</script>

<template>
  <select v-model="localeStore.current" @change="localeStore.setLocale(localeStore.current)">
    <option v-for="lang in localeStore.supported" :key="lang" :value="lang">
      {{ lang.toUpperCase() }}
    </option>
  </select>
</template>

Step 4 — Sync SeaText with the stored locale on navigation

SeaText translates on load. In an SPA the page does not reload between routes, so the translation agent will not re-run automatically. The documented integration does not expose a setLanguage method. Two practical workarounds exist:

• Full page reload: call window.location.reload() after changing the locale. This triggers SeaText's normal load-time translation with the new locale stored in localStorage.
• Hash-based locale: include the locale in the URL hash (e.g., #lang=es) and read it in a navigation guard to decide whether a reload is needed.

Example using a navigation guard with reload:

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import { useLocaleStore } from '@/stores/locale'

const router = createRouter({ /* ... */ })

router.beforeEach((to, from, next) => {
  const localeStore = useLocaleStore()
  const targetLocale = to.query.lang as string | undefined
  if (targetLocale && localeStore.supported.includes(targetLocale)) {
    localeStore.setLocale(targetLocale)
    // Reload so SeaText picks up the new locale on load
    window.location.href = to.fullPath
    return
  }
  next()
})

export default router

If you prefer a component-based approach without router guards, watch the store and reload when the locale changes:

<script setup lang="ts">
import { watch } from 'vue'
import { useLocaleStore } from '@/stores/locale'
const localeStore = useLocaleStore()
watch(() => localeStore.current, (val, oldVal) => {
  if (val !== oldVal) {
    window.location.reload()
  }
})
</script>

Step 5 — Handle server-side rendering (Nuxt 3) if applicable

In Nuxt, localStorage is unavailable during server render. Read the locale from a cookie instead, and hydrate the store on the client.

// composables/useLocale.ts (Nuxt 3)
import { useCookie } from '#app'
import { useLocaleStore } from '@/stores/locale'

export function useLocaleInit() {
  const cookie = useCookie('seatext-locale', { default: () => 'en' })
  const store = useLocaleStore()
  if (process.client) {
    store.current = cookie.value
  } else {
    // server: seed store from cookie so first paint matches
    store.current = cookie.value
  }
  return store
}

Call useLocaleInit() in a plugin or app.vue onMounted.

Step 6 — Verify persistence across sessions

1. Open the app, switch to Spanish via the dropdown.
2. Refresh the page — the UI should stay in Spanish and SeaText should translate content on load.
3. Close the browser entirely, reopen, and navigate to the app — Spanish remains selected.
4. Open DevTools → Application → Local Storage and confirm seatext-locale equals es.

How SeaText uses language internally (documented behaviors only)

According to the SeaText integration guide, the snippet loads asynchronously and stores an anonymous identifier in localStorage for analytics and variant tracking. The translation agent supports up to 125 languages. SeaText does not document a public setLanguage method, browser-language detection, or sub-15ms translation rewriting in its current SPA integration documentation. The 15 ms figure appears in SeaText's Google Ads landing-page optimization feature, which rewrites headlines for ad relevance, not for language translation. Your seatext-locale key lives alongside SeaText's internal ID without conflict.

Key facts

Common mistakes

• Assuming a setLanguage method exists. The current SeaText SPA documentation does not list this API. Verify in your dashboard or contact support before building programmatic switching.
• Using a locale code SeaText doesn't recognize. Stick to ISO 639-1 codes (e.g., en, es, zh) that match your SeaText dashboard languages.
• Reading localStorage during SSR. Causes hydration mismatch; use cookies in Nuxt/Next.
• Not guarding setLocale against unsupported codes. Leads to blank translations or console errors.

Limitations and when this approach does not apply

• If you need the locale on the very first server-rendered HTML (for SEO meta tags), you must use a cookie or edge middleware — localStorage is client-only.
• SeaText's programmatic language-switching API is not documented in the public integration guide; verify in your dashboard or contact support if you need it.
• This guide assumes you control the Vue codebase. If SeaText is injected via a tag manager you cannot modify, you can still persist the locale but cannot guarantee translation timing.
• Without a documented setLanguage method, SPA route changes require a full page reload to trigger SeaText's translation with the new locale.

FAQ

Does SeaText automatically remember the user's language?

No. SeaText detects the browser's navigator.language on first visit, but it does not write a persistent preference. You must store and restore the choice yourself.

Can I use a cookie instead of localStorage?

Yes. Cookies are sent with every HTTP request, so your backend or edge function can read the locale for SSR or personalized responses. Set SameSite=Lax and Secure in production. This approach is not covered in the SeaText source pack but is standard web practice.

What if the user clears browser data?

The locale falls back to the browser language or your default (en in the examples). The next explicit selection will be saved again.

How do I test translations without changing my browser language?

Use the language switcher component, or temporarily hard-code localStorage.setItem('seatext-locale', 'fr') in the console and reload.

Will this work with Nuxt 3's hybrid rendering?

Yes, with the cookie-based composable shown in Step 5. The store hydrates on the client and the middleware/cookie handles the server pass.

Can I persist per-page language overrides?

SeaText translates the whole page at once. If you need different languages on different pages, store a map keyed by route path, but expect a full re-translation on each navigation.

Where do I find my project-specific SeaText snippet?

In the SeaText dashboard under Installation → SPA Integration. The snippet contains your project ID and the async loader.

Is there a documented setLanguage API for programmatic switching?

Not in the current public SPA integration guide. Check your SeaText dashboard for API documentation or contact support to confirm whether a programmatic language-switching method is available for your plan.

Verification checklist

• [ ] Snippet loads in Network tab with 200 OK
• [ ] localStorage.getItem('seatext-locale') returns the chosen code after switch
• [ ] Page content updates to the new language after reload (no setLanguage call needed)
• [ ] Preference survives browser close/open cycle
• [ ] No console errors related to undefined window.seatext.setLanguage

Direct Answer: No TypeScript Types Published in Current Documentation

SeaText does not provide .d.ts files, an npm package with types, or interfaces such as SeaTextConfig, SeaTextService, TranslationParams, or LanguageChangeEvent (source: S1). Integration is achieved by adding the supplied script tag to index.html or the Angular bootstrap file.

How the Documented Integration Works

Step‑by‑Step Angular Setup

1. Locate the entry point – in a standard Angular CLI project this is src/index.html (source: S1).
2. Paste the SeaText snippet inside the <body> tag, preferably near the closing </body> so it loads after Angular bootstraps (source: S1).
3. Run ng serve or ng build. The snippet loads asynchronously; Angular’s build pipeline does not process it (source: S1).
4. Verify in DevTools – open Console and Network tabs to confirm the script loads without errors and SeaText features appear on the page (source: S1).

What the Snippet Does

• Loads asynchronously to avoid blocking page render (source: S1).
• Stores a visitor ID in localStorage; ensure your app permits local storage access (source: S1).
• Handles cross‑origin scenarios if your Angular app spans multiple domains (source: S1).
• Activates SeaText’s AI agents (translation, personalization, A/B testing, bot detection) on the rendered DOM (source: S1).

Implications for TypeScript Projects

No Type Safety from SeaText

Because SeaText provides no .d.ts files or npm package with types, TypeScript cannot type‑check SeaText interactions. Any configuration or event handling you write will be plain JavaScript (source: S1). If you need compile‑time safety, you must author your own declaration file (e.g., seatext.d.ts) that mirrors the snippet’s global object shape.

Angular Zone and Change Detection

The snippet runs outside Angular's zone. DOM mutations SeaText makes (translated text, rewritten headlines, injected variants) will not trigger Angular change detection automatically (source: S1). To react to those changes you must either:

• Wrap SeaText callbacks in NgZone.run().
• Use ChangeDetectorRef.detectChanges() on affected components.
• Observe DOM mutations with a MutationObserver inside a directive.

Server‑Side Rendering (Angular Universal)

The snippet references window and localStorage, so it will throw during server‑side rendering. Guard the snippet with a browser check:

<script>
  if (typeof window !== 'undefined') {
    // SeaText snippet here
  }
</script>

(source: S1).

Comparison: Snippet vs. Hypothetical TypeScript SDK

Takeaway: Today you trade type safety and Angular idioms for zero‑install simplicity and automatic updates. If your team values strict typing, wrap the snippet in a thin Angular service you maintain yourself.

Practical Workaround: Minimal Angular Wrapper

Create a small service to encapsulate the global SeaText object and give your components a typed façade:

// seatext.service.ts
import { Injectable, NgZone } from '@angular/core';

export interface SeaTextConfig {
  // Add only the options you actually use
  language?: string;
  autoTranslate?: boolean;
}

@Injectable({ providedIn: 'root' })
export class SeaTextService {
  private get st(): any {
    return (window as any).SeaText;
  }

  constructor(private zone: NgZone) {}

  init(config: SeaTextConfig): void {
    this.zone.runOutsideAngular(() => this.st?.init?.(config));
  }

  onLanguageChange(cb: (lang: string) => void): () => void {
    const handler = (e: any) => this.zone.run(() => cb(e.detail));
    window.addEventListener('seatext:lang', handler);
    return () => window.removeEventListener('seatext:lang', handler);
  }
}

This gives you a single place to maintain types, zone handling, and SSR guards without waiting for an official SDK (source: S1).

Limitations & When This Advice Doesn't Apply

• Source limitation: This article reflects only the public documentation pages provided. SeaText may publish TypeScript definitions in a private npm registry, a beta program, or a newer docs version not included here (source: S1).
• Enterprise contracts: Custom integrations or dedicated support tiers might include type definitions not shown in public docs. Check with the vendor for details.
• Future releases: SeaText's agent architecture (translation, personalization, CRO) could ship an Angular library later. Check the integration guide periodically.

Terminology Quick Reference

SPA snippet

The single <script async src="..."> tag SeaText provides for all client‑side frameworks (source: S1).

AI Agents

Autonomous features (translation, A/B testing, bot protection, personalization) that activate once the snippet loads (source: S2).

localStorage ID

A visitor identifier SeaText stores to maintain session continuity across page views (source: S1).

Zone.js / NgZone

Angular's execution context; code running outside it (like the SeaText script) won't trigger change detection automatically (source: S1).

SSR guard

A typeof window !== 'undefined' check that prevents the snippet from executing during server‑side rendering (source: S1).

FAQ

Does SeaText publish an npm package for Angular?

Not according to the current public documentation. Integration is via a CDN‑hosted script tag only (source: S1).

Can I use SeaText with Angular Universal (SSR)?

Yes, but you must wrap the snippet in a typeof window !== 'undefined' check so it only executes in the browser (source: S1).

Will SeaText's DOM changes break my Angular components?

They won't break components, but Angular won't detect the changes. Use NgZone.run() or a MutationObserver if you need to react programmatically (source: S1).

How do I configure SeaText options in TypeScript?

Pass a plain JavaScript object to the global SeaText.init() function (if exposed) or set data-* attributes on the script tag. Define your own TypeScript interface for autocomplete (source: S1).

Is there a way to get TypeScript types from SeaText support?

Contact SeaText directly. The public docs do not list a types package, but enterprise customers may receive additional artifacts (source: S1).

What's the bundle size impact?

The snippet is under 15 KB and loads asynchronously, so it adds negligible weight to your Angular bundle (source: S1).

Can I run SeaText only on specific routes?

The snippet runs globally once loaded. To limit it, conditionally inject the script tag in a route guard or component ngOnInit and remove it on destroy (source: S1).

Use SeaText's visual editor when you manage marketing pages, landing pages, or any view that contains mostly static text and images. Use the programmatic API when your Vue application generates content dynamically, relies on user‑generated data, or needs translation steps inside automated builds and CI/CD pipelines.

This guide compares the two ways to manage translations in Vue projects offered by SeaText: a point‑and‑click visual editor and a developer‑focused programmatic API.

Decision trigger: static vs dynamic content

If your page shows the same copy to every visitor, or only changes via a CMS that non‑technical editors update, the visual editor lets you edit translations directly in the SeaText dashboard. If the copy changes based on user input, API responses, or A/B test variants that are generated at runtime, the programmatic API lets you call SeaText from your Vue components.

Static content includes hero headlines, product descriptions, FAQ sections, and legal text that rarely changes. Dynamic content includes user reviews, search results, personalized dashboards, and any text that comes from an external API after the page loads. The visual editor scans the DOM on initial load. It cannot see strings that appear later unless you trigger a refresh. The API works on demand. You call it whenever a new string appears.

Readiness checklist for the visual editor

• Your page contains mostly static marketing copy, product descriptions, or landing‑page sections.
• You have a non‑technical team that can log into the SeaText dashboard to make edits.
• You can accept that translation updates appear after you publish a variant in the UI, without a code deploy.
• Your application already loads the SeaText snippet (see the Key facts table).
• You do not need to tie translation changes to a specific Git commit or CI pipeline.
• Your Vue app does not heavily rely on client‑side routing that replaces large DOM sections without a full reload.
• You are comfortable with the snippet storing an ID in local storage for visitor identification.

Signs to wait before choosing the visual editor

• Your Vue app renders content that comes from an external API (e.g., user reviews, search results) and you need those strings translated on the fly.
• You run automated tests that expect specific translation keys in the DOM.
• Your release process requires every text change to be version‑controlled.
• You need to coordinate translation updates with feature flags or A/B experiments that are managed in code.
• Your team prefers to keep all translation logic inside the repository for audit trails.
• You have strict Content Security Policy rules that block inline scripts or third‑party dashboard connections.

Exception: using both approaches together

Some teams start with the visual editor for landing‑page copy while building the API‑driven flow for user‑generated sections. You can keep the snippet on the page and call the API for dynamic parts, letting the visual editor handle static blocks. This hybrid works when you have a clear split between marketing pages and interactive features.

For example, a SaaS site might use the visual editor for the homepage, pricing page, and help center articles. The same site uses the API inside the dashboard area where users create custom reports, invite teammates, or see real‑time notifications. The snippet stays in index.html. The dashboard components import the API client and call seatext.translate() for each dynamic string.

How the visual editor works

After you add the SeaText snippet to your index.html, the script loads asynchronously. It reads the DOM, collects translatable strings, and sends them to the SeaText dashboard. In the dashboard you can edit each string, create language variants, and preview changes. When you publish a variant, the updated strings are served to visitors without touching your Vue code.

The snippet includes the async attribute, so it does not block page rendering. It stores a unique visitor ID in local storage. This ID lets SeaText serve the correct language variant on repeat visits. The script works with Vue's reactivity system because it mutates text nodes directly after Vue mounts. You do not need to modify your components.

How the programmatic API works

You keep the same snippet for basic page load, but you also import the SeaText API client in your Vue components. The client exposes a function like seatext.translate(key, options) that returns a promise with the translated string. You can call it inside setup() or mounted() hooks, pass variables, and handle loading states. The API respects the same async snippet and local‑storage ID, so you do not need a second script.

Below is a minimal Vue 3 Composition API example. It assumes the global seatext object is available after the snippet loads.

// src/composables/useTranslation.js
import { ref, onMounted } from 'vue'

export function useTranslation(key, params = {}) {
  const translated = ref('')
  const loading = ref(true)
  const error = ref(null)

  async function fetchTranslation() {
    if (typeof window.seatext === 'undefined') {
      // snippet not loaded yet
      await new Promise(r => setTimeout(r, 100))
      return fetchTranslation()
    }
    try {
      const result = await window.seatext.translate(key, { params })
      translated.value = result
    } catch (e) {
      error.value = e
      translated.value = key // fallback to source
    } finally {
      loading.value = false
    }
  }

  onMounted(fetchTranslation)
  return { translated, loading, error }
}

Usage in a component:

<script setup>
import { useTranslation } from '@/composables/useTranslation'
const { translated, loading } = useTranslation('welcome_message', { name: user.name })
</script>

<template>
  <div v-if="loading">Loading…</div>
  <div v-else>{{ translated }}</div>
</template>

This pattern lets you translate strings that come from props, API responses, or computed values. You control when the call fires. You can also batch multiple keys with Promise.all to reduce round trips.

Comparison table for specific use cases

Key facts from SeaText documentation

Limitations and when the advice does not apply

• The visual editor cannot translate strings that are generated after the initial page load without a full reload or a manual refresh of the variant.
• The programmatic API requires developer time to write and maintain translation calls; it does not replace the need for the initial snippet.
• Both approaches depend on the browser's local storage being available; if you block or clear local storage, the SeaText ID may be lost and translations may fall back to the source language.
• If your SPA is served from multiple subdomains with strict cross‑origin policies, you must verify that the snippet's requests are allowed; otherwise you may see blocked requests in the console.
• For server‑side rendered Vue (Nuxt) pages that send HTML to the crawler before hydration, you need to ensure the snippet runs on the client; otherwise search engines see the original language.
• The visual editor does not expose granular control over translation timing; you cannot delay translation until a specific user action without custom code.
• The programmatic API does not automatically retry failed requests; you must implement your own retry or fallback logic.
• Both methods share the same rate limits and quotas defined by your SeaText plan; heavy API usage on high‑traffic pages may hit limits faster than static editor usage.
• If you use a strict Content Security Policy that disallows unsafe-inline scripts, the snippet may be blocked unless you add the correct nonce or hash.

FAQ

When should I start with the visual editor?

When your landing pages, marketing copy, or static product descriptions are the primary translation need and you want non‑technical editors to make changes without a code deploy.

Can I switch from the visual editor to the API later?

Yes. Keep the snippet in place, add API calls where you need dynamic translation, and retire the visual editor for those strings once the API covers them.

Does the visual editor affect page load speed?

The snippet loads asynchronously and adds less than 15 KB, so impact on load time is minimal.

What permissions does the API need?

The API uses the same snippet; it only needs network access to the SeaText endpoint and permission to read/write the local‑storage ID that the snippet creates.

Is there a cost difference between the two methods?

Both methods are included in the same SeaText plan; you pay for the number of translated words or page views, not for the choice of editor versus API.

How do I handle translation keys that contain HTML markup?

The API returns plain text. If you need to preserve markup, translate the inner text only and reapply the HTML in your component.

Can I use the API inside a Nuxt 3 server route?

The API runs in the browser. For server‑side translation, call the SeaText REST endpoint directly from your server code using your API key.

What happens if the SeaText service is down?

The snippet and API will fail to fetch translations. Your fallback should be the source language string. Implement a timeout and fallback in your composable.

Switch Between Thinkific Sites in SeaText Without Logging Out

Direct Answer: SeaText includes a site selector in the header that lets you switch between linked Thinkific schools without re-entering your credentials. This guide explains how the selector works, the prerequisites, the exact steps, and how to troubleshoot common issues.

Yes, you can switch between Thinkific sites in SeaText without logging out. The SeaText dashboard includes a site selector in the header. It lists every Thinkific school linked to your account. Click a school, and the dashboard updates. You stay logged in, and you do not need to re-enter your credentials.

Why Switching Without Logging Out Matters

If you manage more than one Thinkific school, you know how easy it is to mix them up. A student asks a question about Course A, while you are working on Course B. You open the wrong dashboard, change the wrong setting, and only notice later. A site selector reduces that risk by making the active site visible and easy to change.

Logging out and logging back in creates friction. You must remember which email belongs to which SeaText account. You must type your password again. If you use two-factor authentication, you must wait for a code. Every extra step makes it more likely that you will lose focus or open the wrong site.

Switching without logging out also helps you move between tasks quickly. You can compare the AI settings on two schools, copy a headline idea from one to another, or check whether a new school has been linked. The selector keeps you inside one dashboard, so you spend less time on account management and more time on course content.

Expert perspective: The site selector separates account-level login from site-level context. You are logged in to SeaText once. The dashboard then changes which Thinkific school is active. This is useful for anyone who runs multiple schools under one SeaText account.

Switching vs. Logging Out: What Changes

The main difference is simple. Logging out ends your SeaText session. Using the selector keeps it active. That one difference changes how you work.

Action	Log out and log in again	Use the site selector
Re-enter email and password	Yes	No
Wait for a login code	Yes, if two-factor authentication is on	No
Time to switch	Usually 30 seconds or more	A few seconds
Active SeaText session	Ends	Stays active
Dashboard after switch	Opens the default view	Opens the selected school

Use the selector if you switch schools often. Use logout if you share a computer or need to change SeaText accounts. The table matters when you work across several schools every day. A small time saving adds up. More importantly, the selector makes it clear which school you are looking at. You can check the site name in the header before you edit anything.

How the Site Selector Works

The site selector is a dropdown in the SeaText top navigation bar. It appears after you link more than one Thinkific site. It shows the name of each linked school. When you pick a school, the dashboard reloads with that school's data and AI configuration. Your SeaText login remains active, so you do not need to type your password again.

Each Thinkific school must be linked to SeaText before it can appear in the selector. The linking process is the same for every site. You add the SeaText JavaScript snippet to the school's footer, visit the school once, and wait for the site name to appear next to the SeaText logo.

Before You Can Use the Site Selector

You need three things before the selector is available:

• An active SeaText account. You need a registered account to access the dashboard.
• At least two linked Thinkific sites. The selector is not needed when only one site is connected.
• The Thinkific integration installed on each site. The JavaScript snippet must be in the Site Footer Code field.

To link a site, follow the SeaText Thinkific integration guide. Copy the JavaScript code provided by SeaText. In Thinkific, go to Settings, then Code & Analytics. Paste the code in the Site Footer Code field and save. Then use the SeaText form to add your website address in the format www.example.com.

Next, visit your Thinkific site once and stay on the page for at least 40 seconds. This activates the AI and links the site to your account. Wait at least five minutes. The site name should appear next to the SeaText logo at the top of the page. If you do not see it after 10 minutes, contact SeaText support.

Repeat this process for each additional Thinkific school. Once SeaText recognizes two or more schools, the selector appears in the header.

Step-by-Step: Switch Between Thinkific Schools

1. Log in to your SeaText account at seatext.com.
2. Find the site selector dropdown in the top header. It usually shows the current site name.
3. Click the dropdown to see the list of linked Thinkific schools.
4. Select the school you want to work with.
5. Wait a moment for the dashboard to update.
6. Check the site name in the header to confirm you are on the right school.

That is the full process. There is no separate mode, no extra button, and no need to open a new tab.

Managing Multiple Thinkific Schools with SeaText

The selector is most useful when you manage several schools for yourself or for clients. You might run a course library, a membership site, and a client project. Each school can have different pages, different offers, and different AI agents.

Use the selector as your starting point for any task. Need to check the AI settings on School B? Select School B. Need to review content on School C? Select School C. The dashboard then shows the pages and configuration for that school.

Active AI agents are part of each site's configuration. SeaText's Main AI Hub lets you activate AI on your preferred pages and adjust parameters under Configuration. When you switch to another school, the dashboard shows that school's AI setup. To review or change agents on the previous school, select that school again.

Keep multiple linked sites organized by using clear Thinkific school names. SeaText displays the school name from Thinkific in the selector. If you manage three schools with similar names, update the names in Thinkific so you can tell them apart.

You can also create a simple routine. Before switching, note which school you are leaving. After switching, confirm the name in the header. This habit prevents small mistakes like editing the wrong lesson or activating an AI agent on the wrong site.

Troubleshooting the Site Selector

I do not see the selector. Check that at least two Thinkific sites are linked to your SeaText account. If only one site is linked, the selector may be hidden. Confirm the JavaScript snippet is installed on each site.

A new school is missing from the list. Return to the Thinkific integration steps for that school. Visit the school and stay for at least 40 seconds. Wait five minutes for the site name to appear next to the SeaText logo. If it still does not appear after 10 minutes, contact SeaText support.

The dropdown shows the wrong name. SeaText uses the school name from your Thinkific settings. Update the school name in Thinkific if the selector shows an old or unclear name.

I switched but the dashboard looks the same. Check the site name in the header. If it did not change, refresh the page and try again. If the issue continues, contact SeaText support.

I want to add another school. Repeat the linking process for the new school. Once it is linked, it should appear in the dropdown automatically.

Limitations and When the Selector Doesn't Apply

The selector only works for Thinkific sites that are already linked to your SeaText account. It does not work inside the Thinkific admin panel. It does not link new sites by itself.

The selector also works within one SeaText account. If you have two separate SeaText accounts, the dropdown will not show sites from the other account. Log out of one account and log in to the other to see those sites.

The selector changes which school is active in the SeaText dashboard. It does not change user roles or permissions inside Thinkific. A visitor's experience on your Thinkific site is not affected by the selector.

Frequently Asked Questions

Can I switch between Thinkific sites on the mobile version of SeaText?

Yes, the site selector is part of the SeaText header. On a small screen, you may need to open the main menu first. If the dropdown is hard to use on your phone, use a laptop or desktop for multi-site work.

What if I don't see the site selector?

Make sure you have linked at least two Thinkific sites. Verify that the JavaScript snippet is installed in each site footer. Also confirm that you are logged in to the correct SeaText account.

Does switching sites log me out of Thinkific itself?

No. Switching sites in SeaText does not affect your Thinkific session. You remain logged in to Thinkific separately.

How do I add a new Thinkific site to the selector?

Follow the same integration steps: add the SeaText snippet to the new site, visit the site for 40 seconds, and wait for the site name to appear next to the SeaText logo. The new site should then appear in the dropdown.

Can I rename the sites in the dropdown?

SeaText uses the site name from your Thinkific school. To change the display name, update the school name in your Thinkific settings.

What happens to my active AI agents when I switch?

Each site keeps its own AI configuration. The selector changes which site's configuration is shown. Agents stay with the site where they were activated. Switch back to that site to edit or pause them.

Is there a limit to how many times I can switch?

You can switch as often as needed while your SeaText session is active. The dropdown lists every linked school, and the selector does not add extra login steps.

Next Steps to Connect Your Thinkific Schools

If you have not linked your Thinkific sites yet, start with the Thinkific integration guide. Install the snippet on the first school, visit the school, and wait for the site name to appear. Repeat for each additional school. Once two or more schools are linked, the site selector will appear in the SeaText header.

Further reading and comparison sources

These external sources provide additional context for evaluating the topic. Their inclusion is not an endorsement.

• Mobile App FAQ - Frequently Asked Questions (Student Resource) ...
• Setting Up Multiple Thinkific Sites – Thinkific
• Using the Plus Portal to Manage Multiple Thinkific Websites – ...

Further reading and comparison sources

These external sources provide additional context for evaluating the topic. Their inclusion is not an endorsement.

• Mobile App FAQ - Frequently Asked Questions (Student Resource) ...
• Setting Up Multiple Thinkific Sites – Thinkific
• Using the Plus Portal to Manage Multiple Thinkific Websites – ...

SCODE_CONTENTTYPE_Description

FR_TRANSL_CourseDesc_French

EN_AB_PricingTestA

FR_AB_PricingTestA