Creating PopUps in User.com application context - general information

Introduction

To collect user data, you can use either an embedded form built directly into your website or a PopUp form. PopUps appear on the page to attract the user’s attention and disappear after interaction.

PopUps can be categorized into two types: Redirect PopUps and PopUp Forms.

Redirect PopUps highlight important information or include call-to-action buttons. For instance:

• Exit Intent PopUp: Displays a message like “Check X before leaving,” redirecting users to another page to retain them on the site.

• Seasonal Promotions PopUp: Notifies users about time-sensitive offers with a redirect button.

PopUp Forms collect visitor information, such as contact details. A common example is the Newsletter Sign-Up PopUp, which typically includes an email input field and a marketing consent checkbox. Additional fields can collect user preferences, phone numbers, or other data.

The redirect PopUp and form PopUps examples are provided in the article about the PopUp types: link to the article.

Triggering PopUps

PopUps are triggered using the "Show a PopUp" module within automation scenarios. This module supports two output actions:

• On Show: Triggers actions when the PopUp is displayed.

• On Submit: Executes actions after the PopUp is submitted.

iFrame context

PopUps are embedded on user webpages as an iframe. The iframe’s default structure and styles are as follows:

<div id="usercom-widget" class="usercom-alignment-right">
  <div id="ue_popups">
    <div id="ue_form">
      <iframe title="usercom widget"></iframe>
    </div>
  </div>
  <style>
    /* Widget and iframe styles */
  </style>
</div>

Default iframe styles:

#ue_popups {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 2147483647;
}

#ue_popups #ue_form {  
position: fixed;  
width: 100%;  
height: 100%;  
top: 0;  
left: 0;  
pointer-events: auto;
}

#ue_popups #ue_form iframe {  
width: 100%;  
height: 100%;  
border: 0;}

Important Notes:

1. The iframe occupies the entire screen space (width: 100%; height: 100%;), blocking user interactions.

2. Adjusting iframe size can enable website interactions.

3. Inner styles are relative to the iframe size.

4. To reference iframe elements, use window.top.

Example: reference to the iframe to adjust default styles

var popupIframe = window.top.document.querySelector('#ue_form');
popupIframe.id = "popup-iframe-[Custom ID]";

More about adjusting iframe size to allow user interaction when displaying PopUp you'll find in this article: link to the article here.

Snippet Tags

User.com enables dynamic PopUp content using Django Template language, referred to as Snippet Tags. These tags include:

• User Tags

• Event Tags

• Product Tags

Snippet Tags personalize PopUp content before it displays on the page.

Example of the PopUp HTML code including Snippet Tags

<div class="swiper-wrapper" id="ue-swiper">
    <div class="swiper">
       <!-- {% product_events event_type='view' segment='product_segment' for_last_days=14 count=10 unique=1 order=-1 as event_occurrences %}
      {% for product in event_occurrences %} -->
        <div class="swiper-item">
            <div class="swiper-item__details">
                <a title="{{product.name}}" href="{{product.product_url}}" class="item-link">
                    <img class="item-photo" src="{{product.image_url}}" alt="{{product.name}}" draggable="false">
                </a>
                <a title="{{product.name}}" href="{{product.product_url}}" class="item-link">
                    <span class="item-name">{{product.name}}
                    </span>
                </a>
                <div class="item-specs__wrapper">
                </div>
            </div>
        </div>
        <!-- {% endfor %} -->

More about using Snippet Tags to create dynamic PopUp content: link to the article.

Why verbatim is Used in Code Snippets (and When Not to Use It)

In this article, verbatim tags are included in the code snippets to prevent the execution of Snippet Tags within the scope of the article. Since the article is created in the User.com Knowledge Base module, which supports Django Template Tags, the "verbatim" block ensures that any dynamic code, such as Snippet Tags, is displayed as plain text rather than being rendered or executed. This allows users to view the intended structure and functionality of the code without interference.

However, in actual implementations within the User.com application, the verbatim tags should not be used.

The Snippet Tags are intended to be executed dynamically, rendering personalized or data-driven content for the user at runtime. The verbatim block is solely for documentation purposes and should be omitted in functional code to ensure proper execution

PopUps submit and closing

The User.com widget on the website handles the PopUp submit and close actions. The mechanism and code examples are shown in this article: link to the article here.