Skip to main content
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