Player Integration

<script src="https://static.playgent.com/player.js"></script>

<div id="playgent-player"></div>

const player = Playgent.init({
  containerId: "playgent-player",
  contentId: "your-content-id",
});

const player = Playgent.init({
  containerId: "playgent-player",
  contentId: "abc123",
  width: "100%",
  height: "600px",
  backgroundColor: "#1a1a2e",
  onGameCompleted: (data) => {
    console.log("Game completed!", data);
  },
});

<script
  src="https://static.playgent.com/player.js"
  data-playgent-player
  data-content-id="abc123"
  data-background-color="#1a1a2e"
  data-disable-leaderboards="true"
></script>

Playgent.init({
  containerId: "playgent-player",
  contentId: "abc123",
  backgroundColor: "#0f0f23",
  font: "Poppins",
});

Playgent.init({
  containerId: "playgent-player",
  contentId: "abc123",
  playButtonBackgroundColor: "#ff6b6b",
  playButtonTextColor: "#ffffff",
  playButtonText: "Start Challenge",
  iconUrl: "https://example.com/my-icon.png",
});

Playgent.init({
  containerId: "playgent-player",
  contentId: "abc123",
  disableLeaderboards: true,
  language: "es",
  shareUrl: "https://example.com/play/my-game",
});

Playgent.init({
  containerId: "playgent-player",
  contentId: "abc123",
  endScreenTitle: "Great Job!",
  endScreenText: "You completed the daily challenge",
  endScreenUrl: "https://example.com/subscribe",
  endScreenButtonText: "Subscribe for More",
});

Playgent.init({
  containerId: "playgent-player",
  contentId: "abc123",
  autoPlayNext: true,
  autoPlayNextSeconds: 5,
});

Playgent.init({
  containerId: "playgent-player",
  contentId: "abc123",
  preRollAdTag: "https://ads.example.com/vast?type=preroll",
  rewardedAdTag: "https://ads.example.com/vast?type=rewarded",
});

Playgent.init({
  containerId: "playgent-player",
  enableAutoGen: true,
  autoGenSelectors: ["article", ".post-content"],
  autoGenExcludeSelectors: [".sidebar", ".ads", ".comments"],
  autoGenGameTypes: ["trivia", "quiz"],
});

{
  contentId: string;
  gameType: string;
  title: string;
}

{
  type: "playgent_game_in_view";
  contentId: string;
  url: string;
  intersectionRatio: number;
}

{
  contentId: string;
  gameType: string;
  title: string;
  score: number;
  durationSeconds: number;
}

const player = Playgent.init({
  containerId: "playgent-player",
  contentId: "abc123",

  onGameView: (data) => {
    console.log("Game loaded:", data.title);
    analytics.track("game_view", { game: data.gameType });
  },

  onGameStarted: (data) => {
    console.log("User started playing:", data.title);
    analytics.track("game_start", { game: data.gameType });
  },

  onGameCompleted: (data) => {
    console.log(
      `Game completed! Score: ${data.score}, Time: ${data.durationSeconds}s`
    );
    analytics.track("game_complete", {
      game: data.gameType,
      score: data.score,
      duration: data.durationSeconds,
    });
  },
});

window.addEventListener("playgent_game_in_view", (event) => {
  console.log("Player in view:", event.detail);
});

// 1) Create the embed
const player = Playgent.init({
  containerId: "playgent-player",
  contentId: "your-content-id",
});

// 2) Trust only messages from this iframe + origin
const playgentOrigin = new URL(player.iframe.src).origin;

window.addEventListener("message", (event) => {
  if (event.origin !== playgentOrigin) return;
  if (event.source !== player.iframe.contentWindow) return;

  const data = event.data || {};
  switch (data.type) {
    case "PG_GAME_VIEW":
      break;
    case "PG_GAME_STARTED":
      break;
    case "PG_GAME_COMPLETED":
      console.log("Score:", data.score);
      console.log("Duration (seconds):", data.duration_seconds);
      break;
  }
});

player.play({
  contentId: "new-content-id",
  backgroundColor: "#2d3436",
});

player.on("gameCompleted", (data) => {
  showConfetti();
});

player.on("gameStarted", (data) => {
  pauseBackgroundMusic();
});

player.off("gameCompleted");

player.destroy();

player.iframe.style.borderRadius = "20px";

<script
  src="https://static.playgent.com/player.js"
  data-playgent-player
  data-enable-auto-gen="true"
  data-auto-gen-selectors="article, .post-body, main"
  data-auto-gen-exclude-selectors=".sidebar, .comments, .ads"
  data-auto-gen-game-types="trivia, quiz, wordgame"
></script>

<!DOCTYPE html>
<html>
  <head>
    <title>My Game Page</title>
  </head>
  <body>
    <div id="game-container"></div>

    <script src="https://static.playgent.com/player.js"></script>
    <script>
      Playgent.init({
        containerId: "game-container",
        contentId: "daily-trivia-2024",
        width: "100%",
        height: "500px",
      });
    </script>
  </body>
</html>

const player = Playgent.init({
  containerId: "playgent-player",
  contentId: "weekly-puzzle",

  // Branding
  backgroundColor: "#1a1a2e",
  font: "Montserrat",
  playButtonBackgroundColor: "#e94560",
  playButtonTextColor: "#ffffff",
  playButtonText: "Play Now",
  hidePlaygentLogo: true,

  // Features
  disableLeaderboards: false,
  language: "en",

  // End screen CTA
  endScreenTitle: "Nice Work!",
  endScreenText: "Come back tomorrow for a new challenge",
  endScreenUrl: "https://example.com/newsletter",
  endScreenButtonText: "Get Daily Games",
});

<article class="blog-post">
  <h1>The History of Coffee</h1>
  <p>Coffee is one of the world's most popular beverages...</p>
  <!-- Article content -->
</article>

<div id="article-quiz"></div>

<script src="https://static.playgent.com/player.js"></script>
<script>
  Playgent.init({
    containerId: "article-quiz",
    enableAutoGen: true,
    autoGenSelectors: ["article.blog-post"],
    autoGenExcludeSelectors: [".author-bio", ".related-posts"],
    autoGenGameTypes: ["trivia"],

    onGameCompleted: (data) => {
      if (data.score >= 80) {
        showBadge("Coffee Expert");
      }
    },
  });
</script>

// Player 1 - Daily Trivia
const triviaPlayer = Playgent.init({
  containerId: "trivia-container",
  contentId: "daily-trivia",
  height: "400px",
});

// Player 2 - Word Game
const wordPlayer = Playgent.init({
  containerId: "word-container",
  contentId: "daily-word",
  height: "500px",
});

// Switch trivia to a different game
document.getElementById("play-sports").addEventListener("click", () => {
  triviaPlayer.play({ contentId: "sports-trivia" });
});

import { useEffect, useRef } from "react";

function PlaygentGame({ contentId, onComplete }) {
  const containerRef = useRef(null);
  const playerRef = useRef(null);

  useEffect(() => {
    if (!containerRef.current) return;

    playerRef.current = window.Playgent.init({
      containerId: containerRef.current.id,
      contentId,
      onGameCompleted: onComplete,
    });

    return () => {
      playerRef.current?.destroy();
    };
  }, [contentId, onComplete]);

  return <div id={`playgent-${contentId}`} ref={containerRef} />;
}

export default PlaygentGame;

// Both work identically
window.Playgent.init(config);
window.PlaygentPlayer.init(config);