JavaScript x enhancely: inject schema information in minutes

JavaScript powers modern web applications – from SPAs built with React, Vue, or Angular to sites using Google Tag Manager. With enhancely-js, you can add AI-powered JSON-LD schema to any JavaScript-based project, even without backend access.
With our enhancely JavaScript integration, you can bring intelligent personalization directly into your frontend workflow. The integration connects via a simple snippet and a lightweight proxy – no backend changes required.

enhancely automatically generates the right JSON-LD (schema.org) for each page—no manual markup, no brittle scripts.

⚠️ Important: LLM bots and client-side rendering

Most LLM bots (ChatGPT, Perplexity, Claude, etc.) and many search engine crawlers do not execute JavaScript. They only see the initial HTML response from your server.
What this means:
  • JSON-LD injected via client-side JavaScript may be invisible to AI systems
  • Google can execute JS but often deprioritizes client-rendered content
  • For maximum AI visibility, server-side rendering (SSR) is strongly recommended
If you're using a client-side only setup, consider adding a prerendering service:
  • prerender.io Popular prerendering service, easy setup
  • Rendertron Google's open-source solution
  • Prerender.cloud Alternative with CDN integration
  • Cloudflare Workers Can serve prerendered HTML to bots
Best practice: Use enhancely's headless CMS plugins (Next.js, Nuxt) for SSR, or combine this JS snippet with a prerendering layer.

Why it matters

Structured data improves search visibility and rich results. Enhancely automates the hard parts so your team ships better SEO faster, with less custom code to maintain.

What you get

  • JSON-LD generated per page, automatically
  • Works with GTM or direct <head> injection
  • ETag-based caching in localStorage
  • SPA support with automatic re-injection on navigation

How it works

  • Your page loads the enhancely snippet
  • The snippet calls your proxy endpoint (keeps API key secret)
  • The proxy fetches JSON-LD from the Enhancely API
  • The snippet injects it as <script type="application/ld+json"> in <head>
using javascript to integrate enhancely into your web frontend.
how to use javascript to integrate enhancely into your web frontend.

Before you start

Never put your ENHANCELY_API_KEY in client-side code or GTM. Browser code is public. You must host a proxy endpoint that keeps the key server-side.

Installation

Step 1: Deploy the proxy (required)

You need a proxy endpoint at POST /_enhancely/jsonld on your domain.
Option A: Cloudflare Worker (fastest)
Deploy the worker from proxy/cloudflare/worker.mjs: 
    # Set environment variables
ENHANCELY_API_KEY=your-api-key
ENHANCELY_API_URL=https://app.enhancely.ai/api/v1
ALLOWED_HOSTS=example.com,www.example.com
Option B: Node proxy (Docker) 
    # Build
docker build -t enhancely-jsonld-proxy ./proxy/node

# Run
docker run --rm -p 8787:8787 --env-file ./proxy/node/.env enhancely-jsonld-proxy
Then route /_enhancely/jsonld to the container in your web server (nginx example): 
    location = /_enhancely/jsonld {
    proxy_pass http://127.0.0.1:8787/_enhancely/jsonld;
}

Step 2: Add the client snippet

Via GTM (recommended):
Create a Custom HTML tag: 
    <script>
window.EnhancelyJsonldConfig = {
  proxyUrl: "/_enhancely/jsonld",
  // debug: true,
  // observeSpa: true,
};
</script>
<script>
/* Paste contents of enhancely-js.js here */
</script>
Via direct <head>: Paste the same config + snippet as early as possible in your <head>.

Step 3: Verify it's working 

    # Test proxy
curl -X POST 'https://YOUR_DOMAIN/_enhancely/jsonld' \
  -H 'Content-Type: application/json' \
  -d '{"url":"https://YOUR_DOMAIN/some/page"}'
Expected: JSON with status: 200, etag, and jsonld containing @context.
Open your page and confirm <head> contains:
<script type="application/ld+json" id="enhancely-jsonld">

Configuration options

  • proxyUrl (required)Your proxy endpoint URL
  • storage localStorage Cache storage (localStorage, sessionStorage, none)
  • revalidateAfterMs 300000 Cache freshness window (5 min)
  • timeoutMs 4000 Network timeout
  • debug false Enable console logging
  • observeSpa false Re-run on SPA navigation
  • includeQueryParams [] Query params to keep in URL identity

SPA support

For single-page applications (React, Vue, Angular), enable automatic re-injection: 
    window.EnhancelyJsonldConfig = {
  proxyUrl: "/_enhancely/jsonld",
  observeSpa: true,  // Re-runs on pushState/popstate
};

Caching behavior

  • First fetch: caches { etag, jsonld, ts } in localStorage
  • Fresh cache (< 5 min): injects immediately, no network call
  • Stale cache: revalidates with If-None-Match header
  • On 304/412: keeps cached JSON-LD

What about existing JSON-LD?

They can co-exist. Multiple JSON-LD blocks are evaluated and merged by processing crawlers like Google.

Compatibility & requirements

  • Browser: Modern browsers with fetch support
  • Proxy: Cloudflare Worker, Node.js, or any server that can forward requests
  • Frameworks: Any (React, Vue, Angular, vanilla JS, GTM)

Learn more