Offers Player API Javascript SDK Integration Guide

This guide explains how to integrate the Dynata Offers Player API JavaScript SDK into your website to display offers. You can choose to use the done-for-you offer detail modal or customize it so the experience fits seamlessly within your app.

Getting Started

Include the SDK Script

Add this script to your site’s HTML:

QA Environment:
<script src="https://sdk.surveyb.dev/1.6/sdk.min.js"></script>

PROD Environment:
<script src="https://sdk.surveyb.in/1.6/sdk.min.js"></script>

Initialization

Before calling any SDK methods, initialize it:

window.dynataOffersSdk.init({
  params: "<URL_PARAMS_STRING>",
  appUserId: "<UNIQUE_USER_IDENTIFIER>",
});

Params:

params: Unique integration identifier.
appUserId: Unique identifier for the user (hashed internally).

Theme Customization (Optional)

window.dynataOffersSdk.configureTheme({
  primary: "#FF5733",
  secondary: "#4CAF50",
});

Fetching Offers

All Offers

const offers = await window.dynataOffersSdk.fetchOffers({
  os: "Android,iOS,Desktop", // optional comma delimited - using one or more of the following: "Android", "Desktop", "iOS"
  featured: false,     // optional - default false
  limit: 20,           // optional - default 20
  offset: 0            // optional
  includeGoals: false  // optional - default false
});

In-Progress Offers

Offers a user has clicked into with intent to start the offer.

const inProgressOffers = await window.dynataOffersSdk.fetchOffersInProgress({
  includeGoals: false, // optional - default false
});

Offer Object Format

If includeGoals = true, the response includes all offer details and goal data needed to build a fully customized offer detail modal. If you want the modal rendered for you, see the section below: Rendering an Offer Modal.

{
  id: 62927,
  title: "Solitaire Stash: Win Real Cash",
  reward: 2.43,
  rewardString: "$2.43"
  thumbnailUrl: "https://example.com/thumbnail.jpg",
  heroImageUrl: "https://example.com/hero.jpg",
  description: "Play and win real cash in this exciting solitaire game!",
  platforms: ["Phone", "Tablet", "Desktop", "Web"],
  operatingSystems: ["Android", "iOS", "Windows", "MacOS", "Amazon"],
  featuredRank: 1,
  categories: ["Food & Drink", "Gaming"],
  promotion: {
    multiplier: 2.0,
    originalReward: 1.21,
    originalRewardString: "$1.21"
  }
  standardGoals: [
    {
      id: 410521,
      title: "Complete 5 games",
      description: "Complete 5 games",
      reward: 1.43,
      rewardString: "$1.43"
      isCompleted: false,
      sortOrder: 1,
      attributionWindowMinutes: 1400,
      promotion: {
        multiplier: 2.0,
        originalReward: 1.21,
        originalRewardString: "$1.21"
      }
    },
  ],
  purchaseGoals: [
    {
      id: 410741,
      title: "3 Games completed",
      description: "Complete 5 games",
      reward: 3.43,
      rewardString: "$3.43"
      isCompleted: false,
      sortOrder: 1,
      attributionWindowMinutes: 1400,
      promotion: {
        multiplier: 2.5,
        originalReward: 2.21,
        originalRewardString: "$2.21"
      }
    },
  ]
}

For in-progress offers, the goals use completeByUtc instead of attributionWindowMinutes:

{
  id: 62927,
  title: "Solitaire Stash: Win Real Cash",
  reward: 2.43,
  rewardString: "$2.43"
  thumbnailUrl: "https://example.com/thumbnail.jpg",
  heroImageUrl: "https://example.com/hero.jpg",
  description: "Play and win real cash in this exciting solitaire game!",
  platforms: ["Phone", "Tablet", "Desktop", "Web"],
  operatingSystems: ["Android", "iOS", "Windows", "MacOS", "Amazon"],
  featuredRank: 1,
  categories: ["Food & Drink", "Gaming"],
  promotion: {
    multiplier: 2.0,
    originalReward: 1.21,
    originalRewardString: "$1.21"
  }
  standardGoals: [
    {
      id: 410521,
      title: "Complete 5 games",
      description: "Complete 5 games",
      reward: 1.43,
      rewardString: "$1.43"
      isCompleted: false,
      sortOrder: 1,
      completeByUtc: "2025-09-11T14:37:22Z",
      promotion: {
        multiplier: 2.0,
        originalReward: 1.21,
        originalRewardString: "$1.21"
      }
    },
  ],
  purchaseGoals: [
    {
      id: 410741,
      title: "3 Games completed",
      description: "Complete 5 games",
      reward: 3.43,
      rewardString: "$3.43"
      isCompleted: false,
      sortOrder: 1,
      completeByUtc: "2025-09-11T14:37:22Z",
      promotion: {
        multiplier: 2.5,
        originalReward: 2.21,
        originalRewardString: "$2.21"
      }
    },
  ]
}

In other cases the offer returned has the following structure:

{
  id: 62927,
  title: "Solitaire Stash: Win Real Cash",
  reward: 2.43,
  rewardString: "$2.43"
  thumbnailUrl: "https://example.com/thumbnail.jpg",
  heroImageUrl: "https://example.com/hero.jpg",
  description: "Play and win real cash in this exciting solitaire game!",
  platforms: ["Phone", "Tablet", "Desktop", "Web"],
  operatingSystems: ["Android", "iOS", "Windows", "MacOS", "Amazon"],
  featuredRank: 1,
  categories: ["Food & Drink", "Gaming"],
  promotion: {
    multiplier: 2.0,
    originalReward: 1.21,
    originalRewardString: "$1.21"
  }
}

When the promotion object is null there is no active promotion. Active promotion details are provided in the promotion object. multiplier indicates the multiplier that has been applied to the offer reward, while originalReward is an indicator of the reward prior to the applied promotion multiplier.

Render any fetched offer in a done-for-you modal that handles display of offer details, QR code, and offer navigation.

window.dynataOffersSdk.renderOfferModal(offerId);

If the offer is in-progress:

window.dynataOffersSdk.renderOfferModal(offerId, true);

Example Integration Flow with Tiles

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Offer Wall</title>
    <style>
      body {
        font-family: sans-serif;
        margin: 20px;
      }
      .offers-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
      }
      .offer-tile {
        width: 200px;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 12px;
        cursor: pointer;
        transition: box-shadow 0.2s ease;
      }
      .offer-tile:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
      .offer-img {
        width: 100%;
        height: 120px;
        object-fit: cover;
        border-radius: 4px;
      }
      .offer-title {
        font-size: 16px;
        font-weight: bold;
        margin-top: 8px;
      }
      .offer-reward {
        margin-top: 4px;
        color: #00a5ed;
      }
    </style>
  </head>
  <body>
    <h2>Available Offers</h2>
    <div id="offers" class="offers-grid"></div>

    <script src="https://sdk.surveyb.dev/1.0/sdk.min.js"></script>
    <script>
      async function setupOffers() {
        await window.dynataOffersSdk.init({
          params: "<SIGNED_PARAMS_FROM_BACKEND>",
          appUserId: "user@example.com",
        });

        const offers = await window.dynataOffersSdk.fetchOffers();

        const container = document.getElementById("offers");
        offers.forEach((offer) => {
          const tile = document.createElement("div");
          tile.className = "offer-tile";
          tile.onclick = () => {
            window.dynataOffersSdk.renderOfferModal(offer.id);
          };

          tile.innerHTML = `
        <img class="offer-img" src="${offer.thumbnailUrl}" alt="${offer.title}" />
        <div class="offer-title">${offer.title}</div>
        <div class="offer-reward">${offer.reward}</div>
      `;

          container.appendChild(tile);
        });
      }

      setupOffers();
    </script>
  </body>
</html>

Troubleshooting

Error	Description
`Authentication failed`	Check your `params` and `appUserId`.
`Offer with ID not found`	Ensure offers were fetched before rendering.

Offers Player API Javascript SDK Integration Guide

Getting Started​

Include the SDK Script​

Initialization​

Theme Customization (Optional)​

Fetching Offers​

All Offers​

In-Progress Offers​

Offer Object Format​

Rendering an Offer Modal​

Example Integration Flow with Tiles​

Troubleshooting​