Offer Card

Show video/image card to your users for discounts or offers or information.

You'll need to import the javascript file in your website before starting from this link.

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

Plain 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"
        }
    }
    
})

ES5+

import { deviceInfo } from "webtonative"

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"
        }
    }
    
})

Parameters

action

• url

• button (optional)

  • textColor = Button text colour

  • bgColor = Button background colour

  • text = Button text

card

• 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

• unit = days/minutes/hours

• Functionality for scheduling added on 12/12/2025

iOS

Android