Smartico Help Center
Admin loginSmartico.aiTheAffiliatePlatform.com
  • Welcome
  • Products
    • 🔆CRM Automation
      • ◾Create Journey Flow
      • ◾Event Driven Journey
      • ◾Automation Rules
      • ◾Campaigns vs Automation Rules
      • ◾Segmentation
        • ▪️User State Segments
        • ▪️Behavioral Segments
        • ▪️Imported Segments
      • ◾Activities of Flows
        • ▪️Activity: Email
        • ▪️Activity: SMS, Viber and WhatsApp
        • ▪️Activity: Telegram Bot
        • ▪️Activity: Custom IM
        • ▪️Activity: WebHook
        • ▪️Activity: Limit
        • ▪️Activity: Add Points
      • ◾Communication channels
        • ▪️Email
        • ▪️Liquid Email
        • ▪️SMS, Telegram, Viber, and WhatsApp
        • ▪️Popups
        • ▪️Inbox
        • ▪️Push notifications
        • ▪️Content Variations
        • ▪️Opt-out & Communication Statuses
        • ▪️Gamification activities in the communications
      • ◾A/B Testing
    • 🎮Gamification Blocks
      • Setup steps and checklist
      • Points
      • Gems & Diamonds
      • Levels
        • Level Map
        • Levels Tips & Hints
      • Missions
        • Mission Types & Statuses
        • How to set up a Mission
      • Tournaments
        • Tournament Setup
      • Badges
      • Store
      • Example setup
      • Gamification UI skinning
      • Terms to protect
    • 🧠AI Models
      • ◾AI Enhancer
      • ◾Best Time Model
      • ◾Churn & LTV prediction
      • ◾Favorite product
      • ◾RFM Analysis
      • ◾Sport Recommendations
    • 🎲Mini Games
      • ◾Introduction to Mini Games
      • ◾Game template setup
      • ◾Custom skins for Mini-games
      • ◾Mini-games on the landing pages
      • ◾Using images instead of prize names in Spin the Wheel
      • 🏴‍☠️Treasure Hunt
      • ⚽MatchX Game
        • Creating Rounds
        • Resolution of a Round
        • Leaderboard
        • Game Statuses
        • FAQ: MatchX game
        • Loading MatchX & Quiz games on website
      • ❓Quiz Game
      • 🪂Prize Drop
    • 🗺️Lootbox 2.0
    • 🎁Missions Lootbox
    • 🏆Jackpots
    • 🎟️Raffles
    • 💡General concepts
      • ◾Bonuses
      • ◾Dynamic Rewards
      • ◾Custom Sections
      • ◾Attribution value
      • ◾Label tags
      • ◾Multi-currency usage report
      • ◾Multi-brands support
      • ◾Override translations on Label/Brand Level
      • ◾User markers (tags)
      • ◾Deep-links
      • ◾User roles in Back Office
      • ◾Email Gateways Guide
      • ◾"Client action" event
      • ◾Custom fields/attributes
    • 💻UI Widgets
    • ❔FAQs
      • FAQ: Gamification
      • FAQ: Data Studio & Reports
      • FAQ: CRM Automation
      • FAQ: Front-end integration
      • FAQ: Other topics
      • FAQ: Bonuses
  • Use cases
    • 🔆CRM Automation
      • ◾Cross-sell. Match users on different brands
      • ◾Mini-games usage in marketing campaigns
      • ◾Optimize Communication by excluding disengaged players
      • ◾Automated Sports Campaigns
  • Technical guides
    • ◾Integration process
    • ◾Front-end integration
      • ▪️Extended integration
      • ▪️Push configurations
      • ▪️Acquisition mode
    • ◾Data integration
    • ◾Bonus API integration
    • ◾Secured Messaging Gateways (Email/SMS/IM)
    • ◾Reverse integration
    • ◾Smartico Data Warеhouse
      • ◾Smartico DWH \ Affiliation views
      • ◾Smartico DWH \ CRM views
      • ◾Smartico DWH \ Gamification views
    • ◾Games catalog API
    • ◾Custom push gateways
    • Branded Links
  • More
    • 📝Release notes
      • 🌷May 2025
      • 🌷April 2025
      • 🌷March 2025
      • ❄️February 2025
      • ❄️January 2025
      • ⛄December 2024
      • 🍁November 2024
      • 🍁October 2024
      • 🍁September 2024
      • 🌞August 2024
      • 🌞July 2024
      • 🌞June 2024
      • 🌷May 2024
      • 🌷April 2024
      • 🌷March 2024
      • ❄️February 2024
      • ❄️January 2024
      • ⛄December 2023
      • 🍁November 2023
      • 🍁October 2023
      • 🍁September 2023
      • 🌞August 2023
      • 🌞July 2023
      • 🌞June 2023
      • 🌷May 2023
      • 🌷April 2023
      • 🌷March 2023
      • ❄️February 2023
      • ❄️January 2023
      • ⛄December 2022
      • 🍁November 2022
      • 🍁October 2022
      • 🍁September 2022
      • 🌞June 2022
      • ❄️January 2022
      • 🍁October 2021
      • 🌞July 2021
      • 🌷April 2021
      • ❄️February 2021
    • ⚙️Support Scope
    • 👍Request Demo
Powered by GitBook

More

  • expo.smartico.ai
  • ice.smartico.ai
  • play.smartico.ai

@ 2025 Smartico.ai

On this page
  • Managing popup assets
  • Creating custom popup templates
  • Pop-up Queue System

Was this helpful?

  1. Products
  2. CRM Automation
  3. Communication channels

Popups

Last updated 7 months ago

Was this helpful?

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

  1. Navigate to Marketing tab -> Assets -> Popup

  2. Click on the Create button

  3. Firstly choose the Resource name (recommended to reflect the most possible it's usage).

  4. Choose the popup template from our predesigned options. All templates are 100% customizable in order to keep your branding aligned.

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

  6. 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:

  1. Deposit alerts

  2. Mission unlocked, completed

  3. Promotions

  4. Invitations

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

Creating custom popup templates

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.

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

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!

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 -

🔆
◾
▪️
▪️Content Variations
https://github.com/smarticoai/JavaScript-Templates
The chosen template can be fully customized
Template editing form