🎯 @thegamified/offer-widget

Embed gamified offers and rewards history into any website or app — React, Angular, Vue, React Native, or even plain HTML!

✨ Features

✅ Works with React, Next.js, Angular, Vue, React Native, and plain JS
✅ Lightweight — under 10KB
✅ Plug-and-play iframe integration
✅ Fully responsive and secure (uses your secret key)
✅ Customizable with user parameters
✅ Supports both Offers and Rewards History

📦 Installation

Install using npm or yarn:

npm install @thegamified/offer-widget
# or
yarn add @thegamified/offer-widget

---

## 🔑 Get Your Secret Key

You’ll find your secret key in your **TheGamified Dashboard → Settings**.  
This key connects your widget securely to your Gamified account.


---

## ⚛️ React / Next.js Example

import { OfferWidget, RewardsHistoryWidget } from "@thegamified/offer-widget/react";

function App() {
  return (
    <div style={{ height: "100vh" }}>
      <OfferWidget
        secret="YOUR_SECRET_KEY"
        mobile="*******989"
        email="[email protected]"
        gender="male"
        age="25"
        city="Delhi"
        state="Delhi"
        os="Android"
        device="Mobile"
      />

      <RewardsHistoryWidget 
        secret="sk_live_abc123xyz" 
        height="700px" 
      />
    </div>
  );
}

export default App;

---

## 🅰️ Angular Example

import { Component, OnInit } from "@angular/core";
import { offerWidget, offerHistory } from "@thegamified/offer-widget";

@Component({
  selector: "app-root",
  template: `
    <div id="offer-container"></div>
    <div id="history-container"></div>
  `,
})
export class AppComponent implements OnInit {
  ngOnInit() {
    offerWidget("offer-container", {
      secret: "YOUR_SECRET_KEY",
      mobile: "*******989",
      email: "[email protected]",
      city: "Delhi",
      state: "Delhi",
      gender: "male",
      age: "25",
      os: "Android",
      device: "Mobile",
    });

    offerHistory("history-container", "YOUR_SECRET_KEY");
  }
}

---

## 📱 React Native Example

import React from "react";
import { WebView } from "react-native-webview";

export default function App() {
  return (
    <WebView
      source={{
        uri: "https://thegamified.com/embed/offer?secret=YOUR_SECRET_KEY&mobile=9896543210&[email protected]&city=Delhi&state=Delhi",
      }}
      style={{ flex: 1 }}
    />
  );
}

---

## 🌐 Plain HTML / JavaScript Example

<div id="offer-container"></div>
<div id="history-container"></div>

<script type="module">
  import { offerWidget, offerHistory } from "https://cdn.jsdelivr.net/npm/@thegamified/offer-widget@latest/dist/index.mjs";

  offerWidget("offer-container", {
    secret: "YOUR_SECRET_KEY",
    mobile: "9896543210",
    email: "[email protected]",
    city: "Delhi",
    state: "Delhi",
  });

  offerHistory("history-container", "YOUR_SECRET_KEY");
</script>