How to Install SeaText AI on a React Website: A Step-by-Step Guide

You can install SeaText AI on a React website by adding the SeaText JavaScript snippet to your public/index.html (or injecting it once from a React component) after you create a SeaText AI account. Deploy the site to a real domain, visit it for at least 40 seconds, then wait about five minutes for your domain to show up in the dashboard. The instructions below walk through that exact sequence.

What you need before you start

SeaText AI's installation process has three parts: an account, a JavaScript snippet, and a live page. Have these ready before you touch your React project.

• A SeaText AI account. The official integration instructions assume you have one. If you don't, create it before copying the code.
• A deployed React site on a real domain. Development URLs such as localhost are restricted for security reasons.
• Access to your site's main HTML file, or a spot where you can inject a script once, such as a React component with useEffect.
• The JavaScript code from the SeaText AI General Integration page.

If you use WP Engine, the instructions suggest installing their plugin to add custom JavaScript to all pages. For most React projects, you can skip the plugin and add the script directly to public/index.html.

How the install works

You are not adding a visible widget yet. The script connects your real domain to your SeaText AI account. According to the source, the AI remains inert until you activate it, so copying the code into your page won't rewrite your copy or change your headlines by itself.

The trigger happens when a visitor or you stays on the page for at least 40 seconds. That action activates the AI and links it to your account. If you skip this step, your website name may never appear in the dashboard, and you won't be able to activate agents.

This means the order matters: script first, deploy second, visit third, activate last. Don't activate agents before the domain is connected.

Step-by-step installation in React

1. Create your SeaText AI account. If you already have one, skip this step.
2. Copy the JavaScript snippet from the SeaText AI General Integration page. The source says to copy the code provided by SEATEXT AI, which you will find in the integration section.
3. Open public/index.html in your React project and paste the snippet just before </body>. Because this file loads on every route, React Router changes will not reload the script.
4. If you prefer a React component, call useEffect with an empty dependency array and insert the script into the document once. Do not run the effect on every render.
5. Deploy the app to a valid real domain. Avoid localhost for the final connection check because SeaText AI restricts development URLs.
6. Visit or refresh your website several times and stay on the page for at least 40 seconds. This activates the AI and links it to your account.
7. Wait at least five minutes. Then check the top of the SeaText AI page for your website name next to the SEATEXT logo. It signals that your site is connected and ready.
8. Open the Main AI Hub and activate the agents you want on your preferred pages. Use Configuration to adjust the AI parameters, and Variants Edit to review or edit translations.

React-specific installation notes

Single-page React apps don't do a full page reload when users move between routes. If you add the snippet to index.html, it runs once on the initial load and stays active. That is the simplest setup and the easiest to verify.

If you add the snippet through a component, be careful with React Strict Mode. In development, Strict Mode can run effects twice, which might duplicate the script tag. Use an empty dependency array and guard against duplicate insertion, or keep the script in index.html instead. This is general React advice, not a SeaText-specific rule.

If your site uses server-side rendering, like Next.js, the advice changes. You would load the snippet through the framework's script component rather than index.html. The activation steps stay the same, but the file location differs.

Key facts for your installation

These facts come directly from SeaText AI's general integration instructions.

Limitations and when to adjust

This guide assumes a standard client-side React app. If your setup is different, watch for these cases:

• Local development: SeaText AI restricts localhost. You can still write and test code, but the final activation check should happen on a real domain.
• Staging and production: If you need SeaText on both, create separate accounts for each domain. Each account is linked to a single primary URL.
• Multiple websites: To use SeaText on several websites, create one account for each website.
• WP Engine: If your React site is hosted on WP Engine, the official instructions suggest using their plugin to add custom JS across all pages.
• Server-side rendering: If you use Next.js or Gatsby, load the snippet through the framework's script component rather than assuming index.html is used for every route.

The important limit: SeaText AI only works when the page URL matches the account's primary URL. If you copy an account from one domain to another, it won't link correctly.

Terms you'll see during setup

• Primary URL: the real domain connected to a single SeaText AI account.
• Main AI Hub: the dashboard area where you activate agents on your pages.
• Configuration: the settings panel for adjusting AI parameters.
• Variants Edit: where you can review, create, or manually edit translations and content versions.

Frequently asked questions

Can I paste the SeaText AI script into a React component?

Yes. Use a useEffect hook with an empty dependency array to insert the script once. Make sure it doesn't run on every render, because that would create duplicate script tags.

Does SeaText AI work on localhost?

No. The official instructions say development URLs such as localhost are restricted for security reasons. Use a valid real domain for the installation to connect.

Do I need a separate account for each website or domain?

Yes. The instructions say to create separate accounts for each website and for each domain, including a staging and production domain if you use both.

Will the AI change my content as soon as I add the script?

No. The AI remains inert until activated. You control when agents start running from the Main AI Hub.

How long does it take for the site to connect?

After visiting or refreshing the site and staying for at least 40 seconds, wait at least five minutes to see your website name at the top of the SeaText AI page. If it doesn't appear after 10 minutes, contact support.

What should I do if my website name never appears?

Contact SeaText support immediately. The official instructions say this could indicate an installation issue on your platform, so you may need help.