Activate Discounts from Your Email Popup: A Guide to Klaviyo and Abra’s JavaScript SDK

The welcome signup popup has become a staple of the merchant’s playbook. However, the experience asks for several big leaps of each of your customers.

What if we could make this process more immediate and engaging?

In this guide we'll walk you through the steps to activate the discount you are promising your customers—right from the email signup popup.

Understanding Abra Promotions

Abra allows you to offer exclusive discounts to your customers directly from your online store. By activating a promotion through a Klaviyo popup—the traditional method of sending an email and waiting for the customer to apply the code—can be bypassed.

This direct approach removes the barrier to purchase, creating a smoother, more immediate shopping experience.

Preparing your environment

Tools needed:

• Klaviyo email or SMS popup
• Shopify theme editor
• Custom JavaScript file

Setting up:

• Activate Abra’s app embed and dynamic pricing
• Add a new JavaScript file called custom.js to your assets folder

Step 1. Create a JavaScript file and listen for the submit event

Your first step will take place in your theme’s code editor. In the assets folder, add a new asset called custom.js.

To start, we want to listen for the submit event from Klaviyo. We used the example from Klaviyo’s tutorial on firing an event for Google Analytics.

window.addEventListener("klaviyoForms", (event) => {
    if (event.detail.type == "submit") {
        ga("send", "event", "Klaviyo form", "form_submit", e.detail.formId);
    }
});

Step 2. Activating the Abra promotion

Instead of triggering a Google Analytics event, we want to activate Abra when we receive the submit event. You can do this by adding a discount code with the Abra activate function.

 

window.Abra.activate('YOUR_CODE');

You can read about all the functions available in the Abra JavaScript SDK docs that enable you to activate and deactivate promotions and the sections in those promotions.

Step 3. Putting it all together

Here is an example of the code we wrote. Replace the discount code below (YOUR_CODE) with the discount code you want your customers to apply, ensuring you have created an Abra promotion for it first.

You can also choose a location to redirect to once the promotion is active.

window.addEventListener("klaviyoForms", (event) => {
    if (event.detail.type == "submit") {
        window.Abra.activate("YOUR_CODE");
        window.location.href = "/products/your-product-url";
    }
});

You can test this function now by submitting the popup and you should see immediately if it is applied.

Now, whenever someone successfully submits the popup on your site, they will immediately see the updated price right in front of them, without having to wait for an email follow up with that discount code. This drastically saves your customer time and reduces any dropoff.

Conclusion

Activating Abra promotions directly from the store’s frontend simplifies the customer experience, allowing immediate access to discounts.

Hooking into the Klaviyo popup with a few simple JavaScript events makes the promotion become a seamless part of the shopping experience.

Certainly, something every merchant should test with their Klaviyo popup, quiz flows or any interactive element on their store.

Learn more about the Abra SDK