Detailed Universal SDK guide

If your project does not follow the React or Vue examples exactly, or if you want to wrap the SDK yourself, this page is a better fit.

Minimal initialization

import { AdManager } from "@action-x/ad-sdk";
import "@action-x/ad-sdk/style.css";

const manager = new AdManager({
  apiBaseUrl: "https://network.actionx.top/api/v1",
  apiKey: "ak_your_api_key",
});

Request and render

await manager.requestAds({
  query: "User query",
  response: "Assistant response",
});

manager.render(document.getElementById("ad-container"));

Vanilla JavaScript example

<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://unpkg.com/@action-x/ad-sdk@latest/dist/style.css"
    />
  </head>
  <body>
    <div id="ad-container"></div>
    <script src="https://unpkg.com/@action-x/ad-sdk@latest/dist/index.umd.js"></script>
    <script>
      const { AdManager } = ActionXAdSDK;

      const manager = new AdManager({
        apiBaseUrl: "https://network.actionx.top/api/v1",
        apiKey: "ak_your_api_key",
      });

      async function onChatComplete(query, response) {
        await manager.requestAds({ query, response });
        manager.render(document.getElementById("ad-container"));
      }
    </script>
  </body>
</html>

Best-fit scenarios

You want to validate results with the least amount of code first
You already have your own frontend abstraction layer and do not want to copy framework examples directly
You need one simple integration pattern shared across multiple frontend projects

Start here

System understanding

Minimal initialization

Request and render

Vanilla JavaScript example

Best-fit scenarios

​Minimal initialization

​Request and render

​Vanilla JavaScript example

​Best-fit scenarios

Minimal initialization

Request and render

Vanilla JavaScript example

Best-fit scenarios