Skip to main content

Hello.

 

I’m wondering how to accomplish this User Story:

I don’t issue coupon codes, but rather use coupon links to automatically apply a discount to the Users session.

The URL will need a query parameter to activate the discount. It will look like this: www.site.com/current-page/?coupon={{coupon.code}}

 

I expect this sign-up unit to be simple, with an email field and a button named tActivate Discount].

 

When they click tActivate Discount], I want the User to be returned to their current page (so they don’t lose their place).

 

Is it possible to dynamically build a URL using their current page plus the q param and using it in the forms button?

 

So, the dynamic link will look like: www.site.com/currect-page/?coupon={{coupon.code}}

Rather than manually imputing www.site.com/?coupon={{coupon.code}}, and restarting the session on the home page.

 

The {{coupon.code}} will be static.

 

Please let me know what you think.

 

 

This is Chat GPT’s  direction, yet I don’t see how Step 3 is possible:

 

Steps to Implement the Dynamic Coupon Link in a Klaviyo Pop-Up Form

1. Create a Pop-Up Form in Klaviyo:

  1. In your Klaviyo dashboard, go to Sign-Up Forms.
  2. Click Create Sign-Up Form and choose a Pop-Up form type.
  3. Customize the pop-up with an email input field and an activation button that reads something like "Activate Discount."

2. Configure the Button and Action:

The goal is to redirect the user to the current page they are on, but with the coupon code applied as a query parameter.

  1. In the Submit Button settings, Klaviyo normally allows you to set a specific URL to redirect users after they submit the form. However, you want to use JavaScript to keep the user on their current page and add the coupon to the URL dynamically.

  2. You won't set a default redirect URL here, as you’ll handle this dynamically using JavaScript.

3. Add JavaScript to Dynamically Capture the Current Page URL:

You can add custom JavaScript to the pop-up form in Klaviyo. Here’s how you can do it:

  1. In the Pop-Up Form Editor, go to the Submit Button settings.
  2. Add the following JavaScript code to capture the current URL and append the coupon code:
 

javascript

Copy code

document.addEventListener('DOMContentLoaded', function () { const currentPageUrl = window.location.href; // Capture the current page URL document.getElementById('klaviyoSubmitButton').addEventListener('click', function (event) { event.preventDefault(); // Prevents the default form submission behavior const couponCode = 'DISCOUNT2024'; // Static coupon code const newUrl = currentPageUrl + '?coupon=' + couponCode; // Build new URL with coupon window.location.href = newUrl; // Redirect the user to the new URL }); });

Explanation:

  • window.location.href captures the current page’s full URL.
  • couponCode = 'DISCOUNT2024' defines the static coupon code you want to apply.
  • window.location.href = newUrl; redirects the user to the same page, but with the coupon query parameter appended.

4. Customize the Pop-Up Behavior:

In Klaviyo’s Pop-Up Form Editor, you can configure:

  • Trigger Settings: Choose when the pop-up appears (e.g., after a certain number of seconds or on scroll).
  • Targeting: Target specific users based on their behavior or segment (e.g., new visitors, people who haven’t signed up for emails yet).

5. Embed the Pop-Up on Your Website:

Once the pop-up is customized and set up, embed it on your website by either:

  • Adding Klaviyo’s snippet to your website’s code.
  • Configuring the display options and let Klaviyo handle the pop-up triggers automatically.

6. Testing and Validation:

Before going live, test the following:

  • Ensure the pop-up triggers correctly on your website.
  • Confirm the user is redirected back to the same page with the coupon code applied when they submit the form.
  • Test on various pages to ensure the URL and coupon application works across your site.

Key Considerations:

  1. Pop-Up Settings: Make sure the pop-up is non-intrusive and triggers at appropriate moments (e.g., exit intent or after 10 seconds of scrolling).

  2. Coupon Code Management: If you want to dynamically generate unique coupon codes (instead of using a static one), Klaviyo supports unique coupon generation that you can apply in the same way. However, with this strategy, it appears you're using a static coupon (DISCOUNT2024), which simplifies the process.

  3. Browser Testing: Ensure cross-browser compatibility with this script and test across different devices (mobile, tablet, desktop).

Example Full Script for Pop-Up:

If your pop-up has an ID like klaviyoSubmitButton, this is the full script you'd use to dynamically apply the coupon:

 

javascript

Copy code

document.addEventListener('DOMContentLoaded', function () { const currentPageUrl = window.location.href; // Get the current page's URL document.getElementById('klaviyoSubmitButton').addEventListener('click', function (event) { event.preventDefault(); // Stop the form's default behavior const couponCode = 'DISCOUNT2024'; // Define the static coupon code const newUrl = currentPageUrl + '?coupon=' + couponCode; // Add coupon to the URL window.location.href = newUrl; // Redirect the user with the new URL }); });

Summary:

You can effectively execute the coupon code strategy using Klaviyo's pop-up forms by adding custom JavaScript to capture the current page URL and redirect the user back to the same page with the coupon code applied as a query parameter. This strategy offers a seamless experience, keeping users on the same page while applying their discount automatically.


Reply