Pop-up interaction configuration guide

Pop-ups in User.com support various user interactions, including data collection, navigation redirects, and dismissal actions. This article provides step-by-step instructions for configuring inputs, submit buttons, and close buttons in pop-ups. Each section includes structured examples and best practices to ensure compatibility and functionality in your implementation.

Configuring inputs in pop-ups

Basic input fields in pop-ups are used to collect essential user data, such as names, email addresses, or phone numbers. To ensure proper data mapping in User.com, the name attribute of the input field must match the corresponding user attribute name. User.com supports both standard attributes, such as first_name, last_name, and phone_number, and custom attributes, which can be defined to meet specific business needs, like marketing consents or e-commerce statistics. Defining the input type (e.g., text, email, or number) and adding descriptive placeholder text improves user guidance and ensures accurate data collection.

Required inputs

Required input fields ensure that users provide essential information before submitting a pop-up form. To configure an input field as required in User.com, include the required attribute in the input element. This attribute enables browser-level validation, prompting users to complete the field before submission. Pairing this with clear placeholder text or labels enhances usability.

Example: Required input

<input type="email" name="email" placeholder="Enter your email address" required>

In this example:

• type="email" ensures the input is validated as an email address.

• name="email" maps the field to the user’s email attribute in User.com.

• required ensures the field must be filled out before the form is submitted.

• placeholder="Enter your email address" guides the user.

Optional inputs

Optional input fields complement required fields by allowing users to provide additional, non-mandatory data. For instance, a pop-up form might require an email address while optionally collecting the user's first name. To configure this, both fields need a name attribute for data mapping, but only the mandatory field includes the required attribute.

Example: Configuring required and optional input fields

<input type="email" name="email" placeholder="Enter your email address" required>
<input type="text" name="first_name" placeholder="Enter your first name (optional)">

In this example:

• The email input is mandatory because it includes the required attribute.

• The first name input is optional because the required attribute is omitted.

• name="email" and name="first_name" ensure data maps to the correct attributes in User.com.

Configuring single checkbox inputs

A single checkbox is often used for binary choices, such as granting consent. To configure a single checkbox, you use an <input type="checkbox">. The name attribute maps to the user attribute in User.com. When the box is checked, the value true is sent.

Example: Newsletter consent checkbox

<label>
  <input type="checkbox" name="newsletter_consent">
  I agree to receive the newsletter.
</label>

In this example:

• type="checkbox" creates a single checkbox.

• name="newsletter_consent" maps the input to the newsletter_consent user attribute.

• The <label> makes the text clickable, improving usability.

Configuring fixed-choice (multiple choice) inputs

Fixed-choice inputs allow users to select one or more predefined options from a list, which is ideal for collecting data on interests or communication preferences. This is achieved by using multiple <input type="checkbox"> elements that share the same name attribute. When a user selects multiple options, all corresponding values are mapped to the single user attribute specified by the name attribute.

Example: Configuring multiple choice inputs

<p>What topics are you interested in?</p>

<label>
  <input type="checkbox" name="interests" value="product_updates">
  Product Updates
</label>
<br>
<label>
  <input type="checkbox" name="interests" value="monthly_newsletter">
  Monthly Newsletter
</label>
<br>
<label>
  <input type="checkbox" name="interests" value="special_offers">
  Special Offers
</label>

In this example:

• type="checkbox" creates a selectable box for each option.

• name="interests" is the same for all three inputs. This groups them together, ensuring that all selected values are saved to the interests user attribute.

• value="..." specifies the unique text that will be saved for each option when it is checked. Important: The values provided in the value attribute (e.g., "product_updates") must be created as options for the corresponding custom attribute (in this case, interests) within your User.com app panel first. The value in the HTML must be an exact match for the option created in the app.

• The <label> element improves usability by allowing users to click on the text to select the corresponding checkbox.

Configuring submit buttons

Form submission

In the User.com platform, a submit button is configured to process form submissions by assigning id="submitButton" to the button element. This ID is essential as it triggers the platform’s built-in submission mechanism. When the form is submitted, data is validated and mapped to user attributes in User.com, enabling actions such as automation triggers or data updates.

Example: Form with input and submit button

<form>
  <input type="email" name="email" placeholder="Enter your email address" required>
  <button id="submitButton">Submit</button>
</form>

Redirect submissions

A submit button that redirects the user to another page must be configured using an <a> (anchor) tag with id="submitButton". This specific ID is critical for triggering the redirect and for collecting pop-up submission statistics in User.com. The href attribute of the <a> tag specifies the destination URL. This is ideal for sending users to thank-you pages or special offers after they click.

For the redirection to work correctly with complex nested elements like images or styled text, you must ensure that only the <a> tag itself receives the click event. This is done by applying pointer-events: none; via CSS to any elements inside the <a> tag.

Example: Configuring a redirection button with nested elements

<a id="submitButton" href="https://example.com/thank-you">
  <b>Click here to continue</b>
  <img src="https://example.com/image.png" alt="Submit" onerror="this.style.display='none'">
</a>
<style>
  #submitButton * {
    /* This prevents any element inside the link from capturing the click event. */
    pointer-events: none;
  }
</style>

Configuring close buttons

A close button allows users to dismiss a pop-up without submitting any data.

Using the data-dismiss attribute

To configure a close button, add the attribute data-dismiss="true" to any valid HTML element. This attribute signals to User.com that clicking the element should close the pop-up. Close buttons are commonly implemented as clickable icons (<span>, <svg>).

Example: Configuring a close button

<!-- Using a span element -->
<span data-dismiss="true" class="close-icon">&times;</span>

In this example, the data-dismiss="true" attribute enables the element to close the pop-up, providing a clear and user-friendly way for users to dismiss the modal.

Closing the pop-up by clicking the overlay

By default, the overlay (the background area outside the pop-up content) may also close the pop-up. However, if a user accidentally clicks inside the pop-up and their click lands on the overlay area within the iframe, it can unintentionally dismiss it. To prevent this, you can add a script that ensures only direct clicks on the overlay background will trigger a close action.

// Handle overlay clicks to close popup
document.querySelector('.ue-overlay').addEventListener('click', function (event) {
    // Only close if clicking directly on the overlay background
    if (event.target === this) {
        // Find and click the close button to trigger User.com's close function
        const closeBtn = document.querySelector('[data-dismiss="true"]');
        if (closeBtn) {
            closeBtn.click();
        }
    }
});

⚠️ Important Warning: Do Not Use Custom JavaScript to Hide Pop-ups

The only valid method to close a pop-up in User.com is by using the data-dismiss="true" attribute. You must never write custom JavaScript to hide the pop-up manually.

Because the pop-up is rendered inside an <iframe> that covers the entire page, using custom code to hide the pop-up's content will only make it invisible. The iframe itself will remain active, covering the underlying page and blocking all clicks. This is a critical mistake that can make your website unusable for the visitor.

Incorrect example (DO NOT USE):

<!-- This code will break your page! -->
<script>
document.getElementById("close-button").addEventListener("click", function() {
    document.getElementById("overlay").style.display = "none";
});
</script>

Conclusion

Configuring inputs, submit buttons, and close buttons correctly is essential for creating functional and user-friendly pop-ups in User.com. By aligning input field names with user attributes, businesses ensure accurate data collection. Submit buttons are key to processing data and tracking interactions, while close buttons enhance the user experience by providing a simple way to dismiss content. Following the practices in this guide ensures your pop-ups are compatible, handle data correctly, and integrate seamlessly with User.com’s powerful automation tools.