OneTag AI

OneTag AI / Guides

Translate a web page on the fly with AI

How do I let visitors translate my static page into their language?

Maintaining a second language is a lot of work for a small site. An on-the-fly translation is not as good as a human one, but it is far better than nothing, and for a landing page or a help article it is often enough. This guide translates the visible text of a page in place, element by element, so layout and links survive.

Steps

  1. Get a free key

    From onetagai.com.

  2. Add the tag

    <script src="https://onetagai.com/v1.js" data-key="YOUR_ONETAG_KEY"></script>

  3. Translate the page's text nodes

    Collect the text, translate it as a JSON array so the pieces come back aligned, and put them back:

    <select id="lang">
  <option value="">Original</option>
  <option>Spanish</option><option>Japanese</option><option>German</option>
</select>

<script type="module">
  const root = document.querySelector("main");
  const nodes = [];
  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
  for (let n; (n = walker.nextNode());) if (n.nodeValue.trim()) nodes.push(n);
  const original = nodes.map((n) => n.nodeValue);

  lang.onchange = async () => {
    if (!lang.value) return nodes.forEach((n, i) => { n.nodeValue = original[i]; });
    const translated = await onetag.ask(
      `Translate every string in this JSON array to ${lang.value}. Return a JSON array of the same length, same order.`,
      original,
      { json: true, maxTokens: 1000 }
    );
    nodes.forEach((n, i) => { n.nodeValue = translated[i] ?? original[i]; });
  };
</script>

Why an array, not the whole page

Translating the HTML as one string risks broken tags and reordered content. Translating an array of text nodes keeps every element where it is; only the words change. The model returns a parsed array because of json: true.

Long pages

A call takes 32,000 characters in and 1,000 tokens out. For a long page, translate in batches of about 40 nodes and update as each batch returns; the first paragraphs change within a second.

Cache per language

Store the translated array in localStorage keyed by page URL and language. The next visit is instant and costs nothing.

Search engines

This is a convenience for visitors, not a localization strategy: search engines index the original language. If a market matters, publish real pages for it.

Questions

How good is the translation?

Good enough for informational pages and help articles; not a substitute for a human translation on legal or marketing copy. Technical terms and product names usually survive because the model sees them in context.

Can I translate form labels and buttons too?

Yes, the tree walker picks up every text node under the root you choose. Pass document.body to include navigation.

Which languages are supported?

Any language the model knows, which is most of them. Name the language in the prompt.

Is it safe to put the OneTag AI key in my page?

Yes, it is designed for that. The key can only spend its own token budget and cannot read or change anything on your account. On the Pro plan you can lock it to your domain so other sites cannot use it; free keys work from any page.

Does it cost anything?

A free key has 1,000,000 tokens with no monthly reset, enough for a few hundred summaries. Pro is $9.9 a month for 100,000,000 tokens a month and the domain lock.

Which model answers?

A fast, inexpensive model from OpenRouter, chosen for sub-second first tokens and good instruction following. You do not pick a model; the point is one tag that keeps working.

What happens to the text my visitors send?

It goes to the model and comes back. OneTag AI stores token counts per key for the quota and keeps no prompts, inputs or answers. The access log carries no IP addresses.

Try it on your sitefree

Get a free key by email, paste one tag, call onetag.ask. 1,000,000 tokens, no card.

Get a free key

Updated 2026-11-09. Something wrong or missing? Email support@odysseyx.app.