Developer Documentation

Integrate the TrendSync plugin across modern web stacks.

This guide is based on the current project implementation: the official loader script, the API-key metadata endpoint, the indexing webhook, and the WordPress plugin settings already shipped in this codebase.

How TrendSync Works

Every integration follows the same pattern: request metadata, apply it to the page, and optionally report the update.

1

TrendSync prepares the SEO metadata for your site.

2

Your site requests it from `GET /api/plugin/metadata` using `X-Api-Key`.

3

Your page applies the returned title, meta tags, schema, and canonical URL.

4

Your connector can report success with `POST /api/indexing/metadata-injected`.

Before You Start

A TrendSync account with your website connected.
Your API key from the TrendSync dashboard.
Your backend URL, for example `https://api.yourdomain.com`.
Access to your site `<head>` or server-rendered metadata.
You can find these in ` /dashboard/connectors ` and ` /dashboard/settings `.

Official Loader Script

Use this when you want the browser to fetch and inject TrendSync metadata automatically.

<!-- Place this inside <head> -->
<script
  async
  src="https://api.yourdomain.com/api/plugin/trendsync.min.js"
  data-api-key="YOUR_API_KEY"
  data-auto-inject="true"
></script>

Optional Injection Reporting

After metadata is applied, your connector can notify TrendSync so indexing can continue.

await fetch("https://api.yourdomain.com/api/indexing/metadata-injected", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "X-Api-Key": "YOUR_API_KEY",
  },
  body: JSON.stringify({
    url: window.location.href,
    metadataType: "full",
  }),
});

Framework Guides

Open only the guide you need. Each section expands with the setup notes and code examples for that stack.

1. Generate or copy your API key from TrendSync.
2. Add `REACT_APP_TRENDSYNC_API_KEY` to your environment file.
3. Mount the loader once near the root of the app, for example in `App.tsx`.
4. Verify that the request to `/api/plugin/metadata` succeeds and the document <head> updates.
React SPA note: because tags are injected in the browser, use this mode when client-side SEO is acceptable for your deployment.
import { useEffect } from "react";

export function TrendSyncLoader() {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://api.yourdomain.com/api/plugin/trendsync.min.js";
    script.async = true;
    script.dataset.apiKey = process.env.REACT_APP_TRENDSYNC_API_KEY || "";
    script.dataset.autoInject = "true";
    document.head.appendChild(script);

    return () => {
      document.head.removeChild(script);
    };
  }, []);

  return null;
}
// App.tsx
import { TrendSyncLoader } from "./TrendSyncLoader";

export default function App() {
  return (
    <>
      <TrendSyncLoader />
      {/* your routes */}
    </>
  );
}