Skip to main content

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 and utilize the done-for-you offer detail modal.

Getting Started​

Include the SDK Script​

Add this script to your site’s HTML:

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

PROD Environment:
<script src="https://sdk.surveyb.in/1.0/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​

TODO: Are Featured Offers and Non-Featured offers mutually exclusive?

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

In-Progress Offers​

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

const inProgressOffers = await window.dynataOffersSdk.fetchOffersInProgress();

Offer Object Format​

Each offer returned has the following structure:

{
  id: 62927,
  title: "Solitaire Stash: Win Real Cash",
  reward: "$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,
  promotion: {
    multiplier: 2.0,
    originalReward: "$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.

Rendering an Offer Modal​

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​

ErrorDescription
Authentication failedCheck your params and appUserId.
Offer with ID not foundEnsure offers were fetched before rendering.