How can I display a discount coupon code on my email popup?

[Rasheed143]

I want help from you that i have created an email popup form for my customer to get coupon code for the first order. when my customer enter the email he will get the coupon code for the discount. i have creted the popup but it genrate the coupon code. but i want to connect with the shopify discount coupon code, i mean when customer enter email it show the that coupon code that i have creted in the shopify discount.

[Dan-From-Ryviu]

You may try Klaviyo app, it has this option

[Rasheed143]

Yes, i have tried much apps but i did not get the solution. the issue is that i want to add an icon in the header with the account icon and when anyone click that icon the popup will show to submit the email and get coupon code. all is done but i want to show the coupon code from the shopify coupon code that i have created in the discount code. so that this code can be use at the time of checkout.

[Rasheed143]

This is the code for the popup

<!-- Email icon -->
<div id="email-icon" class="header-icon" style="cursor: pointer; display:flex; align-items:center; justify-content:center; height:100%; padding: 0px 10px"> 
  {% include 'icon-email' %}
</div>

<!-- Email popup -->
<div id="email-popup" class="email-popup" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; background-color: #fff; width:450px; height:300px; border: 1px solid #ccc; z-index: 999;">
  <div style="display:flex; justify-content: flex-end; width:100%;">
    <button id="close-email-popup" style="padding: 5px; cursor: pointer; width:30px; height:30px; color: white; border-radius: 5px; border: 1px solid; color: #521C70;">X</button>
  </div>
  <h2 style="color: #521C70; font-weight:700; ">Enter your email for 15% off your first order</h2>
  <p>Enter your email for 15% off your first order</p>
  <input type="email" id="email-input" placeholder="Enter your email" style="margin-bottom: 10px; padding: 12px 10px; width:100%; border: 1px solid; border-radius: 5px; ">
  <button id="submit-email" style="padding: 5px; cursor: pointer; width:100%; background-color: #521C70; color: white; border-radius: 50px; border: none; padding: 12px 10px;">Submit</button>
</div>

<!-- Coupon popup -->
<div id="coupon-popup" class="coupon-popup" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; background-color: #fff; width:450px; height:300px; border: 1px solid #ccc; z-index: 999;">
  <div style="display:flex; justify-content: flex-end; width:100%;">
    <button id="close-coupon-popup" style="padding: 5px; cursor: pointer; width:30px; height:30px; color: white; border-radius: 5px; border: 1px solid; color: #521C70;">X</button>
  </div>
  <h2 style="color: #521C70; font-weight:700; ">Your 15% off Coupon Code</h2>
  <p id="coupon-code">YourCouponCode123</p>
  <button id="copy-coupon" style="padding: 5px; cursor: pointer; width:100%; background-color: #521C70; color: white; border-radius: 50px; border: none; padding: 12px 10px;">Copy Coupon</button>
</div>

<!-- Include the email and coupon popup scripts -->
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const emailIcon = document.getElementById('email-icon');
    const emailPopup = document.getElementById('email-popup');
    const closeEmailPopupButton = document.getElementById('close-email-popup');
    const submitEmailButton = document.getElementById('submit-email');

    const couponPopup = document.getElementById('coupon-popup');
    const closeCouponPopupButton = document.getElementById('close-coupon-popup');
    const copyCouponButton = document.getElementById('copy-coupon');

    emailIcon.addEventListener('click', function () {
      emailPopup.style.display = 'block';
    });

    closeEmailPopupButton.addEventListener('click', function () {
      emailPopup.style.display = 'none';
    });

    submitEmailButton.addEventListener('click', function () {
      // Handle email submission and coupon generation logic here

      // For now, let's just hide the email popup and show the coupon popup
      emailPopup.style.display = 'none';
      couponPopup.style.display = 'block';
    });

    closeCouponPopupButton.addEventListener('click', function () {
      couponPopup.style.display = 'none';
    });

    copyCouponButton.addEventListener('click', function () {
      // Copy coupon code logic (same as provided in the previous response)
      const couponCodeText = document.getElementById('coupon-code');
      const couponCode = couponCodeText.innerText;
      const tempInput = document.createElement('input');
      tempInput.value = couponCode;
      document.body.appendChild(tempInput);
      tempInput.select();
      document.execCommand('copy');
      document.body.removeChild(tempInput);

      // Provide some visual feedback to the user
      copyCouponButton.innerText = 'Coupon Copied!';
      setTimeout(function () {
        copyCouponButton.innerText = 'Copy Coupon';
      }, 2000);
    });
  });
</script>