Offer Card UI Component

This guide will help you implement an Offer Card UI component using plain JavaScript. The Offer Card is used to present special promotions, information, or deals to users in a visually appealing and informative manner. The card can display a video or an image and redirect users to a dedicated page when clicked.

Steps to Implement the Offer Card

1. Plain JavaScript Implementation

To implement the Offer Card using plain JavaScript, follow these steps:

1. Load the Offer Card Component: Use the loadOfferCard function provided by window.WTN.

2. Configure the Offer Card: Provide the necessary parameters such as action URL, button styles, and card details.

Here's an example code snippet:

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

2. ES5+ Implementation

For ES5+ environments, you can import deviceInfo from "webtonative" and use the loadOfferCard function similarly:

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

Parameters

• action

  • url: URL to redirect when the card is clicked.
  • button (optional)
    • textColor: Button text color (e.g., "#FFFFFF").
    • bgColor: Button background color (e.g., "#111111").
    • text: Button text (e.g., "WebToNative").

• card

  • size: Size of the card (SMALL, FULL_SCREEN, FULL_WIDTH).
  • position: Position of the card when size is SMALL (LEFT, RIGHT). Default is RIGHT.
  • bgColor: Card background color (e.g., "#000000").
  • content (required)
    • type: Type of content (IMAGE, VIDEO).
    • url: URL of the image or video to display in the card.

Summary

By following these steps, you can implement an Offer Card UI component to display promotions, information, or deals to users. Customize the card's appearance and behavior using the provided parameters to match your needs. If you encounter any issues, refer to the documentation or support resources for additional assistance.