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, informations, 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"
            }
        },
        "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"
            }
        },
        "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

schedule - Used to configure when the offer card should be shown next.

• duration = Number

• unit = days/minutes/hours

• Functionality for scheduling added on 12/12/2025

iOS

Android