# Offer Card

{% hint style="info" %}
You'll need to import the javascript file in your website before starting from this [link](https://docs.webtonative.com/javascript-apis/getting-started).
{% 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="ES5+" %}

<pre class="language-javascript"><code class="lang-javascript">import { deviceInfo } 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"
        }
    }
<strong>    
</strong>})
</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="https://46162361-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MbRbEDU7JrvMAgg52AY%2Fuploads%2F8HoraSVl5P1ZQcnDEG1V%2FScreenshot%202024-06-04%20at%202.16.13%E2%80%AFPM.jpeg?alt=media&#x26;token=cc7dea1d-f24d-41c9-8ebd-4508aa0881fa" alt="" width="375"><figcaption><p>iOS</p></figcaption></figure> <figure><img src="https://46162361-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MbRbEDU7JrvMAgg52AY%2Fuploads%2FEvMprN4UGIts98ZFaQAC%2FWhatsApp%20Image%202024-06-04%20at%201.29.56%20PM.jpeg?alt=media&#x26;token=b1a58e8e-8b30-4ae4-bccf-1dba942536ab" alt="" width="339"><figcaption><p>Android</p></figcaption></figure></div>