> 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/website-plugins/wordpress/offercard.md).

# WordPress Offer Card Setup Guide

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXd60U4GK3C4jTNcY4aFyC3J7iLrw1D2Mr96I1-roLRV15u8gctJLsTPM-MY9kH6CWn-j5Ru0re8unfeCu7fvfl12dEemTRFcGIvmlTAcp_RSXk4hh8jK_RhWE3ZuQj1MY5czNGKiA?key=8fypB0WwX012kuShdOKyH1VA" alt=""><figcaption></figcaption></figure>

```
[wtn_offercard action_url="https://www.webtonative.com" button_text_color="#FFFFFF" button_bg_color="#c2175b" button_text="Hurry!" card_size="SMALL" card_position="RIGHT"  card_bg_color="#000000" content_type="IMAGE" content_url="https://files.123freevectors.com/wp-content/resized/509296-holi-banner.jpg?w=500&q=95" id="1" schedule_duration=9 schedule_unit="minutes"]
```

The <mark style="color:green;">**\[wtn\_offercard]**</mark> shortcode displays a customizable offer card with the following options:

* **action\_url**: URL to navigate to when the button is clicked.
* **button\_text\_color**: Color of the button text (hex code).
* **button\_bg\_color**: Background color of the button (hex code).
* **button\_text**: Text displayed on the button.
* **card\_size**: Size of the card (<mark style="color:green;">SMALL</mark>, <mark style="color:green;">FULL\_SCREEN</mark>, or <mark style="color:green;">FULL\_WIDTH</mark>).
* **card\_position**: Horizontal alignment of the card, (SMALL size card position default position right) (Has no impact in case of FULL\_SCREEN | FULL\_WIDTH )  (<mark style="color:green;">LEFT</mark>, <mark style="color:green;">RIGHT</mark>).
* **card\_bg\_color**: Background color of the card (hex code).
* **content\_type**: Type of content on the card (<mark style="color:green;">IMAGE</mark> or <mark style="color:green;">VIDEO</mark>).
* **content\_url**: URL of the image or video content displayed.
* **id**: Unique identifier for the card.
* **schedule\_duration**: Duration for scheduling the card's display.
* **schedule\_unit**: Unit of time for the schedule (<mark style="color:green;">minutes</mark>, <mark style="color:green;">hours</mark>, <mark style="color:green;">day</mark>).

<div><figure><img src="/files/A2pyNkQyzosgJNYfvSRN" alt="" width="270"><figcaption><p>Small screen offercard</p></figcaption></figure> <figure><img src="/files/SrWAFGs0OrNMMDZxwF5C" alt="" width="295"><figcaption><p>Full screen offercard</p></figcaption></figure></div>

This shortcode generates an offer card with a button, an image, or video content that is visually appealing and functional.

<br>