▪️Popups
Smartico system is designed to have an easy but clever marketing flow for your players. In order to be successful you will have to decide on many configurations along the way, as well as on the materials you will be using.
The Popup is one of the most successful channels in our system as the Popup will appear within your platform therefore the target is only one click away. Impression, click ratio and therefore conversion is one of the highest out of all the communication channels.
Managing popup assets
Navigate to Marketing tab -> Assets -> Popup
Click on the Create button
BO: Pop-up list Firstly choose the Resource name (recommended to reflect the most possible it's usage).
Choose the popup template from our predesigned options. All templates are 100% customizable in order to keep your branding aligned.
BO: Pop-up main customization Set the header image, the titles, the buttons to your content. Use Label Tags or any of the core elements of the platform for dynamic content.
BO: Pop-up label tags Setup action items for the buttons you are using in the template. Redirect to a page or use a Deeplink, that will open the cashier or any given section of your platform.
BO: Pop-up button text & redirect 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:
Deposit alerts
Mission unlocked, completed
Promotions
Invitations
Announcements
If your setup includes multiple brands, multiple currencies, multiple languages, or you want to send different variations entirely for different types of users like Bronze VIP, Dormant users, etc. You can use variations for different content based on any condition available on the platform. Read more about content variations in this article
▪️Content VariationsCreating custom popup templates
Smartico has 10 built-in popup templates that have different visual presentations and functionality.
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.
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, in the HTML tab you will find specifics of building dynamic templates.
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 fully custom popup with support of HTML, JavaScript and CSS.
Use a popup template called "Example Popup with HTML/CSS/JS" as a starting point.
It has example of basic configurations options and if/else conditions.
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<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>
<body>
<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>
</body>
</html>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
Last updated
Was this helpful?