> For the complete documentation index, see [llms.txt](https://sdk-doc.tyrads.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sdk-doc.tyrads.com/v3.0/web-iframe/premium-widgets.md).

# Premium Widgets

**Premium Widgets** with parameters `pc` (Premium Color) and `widgetStyle` (1, 2, 3, 4)

***

## How to Use Premium Widgets

### Overview

Premium widgets provide a customizable way to display engaging content or offers on your platform. The `pc` (Premium Color) parameter allows you to define the widget's primary color, while the `widgetStyle` parameter offers four predefined styles to match your platform's design.

This guide explains how to integrate and customize these premium widgets using the provided URL structure.

***

### Prerequisites

Before integrating premium widgets, ensure you have:

1. **API Key**: A unique identifier for your account.
2. **API Secret**: A secure token for authentication.
3. **User ID**: Your unique publisher ID.
4. **Platform Information**: Specify "web" or "mobile".
5. **Custom Parameters**:
   * `pc`: Hexadecimal color code for widget customization.
   * `widgetStyle`: Choose from styles 1, 2, 3, or 4.

***

### Integration Steps

#### Steps: Embed the Iframe Widget

To integrate the premium widget into your platform, follow these steps:

**1. Copy the Iframe Code**

Use the following iframe template:

```html
https://sdk-widget.tyrads.com/?apiKey=YOUR_API_KEY&apiSecret=YOUR_API_SECRET&userID=YOUR_USER_ID&platform=PLATFORM_TYPE&pc=COLOR_CODE&widgetStyle=STYLE_NUMBER

```

**2. Replace Placeholder Values**

Replace the placeholders in the iframe code with your actual credentials:

* `YOUR_API_KEY`: Replace with your API Key.
* `YOUR_API_SECRET`: Replace with your API Secret.
* `YOUR_USER_ID`: Replace with your User ID.
* `PLATFORM_TYPE`: Specify "web" or "mobile".
* `COLOR_CODE`: Replace with a hex color code (e.g., `#7e7e7e`).
* `STYLE_NUMBER`: Choose one of the predefined styles (1, 2, 3, or 4).

### Parameters Explained

#### 1. **pc (Premium Color)**

* Defines the primary color of the widget.
* Use hexadecimal color codes (e.g., `#FF5733` for orange).
* Example: To set a gray theme, use `pc=%237e7e7e` in url bar.

#### 2. **widgetStyle**

* Determines the widget's layout and appearance.
* Available styles:
  * **1**: Minimalist design.
  * **2**: Modern layout with rounded edges.
  * **3**: Compact style for smaller spaces.
  * **4**: Bold and vibrant design for maximum engagement.
* Example: To use style 2, set `widgetStyle=2`.

***

### Features of Premium Widgets

* **Customizable Appearance**: Adjust colors and styles to match your branding.
* **Responsive Design**: Widgets adapt to different screen sizes automatically.
* **Interactive Content**: Engages users with visually appealing offers.

***

### Troubleshooting

#### Common Issues:

1. **Widget Not Loading**:
   * Verify that all credentials (API Key, Secret, User ID) are correct.
   * Ensure there is no typo in the iframe URL.
2. **Incorrect Colors or Styles**:
   * Double-check the hex color code and style number in the URL.
3. **Authentication Errors**:
   * Confirm that your API Key and Secret are valid and active.

***

### Conclusion

Premium Widgets offer a flexible and visually appealing way to enhance user engagement on your platform. By customizing colors (`pc`) and styles (`widgetStyle`), you can seamlessly integrate these widgets into your application while maintaining brand consistency.