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.

Quick StartReact GuideWordPress Guide
SPA

React

Client-side integration for SPAs or Vite/CRA projects.

Universal

JavaScript Websites

Fastest drop-in option for plain HTML sites and static pages.

SSR

PHP

Server-rendered metadata for custom PHP sites and frameworks.

Official Plugin

WordPress

Official plugin with settings, verification, caching, and status reporting.

App Router

Next.js

Use either the loader script or fetch metadata in the App Router.

How TrendSync Works

Every connector in this project follows the same runtime contract, so once the credentials are ready you can plug it into almost any stack.

1

TrendSync stores the selected metadata recommendation for a client.

2

Your site calls `GET /api/plugin/metadata` with the `X-Api-Key` header.

3

The response includes title, description, keywords, Open Graph, Twitter Card, structured data, and canonical URL.

4

After successful injection, the connector can notify TrendSync with `POST /api/indexing/metadata-injected`.

Before You Start

An active TrendSync account with a registered website and selected metadata option.
Your generated API key from the TrendSync dashboard.
The TrendSync backend base URL, for example `https://api.yourdomain.com`.
A site where you can edit the document `<head>` or inject server-rendered metadata.
The easiest place to collect these values is the dashboard integration flow at ` /dashboard/connectors ` and the API key screen at ` /dashboard/settings `.

Official Loader Script

Use this when you want the browser to fetch metadata and inject it automatically. This is the same contract exposed by `backend/controller/pluginController.js`.

<!-- 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 automatic indexing workflows 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 */}
    </>
  );
}