▪️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

   

   BO: Pop-up list
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.

   

   BO: Pop-up main customization
5. Set the header image, titles, and buttons for your content. Use Label Tags or any of the platform's core elements for dynamic content.

   

   BO: Pop-up label tags
6. Set up action items for the buttons you are using in the template. Redirect to a page or use a deeplink 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.

   

   BO: Pop-up button text & redirect
7. Define text and background colors for buttons, covering both default appearance and hover behavior.

   

   BO: Pop-up text & background color customization

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 Variations

Creating custom popup templates

Note that the creation of custom templates requires basic knowledge of HTML, CSS and JSON structures.

Smartico has 10 built-in popup templates that have different visual presentations and functionality.

BO: Popo-up template picker

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.

Note: Only templates you've created can be deleted, global or system templates cannot be removed.

Template editing form

In most cases, you will focus on the Body and Preview tabs.

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 one of the existing templates, you will find details on building dynamic templates in the HTML tab.

We are using 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 is taking into the context "o" object that is holding 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.

    {
        // 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.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.img.checked
                "optional": true
            }
        ]
    }

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

Here is an example of a basic template with inline comments

<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>

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.

Example of custom popup with JavaScript support

Example of configuration 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
            }
        ]
    }
]

Example of HTML and JavaScript

  <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>

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:

    {
        "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, meaning pop-ups will be queued and delivered one after the other, 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

• This feature is enabled by default if you want to disable it please get in touch with your Success Manager!

• To add a delay between pop-ups, please get in touch with your Success Manager!