> For the complete documentation index, see [llms.txt](https://docs.webtonative.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webtonative.com/javascript-apis/offer-card.md).

# Offer Card API

{% hint style="info" %}
You'll need to import the javascript file in your website before starting from this [link](/javascript-apis/getting-started.md).
{% endhint %}

It is a UI component commonly used to present special promotions, pieces of information, or deals to users.

{% tabs %}
{% tab title="Plain Javascript" %}

```javascript
const { loadOfferCard } = window.WTN

loadOfferCard({
    "action": "showOfferCard",
    "data": {
        "action": {
            "url": "https://www.webtonative.com",
            "button": {
                "textColor": "#FFFFFF",
                "bgColor": "#111111",
                "text": "WebToNative",
            }
        
        },
        "card":{
            "size": "SMALL",
            "position": "RIGHT",
            "bgColor":"#000000",
            "content": {
                "type": "IMAGE",
                "url": "https://wallpaperaccess.com/full/2083830.jpg"
            }
        },
        "id": "abc", // optional - specify only when to use the scheduling feature
        "schedule": {
            "duration": 1,
            "unit": "minutes"
        }
    }
    
})
```

{% endtab %}

{% tab title="npm" %}

<pre class="language-javascript"><code class="lang-javascript">import { loadOfferCard } from "webtonative"

<strong>loadOfferCard({
</strong>    "action": "showOfferCard",
    "data": {
        "action":{
            "url": "https://www.webtonative.com",
            "button": {
                "textColor":"#FFFFFF",
                "bgColor":"#111111",
                "text": "WebToNative",
            }
        
        },
        "card":{
            "size": "SMALL",
            "position": "RIGHT",
            "bgColor":"#000000",
            "content": {
                "type": "IMAGE",
                "url": "https://wallpaperaccess.com/full/2083830.jpg"
            }
        },
        "id": "abc", // optional - specify only when to use the scheduling feature
        "schedule": {
            "duration": 1,
            "unit": "minutes"
        }
    }
})
</code></pre>

{% endtab %}
{% endtabs %}

## **Parameters**&#x20;

**action**

* url
* button (optional)
  * textColor = Button text colour&#x20;
  * bgColor = Button background colour&#x20;
  * text = Button text&#x20;

**card**&#x20;

* size = SMALL | FULL\_SCREEN | FULL\_WIDTH   (required)
* position = LEFT | RIGHT (SMALL size card position default position right) (Has no impact in case of FULL\_SCREEN | FULL\_WIDTH )
* bgColor = Card background colour
* content (required)
  * type = IMAGE | VIDEO
  * url = Url of image or video they show in card

**id**

* To use the scheduling feature, you need to provide an offer card ID. You can use any valid ID.

**schedule** (Show Again in) - Controls how long the offer card remains hidden before it can be shown again.

* duration = Number&#x20;
* unit = days/minutes/hours
* Functionality for scheduling added on 12/12/2025

<div align="center" data-full-width="true"><figure><img src="/files/5K1PvF57KiS5b5SiQ6bp" alt="" width="375"><figcaption><p>iOS</p></figcaption></figure> <figure><img src="/files/emQtS0ReX1fgasdM2vgj" alt="" width="339"><figcaption><p>Android</p></figcaption></figure></div>