How to Pass Custom Data to SeaText Using Data Attributes

You can pass custom data to SeaText by adding HTML data attributes with the data-seatext- prefix to your page elements. SeaText automatically reads these attributes when the page loads and exposes them in its API and dashboard. This lets you send business-specific information—like product SKUs, customer tiers, or campaign IDs—without modifying SeaText's core script.

What Are Data Attributes and How Does SeaText Use Them?

Data attributes are standard HTML attributes that store extra information on elements. They always start with data- followed by a name you choose, like data-product-id="123". SeaText extends this convention by recognizing attributes prefixed with data-seatext-. When you add such an attribute to any element, SeaText's AI agents can read and act on that data in real time.

For example, you could tag a pricing section with data-seatext-plan="enterprise" and then use that value in your SeaText dashboard to trigger a specific discount offer or rewrite for enterprise visitors. The data stays attached to the element and travels with the page, so no extra API calls are needed.

Prerequisites

Before you start, you need:

• A SeaText account (create one at seatext.com).
• The SeaText JavaScript snippet installed on your website. Integration instructions are available for Shopify and other platforms.
• Basic familiarity with editing HTML or your theme's code.

Step-by-Step Implementation

Step 1: Install the SeaText Script

If you haven't already, add the SeaText snippet to your site. For Shopify, access your theme's theme.liquid file in the Layout folder and paste the code before the closing </head> tag. Save and verify the script loads. SeaText remains inactive until you activate agents, so your site content stays safe.

Step 2: Add data-seatext- Attributes to Your HTML

Identify the elements you want to tag with custom data. Add attributes using the pattern data-seatext- followed by a descriptive name. Use hyphens to separate words. For example:

<div data-seatext-product-type="running-shoe" data-seatext-price="129.99">
  <h3>Trail Blazer X</h3>
</div>

You can add multiple attributes to the same element. The attribute value must be a string; SeaText will parse it as needed.

Step 3: Configure SeaText to Use the Custom Data

Once the attributes are on the page, log into your SeaText dashboard. In the settings for an AI agent (like the Personalization Agent or Google Ads Landing Page Agent), you can reference the data attributes by their full name. For instance, a rule could say: “If data-seatext-plan equals ‘enterprise’, show the premium CTA.” The dashboard makes this straightforward with dropdown menus.

Step 4: Test and Verify

After saving your changes, open your page in a browser and use the developer tools (F12) to inspect the element. Check that the data-seatext- attributes appear in the HTML source. SeaText also provides a debug mode in its dashboard to confirm the data is being read. If the attributes are missing, double-check your code syntax and that the SeaText script is running.

Practical Scenarios for Custom Data Attributes

Here are a few ways marketers use custom data attributes with SeaText:

• Ecommerce product pages: Tag each product with SKU, category, and price. Use the data to trigger SeaText’s Ecommerce Product Copy Agent to rewrite descriptions for high-margin items.
• Landing pages for ads: Add data-seatext-campaign to match the Google Ads campaign name. The Google Ads Landing Page Agent can then tailor the page copy to that specific keyword.
• Membership sites: Tag user profile sections with subscription tier. The AI Personalization Agent can adapt content based on that tier.

How Data Attributes Interact with SeaText Agents

Each SeaText agent can read data attributes in different ways. For example, the AI Personalization Agent uses attribute values to decide which visitor segment to show. The Google Ads Landing Page Agent reads the data-seatext-campaign attribute to match the page to the ad keyword. The Ecommerce Product Copy Agent uses attributes like data-seatext-sku to apply product-specific rewrites. You can combine multiple attributes for more complex rules. For instance, show a discount only when both data-seatext-plan is “enterprise” and data-seatext-visitor-type is “returning”. The dashboard allows you to create conditions using these attributes.

Limitations and Best Practices

Keep these points in mind:

• Prefix required: Only attributes starting with data-seatext- are recognized. Generic data-* attributes are not picked up by SeaText.
• String values only: Attribute values are always strings. Convert numbers or booleans to strings (e.g., "true").
• Page load timing: SeaText reads attributes when the page loads. Dynamically added attributes may not be detected unless you trigger a re-scan via the API.
• Do not expose sensitive data: Data attributes are visible in the HTML source. Avoid passing passwords, tokens, or personally identifiable information.
• Naming consistency: Use the same attribute names across pages to avoid confusion. Document your naming convention for your team.
• Performance impact: Adding many attributes on a single page is fine. Each attribute is a small string in the HTML. No extra network requests are needed.

Common Mistakes to Avoid

Even experienced developers sometimes make errors. Here are the most common ones:

• Misspelling the prefix: Use data-seatext- exactly. A typo like data-seatextt- will not work.
• Using inconsistent naming: If you call the attribute data-seatext-product-type on one page and data-seatext-type on another, your rules will break. Stick to a single vocabulary.
• Forgetting to save the dashboard configuration: After adding attributes, you must set up the agent rules in the SeaText dashboard. Attributes alone do nothing.
• Not testing across browsers: Data attributes are fully supported in all modern browsers. But verify that your HTML source is valid and the attributes are not stripped by a content management system.

Frequently Asked Questions

Can I use legacy data-* attributes without the seatext prefix?

No. SeaText only reads attributes that start with data-seatext-. If you have existing data-* attributes, you must add a separate data-seatext- attribute for SeaText to see them.

How many data attributes can I add per page?

There is no hard limit from SeaText, but keep the page lightweight. Each attribute adds a small amount of HTML, but modern browsers handle hundreds without issue.

Do data attributes work with dynamic content (e.g., AJAX)?

Yes, but you may need to call SeaText's API to re-scan the page after the dynamic content loads. Check the developer documentation for the refresh method.

Can I use data attributes in SeaText's API instead of the dashboard?

Yes. The API can read the attribute values from the page context. Refer to the API docs for the exact syntax.

What happens if I misspell the attribute name?

SeaText will ignore it. The attribute must match the exact case and name you configure in the dashboard. Use consistent naming conventions to avoid errors.

Are data attributes supported on all SeaText agents?

Most agents that read page content support data attributes. The Personalization Agent, Google Ads Landing Page Agent, and Ecommerce Product Copy Agent are examples. Check each agent's documentation to confirm.

Do data attributes affect page load speed?

Negligibly. The attributes are part of the HTML and don't require additional network requests. The impact is similar to adding a few extra CSS classes.

Key Facts

Fact	Detail
Attribute prefix for SeaText	data-seatext-
Where to add	Any HTML element on your site
How to verify	Use browser developer tools to inspect the element; the attribute should be present in the HTML source.
Source for verification guidance	SeaText Shopify Integration

Further reading and comparison sources

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

• Use data attributes - HTML - MDN Web Docs
• HTML5 Custom Data Attributes (data-*) | HTML5 Doctor
• Built-in and Custom Data Attributes - Wes Bos

Further reading and comparison sources

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

• Use data attributes - HTML - MDN Web Docs
• HTML5 Custom Data Attributes (data-*) | HTML5 Doctor
• Built-in and Custom Data Attributes - Wes Bos

Learn more

Visit the website for more information.