React & React NativeUpdated Jun 2

Step 1: Quick start (web)

The fastest path to a working rewarded ad in a React web app. Three pieces: load the SDK, render an anchor, open the player on a click.

1. Load the SDK

Add the CDN script to the <head> of public/index.html. Pin to a specific version for production.

<script src="https://cdn.applixir.com/applixir.app.v6.1.0.js" async></script>

This attaches a single global, window.initializeAndOpenPlayer. (If you'd rather not touch index.html, the hook in Step 2 injects the script for you.)

2. Render an anchor and a trigger

The player injects itself into a div you provide. Render it once, keep it mounted, and trigger the ad from a real click.

import { useState } from "react";

const API_KEY = "xxxx-xxxx-xxxx-xxxx"; // from client.applixir.com

export default function WatchAdButton() {
  const [busy, setBusy] = useState(false);

  const handleClick = () => {
    if (busy || !window.initializeAndOpenPlayer) return;
    setBusy(true);
    window.initializeAndOpenPlayer({
      apiKey: API_KEY,
      injectionElementId: "applixir-ad-container",
      adStatusCallbackFn: (status) => {
        // "complete" = the user watched it through.
        if (status?.type === "complete") {
          console.log("Ad watched — show optimistic reward");
        }
        // The player tears itself down after the ad; re-enable on terminal events.
        if (["complete", "skipped", "manuallyEnded", "allAdsCompleted"].includes(status?.type)) {
          setBusy(false);
        }
      },
      adErrorCallbackFn: (error) => {
        console.error("AppLixir error:", error.getError().data);
        setBusy(false);
      },
    });
  };

  return (
    <>
      {/* The player renders here. Do not unmount while an ad is open. */}
      <div id="applixir-ad-container" />
      <button onClick={handleClick} disabled={busy}>
        {busy ? "Loading ad…" : "Watch ad for +3 lives"}
      </button>
    </>
  );
}

That's a complete, working integration. Replace API_KEY with the key from your publisher dashboard, deploy to the domain you registered, and click the button.

Three things that block ads

No user gesture — the player must open from a click or tap, never on mount.
Wrong domain — register the exact domain in the dashboard; localhost won't match.
Anchor unmounted — keep the injectionElementId div in the DOM while the ad plays.

This inline version is fine for one button. For anything real — multiple trigger points, a clean promise-based API, reward handling — lift the logic into the useRewardedAd hook.

1. Load the SDK​

2. Render an anchor and a trigger​

Next​

1. Load the SDK

2. Render an anchor and a trigger

Next