Seatext library

What Is the Data Attribute for Seatext AI? A Complete Implementation Guide

Seatext AI uses a `data-seatext` attribute (or similar `data-` prefixed attribute) to mark HTML elements that should be translated, personalized, or optimized by its AI agents. The exact attribute name appears in your account's...

If you're installing Seatext AI on a Shopify store or any custom site, the platform needs a way to know which pieces of text it's allowed to rewrite. That signal is a data- attribute you place on the HTML element that wraps the target copy. The attribute name is provided in your Seatext dashboard's installation snippet (often data-seatext or data-seatext-key), and you add it to product descriptions, headlines, buttons, or any translatable block.

Why the data attribute matters

Seatext AI runs client-side JavaScript that scans the DOM for elements carrying its marker attribute. When it finds one, it reads the original text, sends it to the optimization or translation engine, and replaces the content with a variant that matches the visitor's keyword, language, or referral source. Without the attribute, the script ignores the element, leaving it static. This opt-in design keeps the AI from touching navigation, legal footers, or third-party widgets you don't want rewritten.

Where the attribute comes from

After you create a Seatext account, the dashboard shows a Javascript code snippet unique to your domain. That snippet contains the exact attribute name your project uses. Copy the snippet once, paste it into your site's <head> (or via your CMS's header-injection field), and the attribute name is locked in for that account. The Shopify integration guide walks through the same steps: install the snippet, then wrap the product description output in the theme file product.liquid or product-template.liquid with the attribute.

Step-by-step: adding the attribute in Shopify

  1. Log in to Shopify Admin → Online Store → Themes → Actions → Edit code.
  2. Open Layout/theme.liquid and paste the Seatext snippet just before the closing </head> tag. Save.
  3. Open the product template (product.liquid, product-template.liquid, or a section file like main-product.liquid).
  4. Locate the Liquid tag that outputs the description, typically {{ product.description }} or {{ product.description | split: '' | first }}.
  5. Wrap that output in a container element and add the attribute, e.g. <div data-seatext>{{ product.description }}</div>.
  6. Save the file, then view a product page. Open browser DevTools (F12), inspect the description block, and confirm the data-seatext attribute appears in the rendered HTML.

Step-by-step: adding the attribute on a custom site

  1. Grab the snippet from your Seatext dashboard (Settings → Installation).
  2. Paste it into the global <head> of every page you want optimized.
  3. Identify each text block you want personalized or translated: headlines (<h1>), subheads, product titles, CTAs, feature bullets.
  4. Add the attribute to each element, e.g. <h1 data-seatext>Original Headline</h1>.
  5. Reload the page, inspect each element, and verify the attribute is present.

Common attribute patterns you may see

Pattern Typical use Notes
data-seatext General-purpose marker for any translatable/optimizable block Most common in current snippets
data-seatext-key Explicit key to group variants across pages Use when the same headline appears on multiple URLs
data-seatext-scope Limit rewriting to a subsection of a larger block Rare; see enterprise docs

Note: The exact name is account-specific. Always copy it from your own dashboard rather than guessing.

How verification works

After you save changes, open the live page in an incognito window. Right-click the target text → Inspect. In the Elements panel you should see the attribute on the wrapper element, e.g. <div data-seatext="">...</div>. If it's missing, check for template caching (Shopify's theme editor sometimes serves a cached preview) or a syntax error in the Liquid wrapper. The Seatext dashboard also shows a "Script active" status once it detects the attribute on at least one pageview.

What happens after the attribute is detected

On each page load, the Seatext script:

  1. Collects all elements bearing the attribute.
  2. Reads their innerText as the source copy.
  3. Sends the batch to the optimization API along with the visitor's UTM parameters, referrer, and browser language.
  4. Receives variant text (translated, keyword-matched, or A/B test winner).
  5. Swaps the innerText in place, preserving the original DOM structure and event listeners.
The swap is synchronous for the first paint on cached variants and asynchronous for new variants, so layout shift is minimal.

Elements you should not tag

  • Navigation menus, footer legal links, privacy-policy text — these must stay verbatim.
  • Third-party widget containers (chat, reviews, payment iframes) — the script cannot safely rewrite inside shadow DOMs.
  • Structured data (<script type="application/ld+json">) — tagging it breaks schema validity.
  • Dynamic price elements that update via JS — tagging them can cause flicker or double-currency display.

Multi-domain and staging considerations

Each Seatext account is bound to a single primary domain. If you run a staging subdomain (staging.example.com) and a production domain, you need two accounts, each with its own snippet and attribute name. The attribute from the production account will not work on staging and vice versa. Localhost and dynamic preview URLs are blocked for security, so use a real staging hostname (e.g., staging.yourbrand.com) with a valid SSL certificate.

Troubleshooting checklist

  • Attribute missing in DevTools: Clear Shopify theme cache (Actions → Edit code → theme.liquid → save again) or purge your CDN.
  • Script not loading: Confirm the snippet is inside <head>, not <body>, and that no CSP header blocks seatext.com.
  • Text not changing: Open the Seatext dashboard → Agents → ensure at least one agent (Translation, Google Ads, Personalization) is Active.
  • Wrong language showing: Verify the visitor's Accept-Language header or the lang attribute on <html> matches a language you've enabled in the Translation agent.

Key facts

Fact Detail
Attribute source Unique per account, shown in dashboard installation snippet
Typical attribute name data-seatext (verify in your snippet)
Placement On the HTML element that directly wraps target text
Verification method Browser DevTools → Elements panel → inspect rendered HTML
Multi-domain rule Separate account (and attribute) required per primary domain
Staging support Real hostname with SSL only; localhost blocked
Agents that use the attribute Translation, Google Ads Optimization, Personalization, A/B Testing, Visitor Source Rewrite

Limitations and when this advice does not apply

  • If you use a headless CMS where the frontend is a React/Vue app, you must add the attribute in the component's JSX/Template, not in a server-rendered template.
  • AMP pages strip custom data- attributes; Seatext does not currently support AMP.
  • Email templates and PDFs are out of scope — the script only runs in a browser context.
  • Enterprise customers with custom integration contracts may use a different attribute namespace; follow your dedicated implementation guide.

Frequently asked questions

Can I use multiple different data attributes on the same page?

Yes. Each agent reads the same attribute, but you can add data-seatext-key="hero-headline" to group variants across pages. The key is optional; the base attribute is required.

Does the attribute affect SEO?

No. Search crawlers see the original HTML (server-rendered) because the swap happens client-side after paint. The attribute itself is valid HTML5 and ignored by crawlers.

What if my theme already uses data-seatext for something else?

Unlikely, but if it happens, contact support. They can issue a custom attribute namespace for your account.

How do I tag a product description that is split across multiple Liquid variables?

Wrap the outermost container that holds the full rendered description. If the theme splits description into tabs, tag each tab's content block individually.

Will the attribute slow down my page?

The attribute is a static string (~15 bytes). The script is ~35 KB gzipped and loads asynchronously. Impact on LCP is negligible.

Can I add the attribute via Google Tag Manager instead of editing theme code?

Technically yes (GTM can inject attributes on DOM ready), but race conditions often cause the Seatext script to miss the attribute. Direct theme edit is recommended.

Where do I find the exact attribute name for my account right now?

Log in to seatext.com → Settings → Installation → Copy snippet. The attribute appears in the data- parameter of the script's config object.

Further reading and comparison sources

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

Learn more

Visit the website for more information.

Learn more