> For the complete documentation index, see [llms.txt](https://help.smartico.ai/welcome/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.smartico.ai/welcome/products/crm-automation/communication-channels/pop-up.md).

# Popups

The Smartico system is designed to have an easy but clever marketing flow for your players. To be successful, you will have to decide on many configurations along the way, as well as on the materials you will use.

**The Popup** is one of the most successful channels in our system because it appears on your platform; therefore, the target is only one click away. Click-through rate and, thus, conversion are among the highest across all communication channels.

## **Managing popup assets**

1. **Navigate to** Marketing tab -> Assets -> Popup
2. **Click** on the Create button

   <div data-with-frame="true"><figure><img src="https://77049817-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfS5hl0PiysHtKAKMsQTe%2Fuploads%2F5RJ3gZAGgyaiq7xgCeQ6%2FScreenshot%202026-08-26%20163553.png?alt=media&amp;token=bc6c4398-9f35-45ff-b4fa-2d7bddf8ac0e" alt=""><figcaption><p>BO: Pop-up list</p></figcaption></figure></div>
3. First, choose the Resource name (it’s recommended to assign a name that reflects the pop-up’s most likely usage).
4. Choose the popup template from our predesigned options. All templates are 100% customizable to keep your branding aligned.<br>

   <div data-with-frame="true"><figure><img src="https://77049817-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfS5hl0PiysHtKAKMsQTe%2Fuploads%2Fjed1602kwzohFaCvyuxb%2FScreenshot%202026-08-26%20164002.png?alt=media&amp;token=09c7dd90-4d23-4446-a00f-3c27dfc7df66" alt=""><figcaption><p>BO: Pop-up main customization</p></figcaption></figure></div>
5. Set the header image, titles, and buttons for your content. Use [**Label Tags**](https://help.smartico.ai/welcome/products/general-concepts/label-tags) or any of the platform's core elements for dynamic content.
6. Set up action items for the buttons you are using in the template. Redirect to a page or use a [deeplink](/welcome/products/tools-and-guides/deep-links.md) to open the cashier or a specific section of your platform.\
   **Note**: By default, the pop-up closes on click. If you want it to remain open after redirection, add `&_sm_stay_open=true` to the end of the deeplink.
7. Define text and background colors for buttons, covering both default appearance and hover behavior.

   <div data-with-frame="true"><figure><img src="https://77049817-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfS5hl0PiysHtKAKMsQTe%2Fuploads%2Ffzdgl9OdTtZ55GhY3dVw%2Fimage.png?alt=media&amp;token=85b84e11-75fa-4a10-ac83-f778d3abbc46" alt=""><figcaption><p>BO: Pop-up text &#x26; background color customization</p></figcaption></figure></div>

### Testing with Send Preview

Before launching a campaign, use the **SEND PREVIEW** button in the pop-up editor to send a live test pop-up to a specific player username or external ID. This displays the pop-up immediately in the player's active browser session, allowing you to verify visual appearance, dynamic tag values, and button actions on real devices.

You can use popups for communication of:

1. Deposit alerts
2. Mission unlocked, completed
3. Promotions
4. Invitations
5. Announcements

Suppose your setup includes multiple brands, currencies, or languages, or you want to send different variations for different user types, such as Bronze VIP, Dormant users, etc. You can use variations for various content based on any condition available on the platform. Read more about content variations in this article.

{% content-ref url="/pages/injrKymjK4i3LdupOEwR" %}
[Content Variations](/welcome/products/crm-automation/communication-channels/content-variations.md)
{% endcontent-ref %}

## Creating custom popup templates

{% hint style="info" %}
Note that creating custom templates requires basic knowledge of HTML, CSS, and JSON.
{% endhint %}

Smartico has a set of built-in popup templates that have different visual presentations and functionality.

<div data-with-frame="true"><figure><img src="https://77049817-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfS5hl0PiysHtKAKMsQTe%2Fuploads%2Fgit-blob-b8f03bc48db443630c890e18c59cd7204d0fd528%2Fimage.png?alt=media" alt=""><figcaption><p>BO: Pop-up template picker</p></figcaption></figure></div>

If you cannot find the needed template or want to make a custom styling of the existing one, you can do that in the Marketing \ Templates \ Popup section.

Pick a template that is the closest by the layout and functionality to your idea and make a "Clone" of this template. Change the template name and description if needed. Once a template is no longer needed, you can delete it to keep your list organized and clutter-free.

{% hint style="info" %}
**Note**: Only templates you have created can be deleted; global or system templates cannot be removed. Additionally, a custom template cannot be deleted while it is currently in use by any active pop-up resource or content variation.
{% endhint %}

<figure><img src="https://77049817-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfS5hl0PiysHtKAKMsQTe%2Fuploads%2Fgit-blob-c15697057c4c9deda136c4bb2cdebd90fff1a510%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

In most cases, you will focus on the Body and Preview section on the right side.

In the Body section, you can edit the HTML and CSS of the template, and in Preview, you can see the results of your changes.

If you cloned an existing template, you will find details on building dynamic templates in the HTML tab.

We are using the Blueimp JavaScript template engine, which is flexible and easy to learn. You can find the capabilities of the engine on this page - <https://github.com/smarticoai/JavaScript-Templates>

The template engine takes into context the "o" object that holds configurations of specific resources based on the possible configuration described in the Configuration tab.

For example, the image configuration shown on the screen below is defined by following the configuration block.

{% code expandable="true" %}

```jsonp

    {
        // name of the logic block in popup builder
        "label": "Image", 
        "options": [
            {
                "name": "image",
                // name of the sub-block
                "label": "Image", 
                "fields": [
                    {
                        // name how it will be available in the HTML template, e.g. o.image_url
                        "name": "image_url", 
                        // type of control, possible are "text", "image", "url", "color", "date", "html", "select"
                        "type": "image", 
                        // optional label
                        "label": "", // 
                        // default value
                        "value": "https://static.smartico.ai/f8457add9b8fdef97384fb-PinClipart.com_christmas-tree-with-presents_1245885.png"
                    }
                ],
                // if the element can be hidden. will affect o.image.checked
                "optional": true
            }
        ]
    }

```

{% endcode %}

Example of the "Image" control defined by this configuration.

<div data-with-frame="true"><figure><img src="https://77049817-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfS5hl0PiysHtKAKMsQTe%2Fuploads%2Fgit-blob-13e9dfdb5e7d5b87cc0f39f1b11d84350954ff71%2Fsmartico.ai%20%40%20EU2%202023-03-24%2013-53-04.png?alt=media" alt=""><figcaption></figcaption></figure></div>

Here is an example of a basic template with inline comments

{% code expandable="true" %}

```html
<div class="ao-collapse ao-size-4 ao-block ao-font-lato ao-text-center"
	data-ao-animaze-show="fadein:0 0.3s easeIn;blackout;fitscale"
	data-ao-animaze-popupresize="fitscale;move:window center middle"
	data-ao-animaze-hide="fadeout:0 0.3s;blackout: false" data-ao-blackout-animaze-show="fadein:0 0.5s 30"
	data-ao-blackout-animaze-hide="fadeout:0 0.5s" style="width:{%=o.main_width%}px;">
	<div class="ao-background ao-shadow-md ao-bg"></div>
	<!-- 
	'o' object is the holder of the template configuration applied when template is 
	used for specific resources.
	For example o.image.checked is indicating the image should be shown
	and o.image_url is the URL of image that operator uploaded.
	 -->
	{% if (o.image.checked) { %}
	<div class="ao-half-top ao-shadow-sm ao-bg-green ao-square"
		data-ao-animaze-on-popup="fadein:0.3s 0.5s;move:0.3s 0.5s relative 0 0 0 -100px easeOut"
		style="background:none !important;box-shadow:none;margin-top:30px;width:120px">
		<img src="{%=o.image_url%}" style="width:120px;" />
		</div>
		{% } %}
		<div class="ao-content ao-text-light ao-ins-lg">
			{% if (o.title_block.checked) { %}
			<div class="ao-offs-sm ao-title">{%#o.title%}</div>
			{% } %}
			{% if (o.sub_title_block.checked) { %}
			<div class="ao-text">{%#o.sub_title%}</div>
			{% } %}
		</div>
		<div class="ao-footer ao-ins-h-lg ao-ins-v-md">
			{% if (o.button.checked) { %}
			<a href="{%=o.button_url%}" class="ao-btn ao-text-upper ao-text-light ao-btn-green ao-col-12"
				data-ao-hide-popup="true"
				data-ao-animaze-on-popup="fadein:0.8s 0.5s;move:0.8s 0.5s relative 0 0 0 100px easeOut">
				{%=o.button_text%}
			</a>
			{% } %}
			{% if (o.button2.checked) { %}
			<a href="{%=o.button2_url%}" class="ao-btn ao-text-upper ao-text-light ao-btn-black-lighten ao-col-12"
				style="margin-top:5px" data-ao-hide-popup="true"
				data-ao-animaze-on-popup="fadein:0.8s 0.5s;move:0.8s 0.5s relative 0 0 0 100px easeOut">
				{%=o.button2_text%}
			</a>
			{% } %}
		</div>
		{% if (o.sm_close_button?.checked) { %}
        	<a href="{%=o.close_url%}" class="ao-close ao-text-white" style="filter:drop-shadow(0px 0px 2px black)" data-ao-hide-popup="true">
				<i class="fa fa-times"></i>
			</a>
    	{% } %}		
</div>
```

{% endcode %}

Note that CSS styles and custom attributes for HTML elements are used purely by Smartico templates. You can base your template on them or define your own CSS for the presentation

## Custom popups with HTML / JavaScript / CSS support

You can build a fully custom pop-up that supports HTML, JavaScript, and CSS.

Use a pop-up template called "**Example Popup with HTML/CSS/JS**" as a starting point.

It has examples of basic configuration options and if/else conditions.

<div data-with-frame="true"><figure><img src="https://77049817-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfS5hl0PiysHtKAKMsQTe%2Fuploads%2Fgit-blob-f2ed3cc02683fad93af210053f4c734a9ca0b1bf%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure></div>

Example of configuration JSON

{% code expandable="true" %}

```json
[
    {
        "label": "HTML parameters",
        "options": [
            {
                "name": "title_block",
                "label": "Title block",
                "fields": [
                    {
                        "name": "title_text",
                        "type": "text",
                        "label": "Text",
                        "value": "Welcome"
                    },
                    {
                        "name": "title_color",
                        "type": "text",
                        "label": "Color",
                        "value": "#60a12f"
                    }
                ]
            },
            {
                "name": "main_button",
                "label": "Main button",
                "fields": [
                    {
                        "name": "button_text",
                        "type": "text",
                        "label": "Text",
                        "value": "Get reward"
                    },
                    {
                        "name": "button_url",
                        "type": "url",
                        "label": "Deep link or URL",
                        "value": "dp:ok"
                    }
                ]
            },
            {
                "name": "close_button",
                "label": "Close button",
                "fields": [
                    {
                    }
                ],
                "optional": true,
                "optional_default": true
            }
        ]
    }
]
```

{% endcode %}

Example of HTML and JavaScript

{% code fullWidth="false" expandable="true" %}

```html
  <style>
    #popup {
      width: 300px;
      background: white;
      display: flex;
      flex-direction: column;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      font-family: sans-serif;
      overflow: hidden;
      z-index: 9999;
    }

    a {
      all: unset;
      cursor: pointer;
      text-decoration: none;
    }

    #popup img {
      object-fit: cover;
      width: 200px;
      height: 200px;
      object-fit: cover;
      margin: 20px auto;
      display: flex;
    }

    #popup .content {
      padding: 16px;
      text-align: center;
    }

    #popup .title {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 12px;

      color: {
        %=o.title_color%
      }
    }

    #popup .close {
      position: absolute;
      top: 8px;
      right: 12px;
      font-size: 20px;
      cursor: pointer;
      user-select: none;
    }

    #popup .get-reward {
      margin-top: 12px;
      background: #28a745;
      color: white;
      padding: 10px;
      border-radius: 4px;
      cursor: pointer;
      display: inline-block;
      user-select: none;
    }

    #popup .get-reward:hover {
      background: #218838;
    }
  </style>
</head>

  <div id="popup">
    {% if (o.close_button.checked) { %}
    <div class="close">
      <a href="dp:close">
        x
      </a>
    </div>
    {% } %}
    <img id="popup-image" src="" alt="Random Image" style="display:none" />
    <div class="content">
      <div class="title">{%=o.title_text%}</div>
      <div class="get-reward">
        <a href="{%=o.button_url%}">
          {%=o.button_text%}
        </a>
      </div>
    </div>
  </div>

  <script>
    fetch('https://dummyjson.com/products/category/smartphones')
    .then(res => res.json())
    .then(data => {
      const products = data.products;
      const randomProduct = products[Math.floor(Math.random() * products.length)];
      const image = randomProduct.images[0];
      document.getElementById('popup-image').src = image;
      document.getElementById('popup-image').style = 'display:block'
    })
  </script>



```

{% endcode %}

## Making non-modal popups

By default, all popups are modal, meaning they block users from interacting with the main site until they are closed.

If you want to make a non-blocking pop-up, you will need to define in the configuration the style/size of the frame that holds the pop-up. Use this example as the starting point:

```json
    {
        "label": "Frame style and position",
        "options": [
            {
                "name": "",
                "label": "",
                "fields": [
                    {
                        "name": "frame_style_desktop",
                        "type": "text",
                        "label": "Desktop",
                        "value": "width: 540px; height: 245px; left: 20px;backdrop-filter:none"
                    },
                    {
                        "name": "frame_style_mobile",
                        "type": "text",
                        "label": "Desktop",
                        "value": "width: 100%; height: 245px; backdrop-filter:none"
                    }
                ]
            }
        ]
    }
```

## Pop-up Queue System

The queue system manages the delivery of pop-ups on the front end. This setting is enabled by default, so pop-ups are queued and delivered sequentially, ensuring each pop-up is displayed only after the previous one is closed. If the pop-up queue system is disabled when a pop-up is already displayed, any additional pop-ups will be ignored and not exposed to the end user.

Keep in mind that the 'Pop-up Queue System' is not related to the 'Delivery timeout' option in the pop-up activity within Campaigns:

* Delivery timeout is to keep it on the server until the next connection
* The pop-up queue handles the case when 2 pop-ups are sent at the same time

{% hint style="info" %}
This feature is enabled by default. You can enable or disable the queue and set delays between pop-ups directly in the Back-Office under Label Settings (or contact your Success Manager for assistance). To add a delay between pop-ups, please contact your Success Manager.
{% endhint %}

## Advanced display controls

* **Single tab display**: By default, pop-ups appear in all open browser tabs where the player is online. You can enable single-tab mode in Label Settings to ensure a pop-up displays only in the player's active tab.
* **URL exclusions**: You can define a comma-separated list of URL paths or masks where pop-ups are automatically suppressed (for example, checkout or deposit pages) so players are not interrupted during critical actions. This is configurable in the Label settings
* **Backdrop appearance**: You can customize background overlay opacity and blur intensity to match your branding. Also availabe in the label settings

## Frequently Asked Questions

### Why does my newly created template not appear in the Assets list?

Pop-up templates (under Marketing > Templates > Popup) are layout blueprints, whereas pop-up assets (under Marketing > Assets > Popup) are specific marketing creatives. To use a custom template, create a new pop-up asset in Marketing > Assets > Popup and select your template from the template picker.

### How can I track whether a player clicked the action button in a pop-up?

Buttons configured with deep links (such as `dp:ok` or a custom URL) automatically trigger an engagement action event when clicked. In CJM Campaigns, the pop-up activity node automatically renders connectors that branch your journey based on button clicks and interactions.

### How do I trigger a pop-up when a player visits a specific page?

Create a CJM Campaign triggered by the page navigation event, filter by the page URL or action parameter, and add a Pop-up activity node to show the message immediately upon navigation.

### What are the recommended image dimensions for pop-ups?

Standard modal pop-ups work best with hero images around 600×300px to 800×400px (or 400×400px for square templates). The Smartico SDK automatically scales the pop-up to fit 90% of the viewport on mobile screens, so keeping image file sizes under 200–300 KB ensures fast loading.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://help.smartico.ai/welcome/products/crm-automation/communication-channels/pop-up.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.