How to Trigger an Alia Popup Programmatically or on Specific Elements

Triggering an Alia popup programmatically or through specific elements (e.g., buttons or announcement bars) is a straightforward process. This guide provides general implementation steps and Shopify-specific instructions to help you integrate this functionality into your website.

General Implementation Steps

To trigger an Alia popup programmatically, follow these steps:

Identify the Trigger Element: Determine the element (e.g., a button or announcement bar) that will trigger the popup. Use a unique CSS selector to target this element.
Add a Click Event Listener: Use JavaScript to attach a click event listener to the trigger element.
Initialize the Alia SDK: Ensure the window.alia object is initialized as an array if it doesn’t already exist.
Push the Open Event: Call the window.alia.push method with the type: "open" and the desired campaignID to open the popup.

Example Code

<script>
document.addEventListener('DOMContentLoaded', () => {
  const triggerElement = document.querySelector('[YOUR_BUTTON_SELECTOR]');
  if (triggerElement) {
    triggerElement.addEventListener('click', (e) => {
      e.preventDefault();
      window.alia = window.alia || [];
      window.alia.push({
        type: 'open',
        campaignID: [YOUR_CAMPAIGN_ID],
        ignoreTargeting: true
      });
    });
  }
});
</script>

Replace [YOUR_BUTTON_SELECTOR] with the CSS selector of your trigger element and [YOUR_CAMPAIGN_ID] with the ID of the popup campaign you want to open.

Shopify-Specific Implementation

For Shopify sites, you can integrate the script into your theme by editing the theme.liquid file. Follow these steps:

Open the Theme Editor: Navigate to the theme.liquid file in your Shopify admin.
Insert the Script: Paste the JavaScript snippet just before the closing </head> tag.
Target the Element: Use the appropriate CSS selector for the element you want to use as the trigger (e.g., an announcement bar or button).

Shopify Example Code

<script>
document.addEventListener('DOMContentLoaded', () => {
  const el = document.querySelector('#YOUR-ELEMENT-SELECTOR');
  if (el) {
    el.addEventListener('click', (e) => {
      e.preventDefault();
      window.alia = window.alia || [];
      window.alia.push({
        type: 'open',
        campaignID: [YOUR_CAMPAIGN_ID],
        ignoreTargeting: true
      });
    });
  }
});
</script>

Replace #YOUR-ELEMENT-SELECTOR with the CSS selector of your trigger element and [YOUR_CAMPAIGN_ID] with the ID of the popup campaign. Ensure the script is placed above the closing </head> tag.

Key Notes and Best Practices

Campaign Design: The popup will use the design you configured in Alia. No additional styling is required.
Script Placement: Always place the script in the <head> section for Shopify or ensure it loads after the DOM is ready for other platforms.
Testing: Test the implementation on your site to ensure the popup triggers correctly and aligns with your design.

By following these steps, you can effectively trigger Alia popups programmatically or through specific elements, enhancing user engagement on your site.

How can I trigger an Alia popup programmatically or on specific elements?