# Banners

**Banners** is a feature designed to bridge the gap between marketing creativity and technical implementation. This helps you manage promotional content by moving away from hard-coded assets on your website toward a dynamic, hyper-personalized, fully managed promotion system.

By leveraging your CRM data, you can **target and segment users** with precision, ensuring you display the right banner to the right people at the right time. Whether it's showing a VIP-only offer or a localized promotion, our segmentation engine gives you full control over who sees what.

***

## Overview

The Smartico Banner system operates through a simple two-part logic: **Placements** and **Banners**. You define the "slots" on your website where content should live, then create the "assets" that populate them. By decoupling the location from the content, you gain the agility to update your site’s look and feel in real-time without touching your source code.

Follow the guide below to configure your display strategy.

### Placement setup

Your first step is to define the locations where you will display the banners on your site.

* **Placement key**: Set a unique, easily identifiable technical name for your placement.
* **Rotation Period**: Defines how long a banner is scheduled to display before switching. (note: to ensure the user actually sees the content, the visual rotation to the next banner will only trigger while the placement is in the visible area on their screen). *If not set, by default the rotation period is 10 seconds.*

<div data-with-frame="true"><figure><img src="/files/uAS4lbtI5QI7dL63SyVV" alt=""><figcaption><p>BO: Placement setup</p></figcaption></figure></div>

### Banner setup

Once your placements are set, you can build your banner assets - images, HTML code, or Liquid templates. Our code editor lets you write HTML- or Liquid-based banners with a real-time preview.

**General setup**

* **Banner type**: You can choose from:
  * Media - Best for quick setups. You simply upload a finished image (JPG, PNG, GIF) or select one from your gallery. You can also use a label tag that points to an image.
  * HTML - Best for high-quality animations and interactivity. You use HTML code to build a banner.
  * Liquid - Create highly personalized Liquid code banners by using programmatic logic. Liquid banners can dynamically change their content based on the user's state.
* **Status**: Enable or Disable the Banner
* **Banner content**: Appears only when HTML or Liquid Banner type is selected. This will open the code editor along with a live preview of the banner.
* **Target value** (for Media):
  * Deeplink - sends the user to a specific screen within the Gamification, rather than a general website
  * URL - This is the standard web address (Hyperlink)
* **Is fallback**: When enabled, this banner will be used as a fallback when all other banners are not visible to the user (due to segmentation or capping), to avoid leaving blank space, the fallback banner will be displayed instead.
* **User Segment**: Set a segment of users who can see the banner.
* **Device type**: You can target Mobile or Desktop devices.
* **Activity period**: The time during which the Banner will be active and visible.
* **Active hours**: Defines specific hours throughout the day when the Banner will be active and showing (within the Active period if defined).
* **Max views per user**: Defines the maximum impressions per user/period. Once reached, the banner will be excluded on the next page load.. One view is counted per page load.
* **Max clicks per user**: Defines the maximum clicks per user/period. Once reached, the banner will be excluded immediately.

{% hint style="info" %}
Note: The view and click capping is based on the information stored on the client side in the browser, so the user who is logging in from a different device or clearing the browser cache will start from the zero values again and will see the banner again, even though he has seen/clicked it before.
{% endhint %}

<div data-with-frame="true"><figure><img src="/files/SUeynC4ckRUCFrkRa2id" alt=""><figcaption><p>BO: General setup of Banners</p></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/Bq1eIuCp7vc1BNlfH05J" alt=""><figcaption><p>BO: Targeting &#x26; Caps setup of Banners</p></figcaption></figure></div>

**Variations**

Maximize relevance by adding banner variations. This allows you to display different content based on specific user criteria - such as brand, language, location, etc., ensuring the right message reaches the right audience.

**Used In**

You can check which placements this banner is currently assigned to.

### Banner assignments

Once your banners are ready, navigate back to your created **Placements** and head to the **Banners tab** to finalize their setup. From here, you can assign which banners appear in that location and how often they should be displayed using the following settings:

**Assign Banner**

* Banner: Select the specific banner you want to display within this placement.
* Weight: Define the display frequency relative to other banners in the same placement using **proportional weighting** rather than a fixed percentage.
  * Example: A banner set to **100** will appear twice as often as one set to 50, and four times as often as one set to **25**.

<div data-with-frame="true"><figure><img src="/files/SiEzDFISWognvTMWCFG7" alt=""><figcaption></figcaption></figure></div>

## Integration on the front-end

Before integrating banners, ensure:

* Contact your Customer Support Manager to enable **Banners** for your label.
* **Smartico SDK** is loaded on the page (the \_smartico global object is available).
* At least one **placement** and one fallback **banner** are configured and active in the Back Office.
* The user is **identified** (logged in) - banners are served to authenticated users.

***

#### Using vanilla JavaScript to show a banner inside a specific element

```javascript
<div id="my_banner_slot"></div>

<script>
  _smartico.showBanner({ placement_key
: 'homepage-top', dom_id: 'my_banner_slot' });
</script>
```

#### Pure HTML, no JavaScript

```html
<div id="sidebar_promo" smr_banner_placement_id="sidebar-promo" style="width: 300px;height:250px;"></div>
```

#### React

```javascript
const HomePage = () => {
    useEffect(() => {
        _smartico.showBanner({ placement_key: 'homepage-top', dom_id: 'homepage_banner'});
    }, []);

    return <div id='homepage_banner' className="banner-slot" />;
};

```

#### Vanilla JavaScript, Multiple placements

```javascript
<div id="header_banner_div"></div>
<div id="sidebar_banner_div"></div>

_smartico.showBanner({ slug: 'header-banner', dom_id: 'header_banner_div' });
_smartico.showBanner({ slug: 'sidebar-banner', dom_id: 'sidebar_banner_div' });
```

Visit our Expo page for detailed explanations, additional examples, and technical specifications: <https://expo.smartico.ai/banners/bnr_intro>

***

## Analytics

Data is the heart of any successful campaign, and our Analytics dashboard gives you a crystal-clear view of your performance. You can track exactly how many views and clicks every single banner receives across all placements, allowing you to move beyond guesswork. By monitoring real-time engagement and Click-Through Rates (CTR), you can instantly identify which creatives are driving the most value and which need a refresh. This level of insight empowers you to make data-backed decisions on the fly, ensuring your most effective promotions always take center stage to maximize your ROI.

<div data-with-frame="true"><figure><img src="/files/5kRyLLSmYytPYQypkxqJ" alt=""><figcaption></figcaption></figure></div>

<figure><img src="/files/MxL2YShy6bFcAIK8M5aO" alt=""><figcaption></figcaption></figure>

<br>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.smartico.ai/welcome/products/banners.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.