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

Navigate to Marketing tab -> Assets -> Popup
Click on the Create button
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.
The chosen template can be fully customized
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.
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.

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 Variations

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

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

We found that most of the needs are covered with two templates, and we are recommending focusing on them as the first priority.

Popup with the image, title, subtitle, and 2 buttons.
Popup with image, title, sub-title, 2 buttons, and a confirmation check (Terms & Conditions)

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.

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

Last updated 9 months ago