{
  "Templates": [
    {
      "id": "template-1",
      "category": "Coupon Discount",
      "image": "GreenBackBag.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "<style>\n  @media (max-width: 600px) {\n    .popup-section {\n      flex-direction: column !important;\n      margin: 40px 10px !important;\n      max-width: 100% !important;\n    }\n    .popup-image {\n      order: -1 !important;\n    }\n    .popup-content, .popup-image {\n      width: 100% !important;\n    }\n    .popup-content {\n      padding: 20px !important;\n      text-align: center !important;\n      align-items: center !important;\n    }\n    .popup-content button {\n      margin: 12px auto !important;\n    }\n  }\n</style>\n\n<div data-gjs-type='column' class='yslg-page yslg-page-0' style='margin:80px auto; display:flex; flex-wrap:wrap; border-radius:20px; max-width:720px; width:95%; box-shadow:0 10px 25px rgba(0,0,0,0.15); overflow:hidden; z-index:9999; position:relative;'>\n\n  <!-- Close Button -->\n  <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n  <!-- Text Column (Left Side) -->\n  <form data-gjs-type='column' class='popup-content yslg-form' method='post' style='flex:1; min-width:300px; padding:40px 30px; display:flex; flex-direction:column; justify-content:center;background-color:#313737;'>\n    <h2 style='font-size:32px; font-weight:bold; color:#ffffff; margin-bottom:20px;'>Pack Up Savings!</h2>\n    <p style='font-size:16px; color:#E5E7EB; margin-bottom:30px;'>Enjoy 15% off on our best-selling backpacks \u2014 limited time only!</p>\n    <button type='submit' style='width:200px; padding:12px 20px; background-color:#A2A085; color:#ffffff; font-size:15px; font-weight:bold; border:1px solid #ddd; border-radius:30px; cursor:pointer;'>Claim Discount</button>\n  </form>\n\n  <!-- Image Column (Right Side) -->\n  <div data-gjs-type='column' class='popup-image' style='flex:1; min-width:300px; display:flex; align-items:center; justify-content:center; min-height:300px;'>\n    <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/NavyBag.webp' alt='Backpack Promo' style='width:100%; height:100%; object-fit:cover;' onerror=\"this.style.display='none';\">\n  </div>\n\n</div>\n\n<script>\n(function($){\n  $(document).ready(function(){\n    $('.yslg-form').on('submit', function(e){\n      e.preventDefault(); // prevent default form submission\n      var $popup = $(this).closest('.ysleadgen-popup');\n      // Hide main page (index 0)\n      $popup.find('.yslg-page-0').hide();\n      // Show Thank You page (index 1)\n      $popup.find('.yslg-page-1').show();\n      // Optional: AJAX submission can go here if needed\n    });\n  });\n})(jQuery);\n</script>"
            }
          ]
        },
        {
          "name": "Thank You Page",
          "frames": [
            {
              "component": "<style>\n  @media (max-width: 600px) {\n    .popup-section {\n      flex-direction: column !important;\n      margin: 40px 10px !important;\n      max-width: 100% !important;\n    }\n    .popup-image {\n      order: -1 !important;\n    }\n    .popup-content, .popup-image {\n      width: 100% !important;\n    }\n    .popup-content {\n      padding: 20px !important;\n      text-align: center !important;\n      align-items: center !important;\n    }\n    .popup-content button {\n      margin: 12px auto !important;\n    }\n  }\n</style>\n\n<div data-gjs-type='column' class='yslg-page yslg-page-1' style='margin:80px auto; display:flex; flex-wrap:wrap; border-radius:20px; max-width:720px; width:95%; box-shadow:0 10px 25px rgba(0,0,0,0.15); overflow:hidden; z-index:9999; position:relative;'>\n\n  <!-- Close Button -->\n  <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n  <!-- Thank You Message Column -->\n  <div data-gjs-type='column' class='popup-content' style='flex:1; min-width:300px; padding:40px 30px; display:flex; flex-direction:column; justify-content:center; align-items:center; background-color:#1E293B;'>\n    <h2 style='font-size:32px; font-weight:bold; color:#ffffff; margin-bottom:20px;'>Thank You! </h2>\n    <p style='font-size:16px; color:#E5E7EB; margin-bottom:25px;'>We\u2019ve received your submission successfully. Our team will get back to you shortly. Meanwhile, enjoy exploring our latest offers and updates.</p>\n    <button style='width:220px; padding:12px 20px; background-color:#10B981; color:#ffffff; font-size:15px; font-weight:bold; border:1px solid #ddd; border-radius:30px; cursor:pointer;'>Back to Home</button>\n  </div>\n\n  <!-- Illustration Column -->\n  <div data-gjs-type='column' class='popup-image' style='flex:1; min-width:300px; display:flex; align-items:center; justify-content:center; min-height:300px; background-color:#F9FAFB;'>\n    <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/NavyBag.webp' alt='Thank You' style='width:100%; height:100%; object-fit:cover;' onerror=\"this.style.display='none';\">\n  </div>\n\n</div>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "Fashion",
        "E-commerce"
      ]
    },
    {
      "id": "template-2",
      "category": "Entry",
      "image": "Lamp.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "<style>\n  @media (max-width: 600px) {\n    .popup-section {\n      flex-direction: column !important;\n      margin: 30px 10px !important;\n      max-width: 100% !important;\n    }\n    .popup-image {\n      order: -1 !important;\n      min-height: 180px !important;\n    }\n    .popup-content, .popup-image {\n      width: 100% !important;\n    }\n    .popup-content {\n      padding: 16px !important;\n      text-align: center !important;\n      align-items: center !important;\n    }\n    .popup-content button {\n      margin: 10px auto !important;\n    }\n  }\n</style>\n\n<div data-gjs-type='column' class='popup-section' style='margin:60px auto; display:flex; flex-wrap:wrap; border-radius:16px; max-width:640px; width:95%; box-shadow:0 8px 20px rgba(0,0,0,0.12); overflow:hidden; z-index:9999; position:relative;'>\n\n  <!-- Close Button -->\n  <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n  <!-- Text Column (Left Side) -->\n  <form data-gjs-type='column' class='popup-content' method='post' style='flex:1; min-width:260px; padding:28px 20px; display:flex; flex-direction:column; justify-content:center; background-color:#F6F5F4;'>\n    <h2 style='text-align:center;font-size:28px; font-weight:bold; color:#31090D; margin-bottom:10px;'>Celebrate the<br>Festival with</h2>\n    <h1 style='text-align:center;font-size:34px; font-weight:bold; color:#541416; margin-bottom:16px;'>20% OFF!</h1>\n    <p style='text-align:center;font-size:14px; color:#5C5C5C; margin-bottom:20px;'>Use code at checkout.Hurry, limited time only!</p>\n    <button style='width:180px; padding:10px 18px; background-color:#38130E; color:#ffffff; font-size:14px; font-weight:bold; border:1px solid #ddd; border-radius:30px; display:block;  margin:0 auto; cursor:pointer;'>Shop Now</button>\n  </form>\n\n  <!-- Image Column (Right Side) -->\n  <div data-gjs-type='column' class='popup-image' style='flex:1; min-width:260px; display:flex; align-items:center; justify-content:center; min-height:200px;'>\n    <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/festive.webp' alt='Festive Lamp' style='width:100%; height:100%; object-fit:cover;' onerror=\"this.style.display='none';\">\n  </div>\n\n</div>"
            }
          ]
        },
        {
          "name": "Thank You Page",
          "frames": [
            {
              "component": "<style>\n  @media (max-width: 600px) {\n    .popup-section {\n      flex-direction: column !important;\n      margin: 30px 10px !important;\n      max-width: 100% !important;\n    }\n    .popup-image {\n      order: -1 !important;\n      min-height: 180px !important;\n    }\n    .popup-content, .popup-image {\n      width: 100% !important;\n    }\n    .popup-content {\n      padding: 16px !important;\n      text-align: center !important;\n      align-items: center !important;\n    }\n    .popup-content button {\n      margin: 10px auto !important;\n    }\n  }\n</style>\n\n<div data-gjs-type='column' class='popup-section' style='margin:60px auto; display:flex; flex-wrap:wrap; border-radius:16px; max-width:640px; width:95%; box-shadow:0 8px 20px rgba(0,0,0,0.12); overflow:hidden; z-index:9999; position:relative;'>\n\n  <!-- Close Button -->\n  <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n  <!-- Thank You Message Column -->\n  <div data-gjs-type='column' class='popup-content' style='flex:1; min-width:260px; padding:28px 20px; display:flex; flex-direction:column; justify-content:center; align-items:center; background-color:#F6F5F4;'>\n    <h2 style='text-align:center;font-size:28px; font-weight:bold; color:#31090D; margin-bottom:10px;'>Thank You for Subscribing!</h2>\n    <p style='text-align:center;font-size:15px; color:#5C5C5C; margin-bottom:16px;'>Here\u2019s your exclusive discount code \u2014 use it on your next purchase!</p>\n\n    <!-- Coupon Code Component -->\n    <div data-gjs-type='coupon' class='coupon-code-block' data-code='SAVE20' style='font-size:20px; font-weight:bold; background-color:#ffffff; padding:15px; border:2px dashed #ffc107; border-radius:8px; color:#333; cursor:pointer; text-align:center; margin-bottom:18px;width:280px;'>SAVE20</div>\n\n  </div>\n\n  <!-- Image Column (Right Side) -->\n  <div data-gjs-type='column' class='popup-image' style='flex:1; min-width:260px; display:flex; align-items:center; justify-content:center; min-height:200px;'>\n    <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/festive.webp' alt='Thank You Illustration' style='width:100%; height:100%; object-fit:cover;' onerror=\"this.style.display='none';\">\n  </div>\n\n</div>"
            }
          ]
        }
      ],
      "type": [
        "Seasonal Campaigns"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-3",
      "category": "Coupon Discount",
      "image": "Offer25.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; font-family:Arial, sans-serif;'>\n  <style>\n    .popup-wrapper {\n      max-width: 720px;\n      width: 95%;\n      margin: 60px auto;\n      background-color: #FDFBF8;\n      border-radius: 20px;\n      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);\n      display: flex;\n      flex-wrap: wrap;\n      position: relative;\n      overflow: hidden;\n    }\n\n    .popup-content {\n      flex: 1;\n      min-width: 280px;\n      padding: 36px 28px;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: flex-start;\n      text-align: left;\n      background-color: #FDFBF8;\n    }\n\n    .popup-content h1 {\n      font-size: 28px;\n      font-weight: bold;\n      color: #000000;\n      margin-bottom: 14px;\n    }\n\n    .popup-content p {\n      font-size: 14px;\n      color: #555;\n      margin-bottom: 22px;\n    }\n\n    .popup-content button {\n      background-color: #EB4A52;\n      color: white;\n      padding: 12px 28px;\n      font-size: 14px;\n      font-weight: bold;\n      border: none;\n      border-radius: 30px;\n      cursor: pointer;\n      display: block;\n      margin: 0 auto 0 0;\n    }\n\n    .popup-image {\n      flex: 1;\n      min-width: 280px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 220px;\n      background-color: #fff;\n    }\n\n    .popup-image img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      display: block;\n    }\n\n    .close-btn  {\n      position: absolute !important;\n      top: 0px !important;\n      right: 0px !important; left: auto !important;\n      \n      font-size: 24px !important; font-weight: bold !important;\n      font-weight: bold !important;\n      cursor: pointer !important;\n      border: none !important;\n      z-index: 9999 !important;\n    }\n\n    @media (max-width: 600px) {\n      .popup-wrapper {\n        flex-direction: column;\n        margin: 30px 10px;\n        border-radius: 16px;\n      }\n\n      .popup-content {\n        padding: 20px;\n        align-items: center;\n        text-align: center;\n      }\n\n      .popup-content h1 {\n        font-size: 22px;\n      }\n\n      .popup-content p {\n        font-size: 13px;\n      }\n\n      .popup-content button {\n        margin: 12px auto;\n      }\n\n      .popup-image {\n        order: -1;\n        min-height: 180px;\n      }\n    }\n  </style>\n\n  <section class='popup-wrapper' data-gjs-type='column'>\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Text Column (Left on Desktop) -->\n    <form method='post' class='popup-content' data-gjs-type='column'>\n      <h1 style='text-align:center;'>Get 25% OFF Your Next Purchase!</h1>\n      <h4 style='text-align:center;'>Use code SAVE25at checkout.Limited time offer</h4>\n      <button type='submit' >Apply Coupon</button>\n    </form>\n\n    <!-- Image Column (Right on Desktop, Top on Mobile) -->\n    <div class='popup-image' data-gjs-type='column'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/offer.webp' alt='Offer Image' onerror=\"this.style.display='none';\">\n    </div>\n  </section>\n</body>"
            }
          ]
        },
        {
          "name": "Thank You Page",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; font-family:Arial, sans-serif;'>\n  <style>\n    .thankyou-wrapper {\n      max-width: 720px;\n      width: 95%;\n      margin: 60px auto;\n      background-color: #FDFBF8;\n      border-radius: 20px;\n      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);\n      display: flex;\n      flex-wrap: wrap;\n      position: relative;\n      overflow: hidden;\n    }\n\n    .thankyou-content {\n      flex: 1;\n      min-width: 280px;\n      padding: 36px 28px;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      text-align: center;\n      background-color: #FDFBF8;\n    }\n\n    .thankyou-content h1 {\n      font-size: 28px;\n      font-weight: bold;\n      color: #000000;\n      margin-bottom: 14px;\n    }\n\n    .thankyou-content p {\n      font-size: 14px;\n      color: #555;\n      margin-bottom: 22px;\n    }\n\n    .coupon-code-block {\n      font-size: 20px;\n      font-weight: bold;\n      background-color: #ffffff;\n      padding: 14px 24px;\n      border: 2px dashed #EB4A52;\n      border-radius: 10px;\n      color: #000000;\n      cursor: pointer;\n      text-align: center;\n      margin-bottom: 18px;\n    }\n\n    .thankyou-content button {\n      background-color: #EB4A52;\n      color: white;\n      padding: 12px 28px;\n      font-size: 14px;\n      font-weight: bold;\n      border: none;\n      border-radius: 30px;\n      cursor: pointer;\n      display: block;\n      margin: 0 auto;\n    }\n\n    .thankyou-image {\n      flex: 1;\n      min-width: 280px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 220px;\n      background-color: #fff;\n    }\n\n    .thankyou-image img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      display: block;\n    }\n\n    .close-btn  {\n      position: absolute !important;\n      top: 0px !important;\n      right: 0px !important; left: auto !important;\n      \n      font-size: 24px !important; font-weight: bold !important;\n      font-weight: bold !important;\n      cursor: pointer !important;\n      border: none !important;\n      z-index: 9999 !important;\n    }\n\n    @media (max-width: 600px) {\n      .thankyou-wrapper {\n        flex-direction: column;\n        margin: 30px 10px;\n        border-radius: 16px;\n      }\n\n      .thankyou-content {\n        padding: 24px 20px;\n      }\n\n      .thankyou-content h1 {\n        font-size: 22px;\n      }\n\n      .thankyou-content p {\n        font-size: 13px;\n      }\n\n      .thankyou-image {\n        order: -1;\n        min-height: 180px;\n      }\n    }\n  </style>\n\n  <section class='thankyou-wrapper' data-gjs-type='column'>\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Text Column -->\n    <div class='thankyou-content' data-gjs-type='column'>\n      <h1>Thank You for Subscribing!</h1>\n      <p>Your exclusive coupon code is ready. Use it at checkout and enjoy your discount!</p>\n\n      <!-- Coupon Component -->\n      <!-- Coupon Code Component -->\n    <div data-gjs-type='coupon' class='coupon-code-block' data-code='SAVE20' style='font-size:20px; font-weight:bold; background-color:#ffffff; padding:15px; border:2px dashed #ffc107; border-radius:8px; color:#333; cursor:pointer; text-align:center; margin-bottom:18px;width:280px;'>SAVE20</div>\n\n    </div>\n\n    <!-- Image Column -->\n    <div class='thankyou-image' data-gjs-type='column'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/offer.webp' alt='Thank You Image' onerror=\"this.style.display='none';\">\n    </div>\n  </section>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-4",
      "category": "Coupon Discount",
      "image": "BtSpeaker.webp",
      "pages": [
        {
          "name": "Email Subscribe Popup",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; font-family:Arial, sans-serif;'>\n  <style>\n    @media (max-width: 600px) {\n      .popup-wrapper {\n        flex-direction: column !important;\n        margin: 24px 10px !important;\n        max-width: 100% !important;\n        border-radius: 12px !important;\n      }\n      .popup-image {\n        order: -1 !important;\n        width: 100% !important;\n        height: 180px !important;\n      }\n      .popup-image img {\n        width: 100% !important;\n        height: 100% !important;\n        object-fit: cover !important;\n        border-top-left-radius: 12px;\n        border-top-right-radius: 12px;\n        display: block;\n      }\n      .popup-text {\n        width: 100% !important;\n        padding: 16px 16px !important;\n        text-align: center !important;\n        align-items: center !important;\n      }\n      .popup-text h2 {\n        font-size: 24px !important; font-weight: bold !important;\n        margin-bottom: 8px !important;\n      }\n      .popup-text p {\n        font-size: 24px !important; font-weight: bold !important;\n        margin: 6px 0 !important;\n      }\n      .popup-text button {\n        margin-top: 12px !important;\n        width: 100% !important;\n        max-width: 220px;\n        padding: 10px 20px !important;\n        font-size: 24px !important; font-weight: bold !important;\n      }\n    }\n  </style>\n\n  <section class='popup-wrapper' data-gjs-type='column' style='max-width:720px; width:95%; margin:80px auto; border-radius:20px; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,0.15); display:flex; flex-wrap:wrap; position:relative;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Text Content -->\n    <form class='popup-text' method='post' data-gjs-type='column' style='flex:1 1 300px; padding:40px 30px; display:flex; flex-direction:column; justify-content:center;background-color:#ffffff'>\n      <h2 style='font-size:38px; font-weight:bold; margin:0 0 10px;'>Turn Up the Volume!</h2>\n      <p style='font-size:22px; color:#ff7a73; font-weight:bold; margin:10px 0;'>Save 25%</p>\n      <p style='font-size:18px; color:#333333; font-weight:bold; margin:8px 0;'>on select Bluetooth speakers</p>\n      <p style='font-size:16px; color:#888888; margin:0 0 24px;'>Limited time only</p>\n   <button type='submit' style='padding:12px 24px; font-size:16px; font-weight:bold; background-color:#ff7a73; color:#ffffff; border:1px solid #ddd; border-radius:24px; cursor:pointer;'>Get Discount</button>\n   </form>\n\n    <!-- Image Column -->\n    <div class='popup-image' data-gjs-type='column' style='flex:1 1 300px; background:#ffffff; display:flex; align-items:center; justify-content:center; min-height:300px;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/roundspeaker.webp' alt='Bluetooth Speaker' style='width:100%; height:100%; object-fit:cover;' onerror=\"this.style.display='none';\">\n    </div>\n\n  </section>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "Electronics",
        "E-commerce"
      ]
    },
    {
      "id": "template-5",
      "category": "Lead Capture",
      "image": "Subscriber.webp",
      "pages": [
        {
          "name": "Plumora Subscribe Popup",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; font-family:Arial, sans-serif;'>\n  <form method='post' data-gjs-type='column' style='max-width:500px; margin:100px auto 40px auto; padding:40px 30px; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,0.1); position:relative; text-align:center; background:#fff;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Brand Name -->\n    <h2 style='font-size:20px; color:#d08928; margin:0 0 10px;'>PLUMORA</h2>\n\n    <!-- Heading -->\n    <h1 style='font-size:28px; font-weight:bold; color:#0a0a0a; margin:0 0 20px;'>Subscribe for<br>Updates!</h1>\n\n    <!-- Form Start -->\n    \n      <!-- Email Input -->\n      <input type='email' name='email' placeholder='Enter your email' required style='width:100%; padding:14px 16px; font-size:16px; border:2px solid #d08928; border-radius:10px; margin-bottom:20px; outline:none; box-sizing:border-box;'>\n\n      <!-- Description -->\n      <p style='font-size:14px; color:#555; margin:0 0 20px;'>Join our newsletter for the latest news and exclusive offers</p>\n\n      <!-- CTA Button -->\n      <button type='submit' style='width:100%; padding:14px; background-color:#d08928; color:#ffffff; font-size:18px; font-weight:bold; border:1px solid #ddd; border-radius:10px; cursor:pointer;'>Subscribe</button>\n    </form>\n    <!-- Form End -->\n\n  \n</body>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation",
        "Newsletter Signup"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-6",
      "category": "Lead Capture",
      "image": "JoinCommunity.webp",
      "pages": [
        {
          "name": "Join Community Popup",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; position:relative; height:100vh; width:100vw; overflow:hidden; font-family:Georgia, serif;'>\n\n  <style>\n    @media (max-width: 600px) {\n      .join-popup {\n        width: 92% !important;\n        margin: 60px auto 40px auto !important;\n        padding: 40px 20px !important;\n        border-radius: 16px !important;\n      }\n      .join-popup h2 {\n        font-size: 24px !important; font-weight: bold !important;\n      }\n      .join-popup input,\n      .join-popup button {\n        padding: 14px !important;\n        font-size: 24px !important; font-weight: bold !important;\n      }\n      .join-popup p {\n        font-size: 24px !important; font-weight: bold !important;\n      }\n    }\n  </style>\n\n  <form method='post' data-gjs-type='column' class='join-popup' style='background-color:#EAE6DA; max-width:480px; width:90%; margin:100px auto; padding:60px 30px; box-shadow:0 10px 30px rgba(0,0,0,0.1); border-radius:20px; text-align:center; position:relative;'>\n\n    <!-- Close Icon -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Headings -->\n    <h2 style='font-size:32px; font-weight:bold; color:#1C1C1E; margin-bottom:10px;'>Join Our</h2>\n    <h2 style='font-size:38px; font-weight:bold; color:#1C1C1E; margin-bottom:20px;'>Community</h2>\n\n    <!-- Subheading -->\n    <p style='font-size:15px; color:#555; margin-bottom:30px;'>Join thousands of readers getting expert insights, updates, and tips delivered weekly</p>\n\n    <!-- Form Start -->\n   \n      <!-- Email Input -->\n      <input type='email' name='email' placeholder='Enter your email' style='width:100%; padding:16px; border-radius:10px; border:1px solid #ccc; font-size:15px; margin-bottom:24px; box-sizing:border-box;'>\n\n      <!-- Subscribe Button -->\n      <button type='submit' style='width:100%; padding:16px; background-color:#9A4702; color:#ffffff; font-size:15px; font-weight:bold; border:1px solid #ddd; border-radius:10px; cursor:pointer;'>Subscribe Now</button>\n\n    \n    <!-- Form End -->\n\n    <!-- Bottom Note -->\n    <p style='margin-top:30px; font-size:13px; color:#999999;'>No spam \u2013 just meaningful content, delivered occasionally.</p></form>\n\n </body>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation",
        "Newsletter Signup"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-7",
      "category": "Coupon Discount",
      "image": "Lipstick.webp",
      "pages": [
        {
          "name": "Lipstick Discount Popup",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; position:relative; height:100vh; width:100vw; overflow:hidden;'>\n  <style>\n    @media (max-width: 480px) {\n      .popup-section {\n        flex-direction: column !important;\n        margin: 20px 10px !important;\n        max-width: 100% !important;\n        height: auto !important;\n      }\n      .popup-image {\n        height: 180px !important;\n      }\n      .popup-text, .popup-image {\n        width: 100% !important;\n      }\n      .popup-text {\n        padding: 16px !important;\n        text-align: center !important;\n        align-items: center !important;\n      }\n      .popup-text h2 {\n        font-size: 24px !important; font-weight: bold !important;\n        margin-bottom: 8px !important;\n      }\n      .popup-text h3 {\n        font-size: 24px !important; font-weight: bold !important;\n        margin-bottom: 10px !important;\n      }\n      .popup-text p {\n        font-size: 24px !important; font-weight: bold !important;\n        margin-bottom: 20px !important;\n      }\n      .popup-text button {\n        margin: 10px auto !important;\n      }\n      .popup-footer {\n        left: 50% !important;\n        transform: translateX(-50%) !important;\n        text-align: center !important;\n      }\n      .close-btn  {\n      position: absolute !important;\n      top: 0px !important;\n      right: 0px !important; left: auto !important;\n      \n      font-size: 24px !important; font-weight: bold !important;\n      font-weight: bold !important;\n      cursor: pointer !important;\n      border: none !important;\n      z-index: 9999 !important;\n    }\n    }\n  </style>\n\n  <div data-gjs-type='column' class='popup-section' style='background: #fff; max-width: 700px; width: 100%; margin: 100px auto 40px auto; box-shadow: 0 10px 30px rgba(0,0,0,0.2); font-family: Georgia, serif; color: #1C1C1C; position: relative; display: flex; flex-direction: row; overflow: hidden; border-radius: 20px;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- IMAGE FIRST -->\n    <div data-gjs-type='column' class='popup-image' style='flex: 1; background: linear-gradient(to top right, #f9dcdc, #ffe6e6); display: flex; align-items: center; justify-content: center;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/lipstick.webp' alt='Lipstick' style='width: 100%; height: 100%; object-fit: contain;' onerror=\"this.style.display='none';\" />\n    </div>\n\n    <!-- TEXT CENTERED -->\n    <form method='post' data-gjs-type='column' class='popup-text' style='flex: 1; padding: 40px 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;'>\n      <h2 style='font-size: 28px; color: #9A1C1F; font-weight: bold; margin-bottom: 10px;'>GET 15% OFF</h2>\n      <h3 style='font-size: 18px; color: #5C1F1F; font-weight: bold; margin-bottom: 15px;'>On Your Favourite Lipstick Shades</h3>\n      <p style='font-size: 14px; color: #888; margin-bottom: 30px;'>Claim your discount before it disappears!</p>\n              <button type='submit' style='width:100%; background-color: #9A1C1F; color: #ffffff; padding: 14px 32px; font-size: 14px; font-weight: bold; border: none; border-radius: 10px; cursor: pointer; margin-bottom: 12px;'>Claim My Offer</button>\n        <button style='width:100%; background-color: #FFF8F0; color: #9A1C1F; padding: 14px 32px; font-size: 14px; font-weight: bold; border: 2px solid #9A1C1F; border-radius: 10px; cursor: pointer;'>No, Thanks</button>\n      </form>\n    </form>\n\n  </div>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "Beauty",
        "E-commerce"
      ]
    },
    {
      "id": "template-8",
      "category": "Lead Capture",
      "image": "JoinCommunity2.webp",
      "pages": [
        {
          "name": "Community Subscribe Popup",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; position:relative; height:100vh; width:100vw; overflow-x:hidden; font-family:Georgia, serif; '>\n\n  <form data-gjs-type='column' method='post' style='background-color:#f4efe7; border-radius:20px; max-width:460px; width:90%; margin:80px auto 20px auto; padding:40px 24px; box-shadow:0 10px 30px rgba(0,0,0,0.1); position:relative; text-align:center;'>\n\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Logo Image -->\n    <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/Bimage.webp' alt='Logo' style='width:72px; height:72px; object-fit:contain; margin:0 auto 20px auto; display:block;' />\n\n    <h2 style='font-size:26px; font-weight:bold; color:#1c1b1b; margin-bottom:6px;'>Join Our Community</h2>\n    <p style='font-size:14px; color:#6b6b6b; margin-bottom:20px;'>Join thousands of readers getting expert insights, updates, and tips delivered weekly</p>\n\n    <form style='width:100%; margin:0 auto;'>\n      <input type='email' placeholder='Enter your email' style='width:100%; padding:12px; font-size:15px; border:1px solid #ccc; border-radius:8px; margin-bottom:16px; box-sizing:border-box;' required />\n      <button type='submit' style='width:100%; padding:12px; background-color:#d6a77a; color:#1c1b1b; font-size:15px; font-weight:bold; border:1px solid #ddd; border-radius:8px; cursor:pointer;'>Subscribe</button>\n    </form>\n\n   \n\n  </form>\n\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation",
        "Newsletter Signup"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-9",
      "category": "Cart Abandonment",
      "image": "PushCart.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "<body data-gjs-type='column' style='margin:0; padding:0; font-family:Arial, sans-serif;'>\n  <form method='post' data-gjs-type='column' style='max-width:500px; margin:80px auto; background-color:#f8f6eb; border-radius:20px; padding:50px 40px; box-shadow:0 20px 60px rgba(0,0,0,0.2); position:relative; text-align:center;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Cart Image -->\n    <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/cart.webp' alt='Cart' style='max-width:120px; margin:0 auto 30px; display:block;'>\n\n    <!-- Title -->\n    <h1 data-gjs-type='text' style='font-size:22px; font-weight:700; color:#111; margin:0 0 15px;'>HOLD ON! YOUR CART IS WAITING!</h1>\n\n    <!-- Subtitle -->\n    <p data-gjs-type='text' style='font-size:15px; color:#444; margin:0 0 25px;'>Complete your purchase now and enjoy<br><strong>$20 OFF</strong> with code</p> \n\n    <!-- CTA Button -->\n  <form>  <button data-gjs-type='button' style='width:100%; padding:14px; background-color:#dc8455; color:#fff; font-size:16px; font-weight:600; border:1px solid #ddd; border-radius:999px; cursor:pointer; margin-bottom:8px;'>GET MY $20 OFF NOW!</button>\n\n    <!-- Skip Link -->\n    <p data-gjs-type='text' style='font-size:13px; color:#666; cursor:pointer;'>No, thanks. I'm good without the discount</p></form>\n\n  </form>\n</body>"
            }
          ]
        },
        {
          "name": "Thank You Page",
          "frames": [
            {
              "component": "<body data-gjs-type='column' style='margin:0; padding:0; font-family:Arial, sans-serif;'>\n  <div data-gjs-type='column' style='max-width:500px; margin:80px auto; background-color:#f8f6eb; border-radius:20px; padding:50px 40px; box-shadow:0 20px 60px rgba(0,0,0,0.2); position:relative; text-align:center;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Cart Image -->\n    <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/cart.webp' alt='Cart' style='max-width:120px; margin:0 auto 30px; display:block;'>\n\n    <!-- Thank You Title -->\n    <h1 data-gjs-type='text' style='font-size:22px; font-weight:700; color:#111; margin:0 0 15px;'>THANK YOU!</h1>\n\n <div data-gjs-type='coupon' class='coupon-code-block' data-code='SAVE20' style='font-size:20px; font-weight:bold; background-color:#ffffff; padding:15px; border:2px dashed #ffc107; border-radius:8px; color:#333; cursor:pointer; text-align:center; margin-bottom:18px;width:420px;'>SAVE20</div>   <!-- Thank You Message -->\n    <p data-gjs-type='text' style='font-size:15px; color:#444; margin:0 0 25px;'>Your discount has been applied.<br><strong>$20 OFF</strong> has been added to your cart.</p>\n\n     </div>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Cart Recovery"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-10",
      "category": "Coupon Discount",
      "image": "backbag.webp",
      "pages": [
        {
          "name": "Pack Up Savings Promo",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; font-family:Arial, sans-serif; height:100vh;'>\n  <style>\n    @media (max-width: 600px) {\n      .popup-container {\n        flex-direction: column !important;\n        margin: 40px 10px !important;\n        max-width: 100% !important;\n      }\n      .popup-image {\n        order: -1 !important;\n        min-height: 220px !important;\n      }\n      .popup-content, .popup-image {\n        width: 100% !important;\n      }\n      .popup-content {\n        padding: 20px !important;\n        text-align: center !important;\n        align-items: center !important;\n      }\n      .popup-content button {\n        margin: 12px auto !important;\n      }\n    }\n\n    /* IMAGE FIX (NO WHITE GAPS) */\n    .popup-image {\n      min-height: 320px;\n    }\n    .popup-image img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      display: block;\n    }\n  </style>\n\n  <div data-gjs-type='column' class='popup-container' style='margin: 80px auto; display:flex; flex-wrap:wrap; background-color:#fcfbf7; border-radius:20px; max-width:800px; width:95%; box-shadow:0 10px 25px rgba(0,0,0,0.08); overflow:hidden; z-index:9999; position:relative;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Left Column (Content) -->\n    <form method='post' data-gjs-type='column' class='popup-content' style='flex:1; min-width:300px; padding:40px; display:flex; flex-direction:column; justify-content:center;'>\n      <h2 style='font-size:36px; font-weight:bold; color:#1a1a1a; margin-bottom:20px; font-family:Impact, Charcoal, sans-serif;'>PACK UP SAVINGS!</h2>\n      <p style='font-size:16px; color:#444; margin-bottom:30px;'>Enjoy 15% off on our best-selling backpacks<br>Limited time only!</p>\n      <button style='width:160px; padding:12px 20px; background:#1a1a1a; color:#ffffff; font-size:15px; font-weight:bold; border:1px solid #ddd; border-radius:30px; cursor:pointer;'>Get My Code</button>\n    </form>\n\n    <!-- Right Column (Image) -->\n    <div data-gjs-type='column' class='popup-image' style='flex:1; min-width:300px; background:#fff; display:flex; align-items:stretch; justify-content:center;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/Backpack.webp' alt='Backpack Promo' onerror=\"this.style.display='none';\">\n    </div>\n\n  </div>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "Fashion",
        "E-commerce"
      ]
    },
    {
      "id": "template-11",
      "category": "Coupon Discount",
      "image": "Burger.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; font-family:Arial, sans-serif; position:relative; height:100vh; width:100vw; overflow:hidden;'>\n  <style>\n    @media (max-width: 480px) {\n      .popup-section {\n        flex-direction: column !important;\n        margin: 40px 10px !important;\n        max-width: 100% !important;\n      }\n      .popup-text, .popup-image {\n        width: 100% !important;\n      }\n      .popup-text {\n        padding: 20px !important;\n        text-align: center !important;\n        align-items: center !important;\n      }\n      .popup-text button {\n        margin: 12px auto !important;\n      }\n    }\n  </style>\n\n  <div data-gjs-type='column' class='popup-section' style='background: #fffaf4; max-width: 800px; width: 100%; margin: 80px auto; box-shadow: 0 10px 30px rgba(0,0,0,0.2); font-family: Arial, sans-serif; color: #231f20; position: relative; display: flex; flex-direction: row; overflow: hidden; border-radius: 20px;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- IMAGE LEFT / TOP -->\n    <div data-gjs-type='column' class='popup-image' style='flex: 1; background-color: #fff3e6; display: flex; align-items: center; justify-content: center;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/burger.webp' alt='Burger Promo' style='width: 100%; height: 100%; object-fit: contain;' onerror=\"this.style.display='none';\" />\n    </div>\n\n    <!-- TEXT RIGHT / BOTTOM -->\n    <form method='post' data-gjs-type='column' class='popup-text' style='flex: 1; padding: 40px 30px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left;'>\n      <h2 style='font-size: 28px; font-weight: bold; color: #231f20; margin-bottom: 10px;'>UNLOCK 15% OFF TODAY!</h2>\n    <p style='font-size:16px; color:#444; margin-bottom:20px;'>Use code</p><p style='font-size:16px; color:#444; margin-bottom:20px;'>WELCOME15</p>\n\n      <p style='font-size:16px; color:#444;'>at checkout.Don't miss out</p>\n     <form style='width:100%; display:flex; justify-content:flex-start;'>\n        <button type='submit' style='width: 160px; padding: 12px 20px; background-color: #f57c1f; color: white; font-size: 14px; font-weight: bold; border: none; border-radius: 8px; cursor: pointer;'>\n          Claim Offer\n        </button>\n      </form>\n  </form>\n\n  </div>\n</body>"
            }
          ]
        },
        {
          "name": "Thank You Page",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; font-family:Arial, sans-serif; position:relative; height:100vh; width:100vw; overflow:hidden;'>\n  <style>\n    @media (max-width: 480px) {\n      .thankyou-section {\n        flex-direction: column !important;\n        margin: 40px 10px !important;\n        max-width: 100% !important;\n      }\n      .thankyou-text, .thankyou-image {\n        width: 100% !important;\n      }\n      .thankyou-text {\n        padding: 20px !important;\n        text-align: center !important;\n        align-items: center !important;\n      }\n      .thankyou-text button {\n        margin: 12px auto !important;\n      }\n    }\n  </style>\n\n  <div data-gjs-type='column' class='thankyou-section' style='background: #fffaf4; max-width: 800px; width: 100%; margin: 80px auto; box-shadow: 0 10px 30px rgba(0,0,0,0.2); font-family: Arial, sans-serif; color: #231f20; position: relative; display: flex; flex-direction: row; overflow: hidden; border-radius: 20px;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- IMAGE LEFT / TOP -->\n    <div data-gjs-type='column' class='thankyou-image' style='flex: 1; background-color: #fff3e6; display: flex; align-items: center; justify-content: center;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/burger.webp' alt='Burger Thank You' style='width: 100%; height: 100%; object-fit: contain;' onerror=\"this.style.display='none';\" />\n    </div>\n\n    <!-- TEXT RIGHT / BOTTOM -->\n    <div data-gjs-type='column' class='thankyou-text' style='flex: 1; padding: 40px 30px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left;'>\n      <h2 style='font-size: 30px; font-weight: bold; color: #231f20; margin-bottom: 12px;'>THANK YOU!</h2>\n      <p style='font-size: 16px; color: #444; margin-bottom: 16px;'>Your exclusive burger discount is waiting for you.</p>\n\n      <!-- Coupon Code Block -->\n      <div data-gjs-type='coupon' class='coupon-block' style='font-size: 20px; font-weight: bold; background-color: #ffffff; padding: 14px 24px; border: 2px dashed #f57c1f; border-radius: 10px; color: #000000; cursor: pointer; text-align: center; margin-bottom: 18px;' data-code='WELCOME15'>WELCOME15</div>\n\n      <p style='font-size: 14px; color: #555; margin-bottom: 24px;'>Use this code at checkout and enjoy your tasty savings!</p>\n\n      <button style='width: 180px; padding: 12px 20px; background-color: #f57c1f; color: white; font-size: 14px; font-weight: bold; border: none; border-radius: 8px; cursor: pointer;'>Order Now</button>\n    </div>\n\n  </div>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "Food & Drink",
        "E-commerce"
      ]
    },
    {
      "id": "template-12",
      "category": "Cart Abandonment",
      "image": "Trimmer.webp",
      "pages": [
        {
          "name": "Trimmer Reminder",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; font-family:Arial, sans-serif; background:#fdfaf3; min-height:100vh; display:flex; align-items:center; justify-content:center;'>\n  <style>\n    @media (max-width: 600px) {\n      .popup-section {\n        flex-direction: column !important;\n        margin: 40px 10px !important;\n        max-width: 100% !important;\n      }\n      .popup-content, .popup-image {\n        width: 100% !important;\n      }\n      .popup-image {\n        order: -1 !important;\n      }\n    }\n  </style>\n\n  <section data-gjs-type='column' class='popup-section' style='margin:80px auto 40px auto; display:flex; flex-direction:row; flex-wrap:wrap; background:#fffaf4; border-radius:20px; max-width:720px; width:95%; box-shadow:0 10px 25px rgba(0,0,0,0.1); overflow:hidden; position:relative;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Image Left (or Top on Mobile) -->\n    <div data-gjs-type='column' class='popup-image' style='flex:1; min-width:300px; background-color:#eaeaea; display:flex; align-items:center; justify-content:center;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/trimmer.webp' alt='Trimmer Image' style='width:100%; height:auto; display:block;'>\n    </div>\n\n    <!-- Content Right (or Bottom on Mobile) -->\n    <form method='post' data-gjs-type='column' class='popup-content' style='flex:1; min-width:300px; padding:40px 30px; display:flex; flex-direction:column; justify-content:center;'>\n      <h2 style='font-size:28px; font-weight:bold; color:#000000; margin-bottom:15px;'>Don\u2019t Forget Your Grooming Essential!</h2>\n      <div data-gjs-type='divider' style='width:50px; height:4px; background-color:#c54d29; margin-bottom:20px;'></div>\n      <p style='font-size:16px; color:#333; margin-bottom:30px;'>You left a trimmer in your cart \u2014 check out now before it\u2019s gone</p>\n      <button style='width:180px; padding:14px 24px; background-color:#c54d29; color:#ffffff; font-size:16px; font-weight:bold; border:1px solid #ddd; border-radius:8px; cursor:pointer;'>Return to Cart</button></form>\n   \n\n  </section>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Cart Recovery"
      ],
      "industry": [
        "Electronics",
        "E-commerce"
      ]
    },
    {
      "id": "template-13",
      "category": "Coupon Discount",
      "image": "Watch.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; font-family:Arial, sans-serif; height:100vh; display:flex; align-items:center; justify-content:center;'>\n  <style>\n    @media (max-width: 600px) {\n      .popup-wrapper {\n        flex-direction: column !important;\n        margin: 20px 10px !important;\n        max-width: 100% !important;\n      }\n      .popup-image, .popup-content {\n        width: 100% !important;\n      }\n      .popup-image {\n        order: -1 !important;\n      }\n      .popup-content {\n        padding: 24px !important;\n        text-align: center !important;\n        align-items: center !important;\n      }\n      .popup-content button {\n        margin: 12px auto !important;\n      }\n    }\n  </style>\n\n  <div data-gjs-type='column' class='popup-wrapper' style='margin:80px auto 40px auto; display:flex; flex-wrap:wrap; background-color:#fcfcfc; border-radius:20px; max-width:720px; width:95%; box-shadow:0 8px 30px rgba(0,0,0,0.1); overflow:hidden; position:relative;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Image Column -->\n    <div data-gjs-type='column' class='popup-image' style='flex:1; min-width:300px; height:100%; display:flex;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/watch.webp' alt='Watch Image' style='width:100%; height:auto; object-fit:cover; display:block;'>\n    </div>\n\n    <!-- Content Column -->\n    <form method='post' data-gjs-type='column' class='popup-content' style='flex:1; min-width:300px; padding:40px; display:flex; flex-direction:column; justify-content:center; text-align:center; align-items:center;'>\n      <h2 style='font-size:30px; font-weight:bold; color:#000000; margin-bottom:20px;'>Unlock 15% OFF Today!</h2>\n      <p style='font-size:16px; color:#444; margin-bottom:24px;'>Use code at checkout</p>\n      <button type='submit' style='width:180px; padding:14px 24px; background-color:#f59c1a; color:white; font-size:16px; font-weight:bold; border:1px solid #ddd; border-radius:9999px; cursor:pointer;'>Claim Offer</button>\n    </form>\n\n  </div>\n</body>"
            }
          ]
        },
        {
          "name": "Thank You Page",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; font-family:Arial, sans-serif; height:100vh; display:flex; align-items:center; justify-content:center;'>\n  <style>\n    @media (max-width: 600px) {\n      .thankyou-wrapper {\n        flex-direction: column !important;\n        margin: 20px 10px !important;\n        max-width: 100% !important;\n      }\n      .thankyou-image, .thankyou-content {\n        width: 100% !important;\n      }\n      .thankyou-image {\n        order: -1 !important;\n      }\n      .thankyou-content {\n        padding: 24px !important;\n        text-align: center !important;\n        align-items: center !important;\n      }\n      .thankyou-content button {\n        margin: 12px auto !important;\n      }\n    }\n  </style>\n\n  <div data-gjs-type='column' class='thankyou-wrapper' style='margin:80px auto 40px auto;display:flex; flex-wrap:wrap; background-color:#fcfcfc; border-radius:20px; max-width:720px; width:95%; box-shadow:0 8px 30px rgba(0,0,0,0.1); overflow:hidden; position:relative;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Image Column -->\n    <div data-gjs-type='column' class='thankyou-image' style='flex:1; min-width:300px; height:100%; display:flex;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/watch.webp' alt='Watch Thank You' style='width:100%; height:auto; object-fit:cover; display:block;'>\n    </div>\n\n    <!-- Content Column -->\n    <div data-gjs-type='column' class='thankyou-content' style='flex:1; min-width:300px; padding:40px; display:flex; flex-direction:column; justify-content:center; text-align:center; align-items:center;'>\n      <h2 style='font-size:30px; font-weight:bold; color:#000000; margin-bottom:20px;'>THANK YOU!</h2>\n      <p style='font-size:16px; color:#444; margin-bottom:16px;'>Your exclusive discount code is ready.</p>\n\n      <!-- Coupon Code Block -->\n      <div data-gjs-type='coupon' class='coupon-code-block' data-code='SAVE20' style='font-size:20px; font-weight:bold; background-color:#ffffff; padding:15px; border:2px dashed #ffc107; border-radius:8px; color:#333; cursor:pointer; text-align:center; margin-bottom:18px;width:280px;'>SAVE20</div>\n\n      <p style='font-size: 14px; color: #555; margin-bottom: 24px;'>Use this code at checkout and grab your watch at 15% OFF!</p>\n  </div>\n\n  </div>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "Fashion",
        "E-commerce"
      ]
    },
    {
      "id": "template-14",
      "category": "Entry",
      "image": "Shoes.webp",
      "pages": [
        {
          "name": "Shoe Arrival Promo",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; font-family:Arial, sans-serif; background:#fcf9f5; height:100vh; display:flex; align-items:center; justify-content:center;'>\n  <style>\n    @media (max-width: 600px) {\n      .popup-wrapper {\n        flex-direction: column !important;\n        margin: 40px 10px !important;\n        max-width: 100% !important;\n      }\n      .popup-image, .popup-content {\n        width: 100% !important;\n      }\n      .popup-image {\n        order: -1 !important;\n      }\n      .popup-content {\n        padding: 24px !important;\n        text-align: center !important;\n        align-items: center !important;\n      }\n      .popup-content button {\n        margin: 12px auto !important;\n      }\n    }\n  </style>\n\n  <div data-gjs-type='column' class='popup-wrapper' style='display:flex; flex-wrap:wrap; background-color:#fffaf4; border-radius:20px; max-width:750px; width:95%; margin:80px auto 40px auto; box-shadow:0 10px 25px rgba(0,0,0,0.1); overflow:hidden; position:relative;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Left Image Section -->\n    <div data-gjs-type='column' class='popup-image' style='flex:1; min-width:300px; display:flex; align-items:center; justify-content:center;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/shoes.webp' alt='New Shoes' style='max-width:100%; height:100%;'>\n    </div>\n\n    <!-- Right Content Section -->\n    <form method='post' data-gjs-type='column' class='popup-content' style='flex:1; min-width:300px; padding:40px; display:flex; flex-direction:column; justify-content:center;'>\n      <h2 style='font-size:30px; font-weight:bold; color:#000000; margin-bottom:20px;'>Just Arrived!</h2>\n      <p style='font-size:16px; color:#444; margin-bottom:30px;'>Check out our latest shoes<br>- limited stock available</p>\n      <button style='width:200px; padding:14px 24px; background-color:#cc4c4c; color:#ffffff; font-size:16px; font-weight:bold; border:1px solid #ddd; border-radius:6px; cursor:pointer;'>Shop New Collection</button></form>\n    \n\n  </div>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "Fashion",
        "E-commerce"
      ]
    },
    {
      "id": "template-15",
      "category": "Entry",
      "image": "CoffeeDispenser.webp",
      "pages": [
        {
          "name": "Coffee Maker Discount Popup",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; font-family:Helvetica, Arial, sans-serif; background:#f7f4f1; min-height:100vh; display:flex; align-items:center; justify-content:center;'>\n  <style>\n    html, body {\n      height: 100%;\n    }\n    @media (max-width: 768px) {\n      .popup-container {\n        flex-direction: column !important;\n        width: 95% !important;\n        max-width: 400px !important;\n        margin: auto !important;\n      }\n      .popup-image, .popup-content {\n        width: 100% !important;\n        flex: unset !important;\n      }\n      .popup-image img {\n        width: 100% !important;\n        height: auto !important;\n        border-radius: 20px 20px 0 0 !important;\n        display: block;\n      }\n      .popup-content {\n        padding: 24px !important;\n        text-align: center !important;\n      }\n      .popup-content h2 {\n        font-size: 24px !important; font-weight: bold !important;\n        margin-bottom: 12px !important;\n      }\n      .popup-content p {\n        font-size: 24px !important; font-weight: bold !important;\n        margin-bottom: 20px !important;\n      }\n      .popup-content button {\n        width: auto !important;\n        padding: 10px 24px !important;\n        font-size: 24px !important; font-weight: bold !important;\n      }\n      .close-btn  {\n      position: absolute !important;\n      top: 0px !important;\n      right: 0px !important; left: auto !important;\n      \n      font-size: 24px !important; font-weight: bold !important;\n      font-weight: bold !important;\n      cursor: pointer !important;\n      border: none !important;\n      z-index: 9999 !important;\n    }\n    }\n  </style>\n\n  <div class='popup-container' style='margin:100px auto;display:flex; flex-direction:row; background:#ffffff; border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,0.1); overflow:hidden; max-width:700px; width:95%; position:relative;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Image Section -->\n    <div class='popup-image' style='flex:1; background:#f0e6df;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/coffeemaker.webp' alt='Coffee Maker' style='width:100%; height:auto; object-fit:cover; display:block;'>\n    </div>\n\n    <!-- Content Section -->\n    <form method='post' data-gjs-type='column' class='popup-content' style='flex:1; padding:40px; display:flex; flex-direction:column; justify-content:center; background:#fff;'>\n      <h2 style='font-size:30px; color:#3e2b27; margin-bottom:16px;'>Get Your Morning Brew</h2>\n      <p style='font-size:16px; color:#555; margin-bottom:24px;'>Enjoy <strong>25% OFF</strong> on all coffee makers. Start your day the right way!</p>\n     <button type='submit' style='padding:12px 24px; background-color:#6b4035; color:#ffffff; font-size:16px; border:1px solid #ddd; border-radius:9999px; cursor:pointer; width:fit-content; align-self:center;'>Shop Now</button></form>\n    </div>\n\n  </div>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "Food & Drink",
        "E-commerce"
      ]
    },
    {
      "id": "template-16",
      "category": "Coupon Discount",
      "image": "Kettle.webp",
      "pages": [
        {
          "name": "Electric Kettle Boil & Save Popup",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; font-family:Arial, sans-serif; background:#fdfaf3; min-height:100vh; display:flex; align-items:center; justify-content:center;'>\n  <style>\n    @media (max-width: 600px) {\n      .popup-wrapper {\n        flex-direction: column !important;\n        margin: 40px 10px !important;\n        max-width: 100% !important;\n      }\n      .popup-image, .popup-content {\n        width: 100% !important;\n      }\n      .popup-content {\n        padding: 24px !important;\n        text-align: center !important;\n      }\n      .popup-content button {\n        margin: 12px auto !important;\n      }\n      .close-btn  {\n      position: absolute !important;\n      top: 0px !important;\n      right: 0px !important; left: auto !important;\n      \n      font-size: 24px !important; font-weight: bold !important;\n      font-weight: bold !important;\n      cursor: pointer !important;\n      border: none !important;\n      z-index: 9999 !important;\n    }\n    }\n  </style>\n\n  <div class='popup-wrapper' style='display:flex; flex-wrap:wrap; max-width:700px; width:95%; background:#fffefb; border-radius:20px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.1); position:relative; margin:80px auto 40px auto;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Left Column (Image) -->\n    <div class='popup-image' data-gjs-type='column' style='flex:1 1 300px; background:#f6f6f6; display:flex; justify-content:center; align-items:center;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/kettle.webp' alt='Electric Kettle Offer' style='width:100%; height:auto; object-fit:cover; display:block;'>\n    </div>\n\n    <!-- Right Column (Content) -->\n    <form method='post' class='popup-content' data-gjs-type='column' style='flex:1 1 300px; padding:40px 30px; text-align:center; background-color:#fffefb; display:flex; flex-direction:column; justify-content:center;'>\n      <h2 style='font-size:36px; font-weight:bold; color:#142742; margin-bottom:20px; line-height:1.2;'>BOIL<br>&amp; SAVE!</h2>\n      <p style='font-size:17px; color:#333; margin-bottom:25px;'>Enjoy 20% off on electric kettles \u2013 hot deals for a limited time.</p>\n     <button style='width:160px; padding:14px 20px; background-color:#e48c30; color:white; font-size:16px; font-weight:bold; border:1px solid #ddd; border-radius:30px; cursor:pointer;'>Shop Now</button></form>\n    \n\n  </div>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "Electronics",
        "E-commerce"
      ]
    },
    {
      "id": "template-17",
      "category": "Coupon Discount",
      "image": "BtWatch.webp",
      "pages": [
        {
          "name": "Fitness Tracker Promo Popup",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; font-family:Arial, sans-serif; background:#fdfcfb; min-height:100vh; display:flex; align-items:center; justify-content:center;'>\n  <style>\n    @media (max-width: 600px) {\n      .popup-wrapper {\n        flex-direction: column !important;\n        margin: 20px 10px !important;\n        max-width: 100% !important;\n      }\n      .popup-image, .popup-content {\n        width: 100% !important;\n      }\n      .popup-image {\n        order: -1 !important;\n      }\n      .popup-content {\n        padding: 24px !important;\n        text-align: center !important;\n        align-items: center !important;\n      }\n      .popup-content button {\n        margin: 12px auto !important;\n      }\n      .close-btn  {\n      position: absolute !important;\n      top: 0px !important;\n      right: 0px !important; left: auto !important;\n      \n      font-size: 24px !important; font-weight: bold !important;\n      font-weight: bold !important;\n      cursor: pointer !important;\n      border: none !important;\n      z-index: 9999 !important;\n    }\n    }\n  </style>\n\n  <div class='popup-wrapper' data-gjs-type='column' style='margin:80px auto 40px auto;display:flex; flex-wrap:wrap; background-color:#ffffff; border-radius:20px; max-width:720px; width:95%; box-shadow:0 10px 30px rgba(0,0,0,0.1); overflow:hidden; position:relative;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Image Column -->\n    <div class='popup-image' data-gjs-type='column' style='flex:1; min-width:300px; display:flex; justify-content:center; align-items:center; background:#f3f3f3;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/smartwatch.webp' alt='Fitness Band' style='width:100%; height:auto; object-fit:cover; display:block;'>\n    </div>\n\n    <!-- Content Column -->\n    <form method='post' class='popup-content' data-gjs-type='column' style='flex:1; min-width:300px; padding:40px 30px; background:#fff; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;'>\n      <h2 style='font-size:30px; font-weight:bold; color:#000000; margin-bottom:20px;'>Track Your Goals!</h2>\n      <p style='font-size:16px; color:#333; margin-bottom:25px;'>Get 20% off on all fitness trackers \u2013 stay fit and save.</p>\n      <button style='width:180px; padding:14px 24px; background-color:#00bdf2; color:#ffffff; font-size:16px; font-weight:bold; border:1px solid #ddd; border-radius:30px; cursor:pointer;'>Shop Now</button></form>\n    \n\n  </div>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "Fashion",
        "Electronics",
        "E-commerce"
      ]
    },
    {
      "id": "template-18",
      "category": "Coupon Discount",
      "image": "HeadPhone.webp",
      "pages": [
        {
          "name": "Headphone Discount Popup",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; font-family:Georgia, serif; background-color:#f5f5f5; min-height:100vh; display:flex; align-items:center; justify-content:center;'>\n  <style>\n    @media (max-width: 600px) {\n      .popup-wrapper {\n        flex-direction: column !important;\n        margin: 20px 10px !important;\n        max-width: 100% !important;\n      }\n      .popup-image, .popup-content {\n        width: 100% !important;\n      }\n      .popup-image {\n        order: -1 !important;\n        min-height: 220px !important;\n      }\n      .popup-content {\n        padding: 24px !important;\n        text-align: center !important;\n        align-items: center !important;\n      }\n      .popup-content button {\n        margin: 12px auto !important;\n      }\n      .close-btn  {\n      position: absolute !important;\n      top: 0px !important;\n      right: 0px !important; left: auto !important;\n      \n      font-size: 24px !important; font-weight: bold !important;\n      font-weight: bold !important;\n      cursor: pointer !important;\n      border: none !important;\n      z-index: 9999 !important;\n    }\n    }\n\n    /* IMAGE FIX \u2014 NO WHITE GAPS */\n    .popup-image {\n      min-height: 320px;\n      display: flex;\n      align-items: stretch;\n      justify-content: center;\n    }\n    .popup-image img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      display: block;\n    }\n  </style>\n\n  <div class='popup-wrapper' data-gjs-type='column' style='margin:80px auto 40px auto; display:flex; flex-wrap:wrap; background-color:#57525e; border-radius:20px; max-width:720px; width:95%; box-shadow:0 10px 30px rgba(0,0,0,0.2); overflow:hidden; position:relative;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Image Column -->\n    <div class='popup-image' data-gjs-type='column' style='flex:1; min-width:300px; background-color:#57525e;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/headphones.webp' alt='Headphones' onerror=\"this.style.display='none';\">\n    </div>\n\n    <!-- Content Column -->\n    <form method='post' class='popup-content' data-gjs-type='column' style='flex:1; min-width:300px; padding:40px 30px; background-color:#57525E; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;'>\n      <h2 style='font-size:28px; color:#ffffff; font-weight:bold; margin-bottom:10px;'>SOUND DEALS</h2>\n      <h2 style='font-size:28px; color:#ffffff; font-weight:bold; margin-bottom:10px;'>Just for You!</h2>\n      <p style='font-size:14px; color:#ccc; margin-bottom:30px;'>Get 20% off on your first headphone purchase.</p>\n      <button type='submit' style='width:180px; padding:14px 24px; background-color:#FF8933; color:#ffffff; font-size:15px; font-weight:bold; border:1px solid #ddd; border-radius:10px; cursor:pointer;'>Claim Discount</button>\n    </form>\n\n  </div>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "Electronics",
        "E-commerce"
      ]
    },
    {
      "id": "template-19",
      "category": "Entry",
      "image": "Welcome.webp",
      "pages": [
        {
          "name": "Welcome Store Popup",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; font-family:Arial, sans-serif; background:#f5f5f5; min-height:100vh; display:flex; align-items:center; justify-content:center;'>\n  <style>\n    @media (max-width: 600px) {\n      .popup-wrapper {\n        flex-direction: column !important;\n        margin: 20px 10px !important;\n        max-width: 100% !important;\n      }\n      .popup-image, .popup-content {\n        width: 100% !important;\n      }\n      .popup-image {\n        order: -1 !important;\n      }\n      .popup-content {\n        padding: 24px !important;\n        text-align: center !important;\n      }\n      .popup-content button {\n        margin: 12px auto !important;\n      }\n      .close-btn  {\n      position: absolute !important;\n      top: 0px !important;\n      right: 0px !important; left: auto !important;\n      \n      font-size: 24px !important; font-weight: bold !important;\n      font-weight: bold !important;\n      cursor: pointer !important;\n      border: none !important;\n      z-index: 9999 !important;\n    }\n    }\n  </style>\n\n  <div class='popup-wrapper' data-gjs-type='column' style='margin:80px auto 40px auto; display:flex; flex-wrap:wrap; background:#ffffff; border-radius:16px; max-width:750px; width:95%; box-shadow:0 10px 30px rgba(0,0,0,0.1); overflow:hidden; position:relative;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Content Column -->\n    <form class='popup-content' data-gjs-type='column' style='flex:1; min-width:300px; padding:40px 30px; display:flex; flex-direction:column; justify-content:center;'>\n      <h2 style='font-size:28px; font-weight:bold; color:#000000; margin-bottom:12px;'>Welcome to<br>Our Store!</h2>\n      <p style='font-size:15px; color:#555; margin-bottom:24px;'>Sign up now to get exclusive updates and offers.</p>\n      <button style='width:160px; padding:12px 20px; background-color:#f9b233; color:#000000; font-size:15px; font-weight:bold; border:1px solid #ddd; border-radius:30px; cursor:pointer;'>Join Now</button>\n    </form>\n\n    <!-- Image Column -->\n    <div class='popup-image' data-gjs-type='column' style='flex:1; min-width:300px; display:flex; justify-content:center; align-items:center;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/Welcome.webp' alt='Welcome Image' style='width:100%; height:auto; object-fit:cover; display:block;'>\n    </div>\n\n  </div>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-20",
      "category": "Lead Capture",
      "image": "FaceCream.webp",
      "pages": [
        {
          "name": "Velvet Skin Welcome Popup",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:20px; font-family:Arial, sans-serif; min-height:100vh; width:100vw; display:flex; align-items:center; justify-content:center;'>\n  <style>\n    * {\n      box-sizing: border-box;\n    }\n\n    @media (max-width: 768px) {\n      .popup-wrapper {\n        flex-direction: column !important;\n        margin: 0 !important;\n        max-width: 100% !important;\n      }\n      .popup-image {\n        width: 100% !important;\n        min-height: 220px !important;\n      }\n      .popup-content {\n        padding: 20px !important;\n      }\n      .popup-content h1 {\n        font-size: 24px !important; font-weight: bold !important;\n      }\n      .popup-content h2 {\n        font-size: 24px !important; font-weight: bold !important;\n      }\n      .popup-content h3 {\n        font-size: 24px !important; font-weight: bold !important;\n      }\n      .popup-content p {\n        font-size: 24px !important; font-weight: bold !important;\n      }\n      .close-btn  {\n      position: absolute !important;\n      top: 0px !important;\n      right: 0px !important; left: auto !important;\n      \n      font-size: 24px !important; font-weight: bold !important;\n      font-weight: bold !important;\n      cursor: pointer !important;\n      border: none !important;\n      z-index: 9999 !important;\n    }\n    }\n\n    /* IMAGE SYSTEM \u2014 STABLE & CONSISTENT */\n    .popup-image {\n      min-height: 320px;\n      display: flex;\n      align-items: stretch;\n      justify-content: center;\n    }\n    .popup-image img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      display: block;\n    }\n\n    /* PREVIEW + MOBILE SAFETY */\n    .popup-wrapper {\n      max-height: 90vh;\n    }\n  </style>\n\n  <div class='popup-wrapper' style='margin:80px auto 40px auto; display:flex; flex-wrap:wrap; max-width:650px; width:100%; background:#1A1A1A; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.4); position:relative; color:white;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Left Column (Image) -->\n    <div class='popup-image' data-gjs-type='column' style='flex:1; min-width:280px; background:#0A0A0A;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/facecream.webp' alt='Velvet Cream' onerror=\"this.style.display='none';\">\n    </div>\n\n    <!-- Right Column (Content + Form) -->\n    <form class='popup-content' data-gjs-type='column' style='flex:1; min-width:280px; padding:32px; background-color:#0A0A0A; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;'>\n      <h1 style='font-size:45px; font-family:Georgia, serif; font-weight:700; margin-bottom:2px;'>Velvet</h1>\n      <h2 style='font-size:16px; color:#ccc; font-weight:400;'>Brighten Your Skin</h2>\n      <h1 style='font-size:30px; font-weight:800; margin-top:4px; margin-bottom:4px;'>New Here?</h1>\n      <h3 style='font-size:25px; font-weight:600;'>Save 20% Now</h3>\n      <p style='font-size:14px; color:#cccccc; margin-bottom:20px;'>Join Today to Claim Your Exclusive Savings!</p>\n\n      <input type='email' name='email' data-popup='email-input' placeholder='Enter your email' style='background-color:#000000; width:100%; padding:12px; border:1px solid #ffffff; border-radius:0; font-size:14px; color:white; margin-bottom:12px;'>\n      <button type='submit' data-popup='subscribe-btn' style='padding:12px; width:100%; background-color:#F4AFA0; color:#000000; font-size:14px; font-weight:bold; border:1px solid #ddd; border-radius:30px; cursor:pointer;'>CONTINUE</button>\n    </form>\n\n  </div>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation",
        "Newsletter Signup"
      ],
      "industry": [
        "Beauty",
        "E-commerce"
      ]
    },
    {
      "id": "template-21",
      "category": "Entry",
      "image": "Welcome2.webp",
      "pages": [
        {
          "name": "Store Welcome Popup",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; font-family:Arial, sans-serif;'>\n  <form data-gjs-type='column' style='max-width:500px; margin:80px auto 40px auto; background-color:#f6efe3; border-radius:12px; padding:40px 30px; box-shadow:0 10px 30px rgba(0,0,0,0.1); position:relative; text-align:center;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Title -->\n    <h1 style='font-size:32px; font-weight:bold; color:#0a0a0a; margin:0 0 10px;'>Welcome<br>to Our Store!</h1>\n\n    <!-- Subtitle -->\n    <p style='font-size:16px; color:#555; margin:0 0 30px;'>Sign up now to get exclusive updates and offers</p>\n\n         <input type='email' name='email' placeholder='Enter your email' required style='width:100%; padding:14px 16px; font-size:16px; border:2px solid #ccc; border-radius:8px; margin-bottom:20px; outline:none; box-sizing:border-box;'>\n\n      <button type='submit' style='width:100%; padding:14px; background-color:#cddff1; color:#000000; font-size:18px; font-weight:bold; border:1px solid #ddd; border-radius:10px; cursor:pointer;'>Join Now</button>\n  </form>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-22",
      "category": "Cart Abandonment",
      "image": "Cart.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; position:relative; height:100vh; width:100vw; overflow:hidden; font-family:Arial, sans-serif;'>\n\n  <style>\n    @media screen and (max-width: 768px) {\n      .popup-wrapper {\n        flex-direction: column !important;\n        margin: 40px 10px !important;\n        border-radius: 0 !important;\n      }\n      .popup-left, .popup-right {\n        width: 100% !important;\n        padding: 0 !important;\n      }\n      .popup-right {\n        order: -1 !important;\n      }\n      .popup-right img {\n        width: 100% !important;\n        height: 240px !important;\n        object-fit: cover !important;\n        border-radius: 0 !important;\n        display: block !important;\n      }\n      .popup-left {\n        text-align: center !important;\n        padding: 24px 20px !important;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n      }\n      .close-btn  {\n      position: absolute !important;\n      top: 0px !important;\n      right: 0px !important; left: auto !important;\n      \n      font-size: 24px !important; font-weight: bold !important;\n      font-weight: bold !important;\n      cursor: pointer !important;\n      border: none !important;\n      z-index: 9999 !important;\n    }\n    }\n  </style>\n\n  <div class='popup-wrapper' data-gjs-type='column' style='max-width:700px; width:95%; margin:80px auto; display:flex; background:#ffffff; border-radius:10px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,0.15); position:relative;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Left Column (Content) -->\n    <form data-gjs-type='column' class='popup-left' style='flex:1; padding:40px; display:flex; flex-direction:column; justify-content:center;'>\n      <h3 style='color:#444; font-size:18px; margin:0 0 8px;'>HOLD ON!</h3>\n      <h1 style='font-size:36px; font-weight:bold; color:#000000; margin:0 0 20px;'>YOUR CART IS WAITING!</h1>\n      <p style='font-size:16px; color:#555; margin-bottom:24px;'>Complete your purchase now and enjoy<br><strong>$20 OFF</strong></p>\n      <button style='padding:14px 24px; background-color:#865A47; color:#fff; font-size:16px; font-weight:bold; border:1px solid #ddd; border-radius:8px; cursor:pointer; margin-bottom:16px;'>GET MY $20 OFF NOW!</button>\n      <p style='font-size:14px; color:#888;'>No, thanks. I\u2019m good without the discount</p>\n    </form>\n\n    <!-- Right Column (Image) -->\n    <div class='popup-right' style='flex:1; display:flex; justify-content:center; align-items:center;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/AbandonedCartOffer.webp' alt='Cart Offer' style='width:100%; height:100%; object-fit:cover; display:block;'>\n    </div>\n\n  </div>\n</body>"
            }
          ]
        },
        {
          "name": "Thank You Page",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; position:relative; height:100vh; width:100vw; overflow:hidden; font-family:Arial, sans-serif;'>\n\n  <style>\n    @media screen and (max-width: 768px) {\n      .popup-wrapper {\n        flex-direction: column !important;\n        margin: 40px 10px !important;\n        border-radius: 0 !important;\n      }\n      .popup-left, .popup-right {\n        width: 100% !important;\n        padding: 0 !important;\n      }\n      .popup-right {\n        order: -1 !important;\n      }\n      .popup-right img {\n        width: 100% !important;\n        height: 240px !important;\n        object-fit: cover !important;\n        border-radius: 0 !important;\n        display: block !important;\n      }\n      .popup-left {\n        text-align: center !important;\n        padding: 24px 20px !important;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n      }\n      .close-btn  {\n      position: absolute !important;\n      top: 0px !important;\n      right: 0px !important; left: auto !important;\n      \n      font-size: 24px !important; font-weight: bold !important;\n      font-weight: bold !important;\n      cursor: pointer !important;\n      border: none !important;\n      z-index: 9999 !important;\n    }\n    }\n  </style>\n\n  <div class='popup-wrapper' data-gjs-type='column' style='max-width:700px; width:95%; margin:80px auto; display:flex; background:#ffffff; border-radius:10px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,0.15); position:relative;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Left Column (Content) -->\n    <div data-gjs-type='column' class='popup-left' style='flex:1; padding:40px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;'>\n      <h1 style='font-size:32px; font-weight:bold; color:#000000; margin-bottom:20px;'>THANK YOU!</h1>\n      <p style='font-size:16px; color:#555; margin-bottom:24px;'>Use the Code below to avail the discount.<br><strong>$20 OFF</strong> has been added to your cart.</p><div data-gjs-type='coupon' class='coupon-code-block' data-code='SAVE20' style='font-size:20px; font-weight:bold; background-color:#ffffff; padding:15px; border:2px dashed #ffc107; border-radius:8px; color:#333; cursor:pointer; text-align:center; margin-bottom:18px;width:280px;'>SAVE20</div>\n    </div>\n\n    <!-- Right Column (Image) -->\n    <div class='popup-right' style='flex:1; display:flex; justify-content:center; align-items:center;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/AbandonedCartOffer.webp' alt='Thank You Image' style='width:100%; height:100%; object-fit:cover; display:block;'>\n    </div>\n\n  </div>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Cart Recovery"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-23",
      "category": "Coupon Discount",
      "image": "BtSpeaker2.webp",
      "pages": [
        {
          "name": "Speaker Discount Popup",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; position:relative; height:100vh; width:100vw; overflow:hidden; font-family:Arial, sans-serif;'>\n\n  <style>\n    @import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');\n\n    @media screen and (max-width: 768px) {\n      .music-promo-wrapper {\n        flex-direction: column !important;\n        text-align: center;\n      }\n      .music-left, .music-right {\n        width: 100% !important;\n      }\n      .music-right {\n        order: -1 !important;\n        height: 300px !important;\n        padding: 0 !important;\n      }\n      .music-right img {\n        width: 100% !important;\n        height: 100% !important;\n        object-fit: cover !important;\n        display: block !important;\n      }\n    }\n  </style>\n\n  <section class='music-promo-wrapper' data-gjs-type='column' style='max-width:700px; margin:80px auto; display:flex; background:#ffffff; border-radius:10px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,0.15); position:relative;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Left Column -->\n    <form method='post' data-gjs-type='column' class='music-left' style='flex:1; padding:40px; font-family:Arial, sans-serif;'>\n      <h1 style='font-size:36px; margin-bottom:16px; color:#000000; font-family:Permanent Marker, cursive;'>Your Music</h1>\n      <h1 style='font-size:36px; margin-top:-12px; margin-bottom:24px; color:#F05A45; font-family:Permanent Marker, cursive;'>Louder!</h1>\n      <p style='font-size:18px; color:#333; font-weight:bold; margin:0 0 10px;'>Grab 30% off</p>\n      <p style='font-size:16px; color:#333; margin:0 0 10px;'>Bluetooth speakers</p>\n      <p style='font-size:16px; color:#666; margin-bottom:30px;'>Experience sound like never before</p>\n  <button style='width:200px;padding:14px 24px; background-color:#F05A45; color:#ffffff; font-size:16px; font-weight:bold; border:1px solid #ddd; border-radius:8px; cursor:pointer;'>Shop Now</button>\n </form>    <!-- Right Column -->\n    <div data-gjs-type='column' class='music-right' style='flex:1; padding:0;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/speaker.webp' alt='Speaker Promo' style='width:100%; height:100%; object-fit:cover; display:block;'>\n    </div>\n\n  </section>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "Electronics",
        "E-commerce"
      ]
    },
    {
      "id": "template-24",
      "category": "Coupon Discount",
      "image": "Sunglass.webp",
      "pages": [
        {
          "name": "Email Subscribe Popup",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; font-family:Arial, sans-serif; height:100vh;'>\n  <style>\n    @media (max-width: 600px) {\n      .popup-container {\n        flex-direction: column !important;\n        margin: 40px 10px !important;\n        max-width: 100% !important;\n      }\n      .popup-image {\n        order: -1 !important;\n        padding: 0 !important;\n      }\n      .popup-content, .popup-image {\n        width: 100% !important;\n      }\n      .popup-content {\n        padding: 20px !important;\n        text-align: center !important;\n        align-items: center !important;\n      }\n      .popup-content button {\n        margin: 12px auto !important;\n      }\n      .close-btn  {\n      position: absolute !important;\n      top: 0px !important;\n      right: 0px !important; left: auto !important;\n      \n      font-size: 24px !important; font-weight: bold !important;\n      font-weight: bold !important;\n      cursor: pointer !important;\n      border: none !important;\n      z-index: 9999 !important;\n    }\n    }\n  </style>\n\n  <div data-gjs-type='column' class='popup-container' style='margin: 80px auto; display:flex; flex-wrap:wrap; background-color:#FDFBF8; border-radius:20px; max-width:700px; width:95%; box-shadow:0 10px 25px rgba(0,0,0,0.08); overflow:hidden; z-index:9999; position:relative;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Left Column (Content) -->\n    <form data-gjs-type='column' class='popup-content' style='flex:1; min-width:300px; padding:40px; display:flex; flex-direction:column; justify-content:center;'>\n      <p style='font-size: 16px; font-weight: 600; letter-spacing: 1px; margin: 0 0 10px;'>RAMSDON</p>\n      <div style='font-size: 34px; font-weight: 800; margin-bottom: 16px; line-height: 1.2;'>Shade Your Style!</div>\n      <p style='font-size: 16px; color: #555; margin-bottom: 20px;'>Save 30% on select sunglasses \u2013 limited time offer</p>\n    <button type='submit' style='width:100%;background-color: #000000; color: #ffffff; padding: 12px 32px; font-size: 14px; font-weight: bold; border: none; border-radius: 6px; cursor: pointer; margin: 12px 0;'>CLAIM OFFER</button>\n      <button type='submit' style='width:100%;background-color: #ffffff; color: #000000; padding: 12px 32px; font-size: 14px; font-weight: bold; border:1px solid #ddd;border-radius: 6px; cursor: pointer;'>No, Thanks</button></form>\n    \n\n    <!-- Right Column (Image) -->\n    <div data-gjs-type='column' class='popup-image' style='flex:1; min-width:300px; background:#fff; display:flex; align-items:center; justify-content:center; padding:0;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/sunglasses.webp' alt='Sunglasses' style='width:100%; height:100%; object-fit:cover;' onerror=\"this.style.display='none';\">\n    </div>\n\n  </div>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "Fashion",
        "E-commerce"
      ]
    },
    {
      "id": "template-25",
      "category": "Entry",
      "image": "casual.webp",
      "pages": [
        {
          "name": "Subscribe Email Visual",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; position:relative; height:100vh; width:100vw; overflow:hidden; font-family:Arial, sans-serif;'>\n  <style>\n    @media screen and (max-width: 768px) {\n      .subscribe-split-section {\n        flex-direction: column-reverse !important;\n      }\n      .subscribe-split-section .left-col,\n      .subscribe-split-section .right-col {\n        width: 100% !important;\n      }\n      .subscribe-split-section .right-col img {\n        border-radius: 10px 10px 0 0 !important;\n      }\n      .close-btn  {\n      position: absolute !important;\n      top: 0px !important;\n      right: 0px !important; left: auto !important;\n      \n      font-size: 24px !important; font-weight: bold !important;\n      font-weight: bold !important;\n      cursor: pointer !important;\n      border: none !important;\n      z-index: 9999 !important;\n    }\n    }\n    .close-btn  {\n      position: absolute !important;\n      top: 0px !important;\n      right: 0px !important; left: auto !important;\n      \n      font-size: 24px !important; font-weight: bold !important;\n      font-weight: bold !important;\n      cursor: pointer !important;\n      border: none !important;\n      z-index: 9999 !important;\n    }\n  </style>\n\n  <section data-gjs-type='column' class='subscribe-split-section' style='max-width:720px; width:100%; margin:80px auto 40px auto; background:#F5F6F5; box-shadow:0 10px 30px rgba(0,0,0,0.2); border-radius:12px; display:flex; overflow:hidden; position:relative;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Left Column: Text + Email Form -->\n    <form method='post' class='left-col' data-gjs-type='column' style='flex:1; padding:40px 30px; display:flex; flex-direction:column; justify-content:center;'>\n      <h2 style='font-size:28px; font-weight:bold; color:#000000; margin-bottom:10px;'>Be the First<br>to Know!</h2>\n      <p style='font-size:15px; color:#555; margin-bottom:20px;'>Subscribe for exclusive updates, deals, and product launches.</p>\n\n        <input type='email' name='email' placeholder='Enter your email' required style='width:90%; padding:12px 16px; border:1px solid #ccc; border-radius:8px; font-size:14px; margin-bottom:16px;'>\n        <button type='submit' style='width:90%; padding:12px; background-color:#E88F2A; color:white; font-size:15px; font-weight:bold; border:1px solid #ddd; border-radius:10px; cursor:pointer;'>Subscribe Now</button>\n      </form>\n    <!-- Right Column: Image -->\n    <div class='right-col' data-gjs-type='column' style='flex:1;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/WomanusingPhone.webp' alt='Woman using phone' style='width:100%; height:100%; object-fit:cover;'>\n    </div>\n\n  </section>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation",
        "Newsletter Signup"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-26",
      "category": "Entry",
      "image": "Newsletter.webp",
      "pages": [
        {
          "name": "Newsletter Offer Popup",
          "frames": [
            {
              "component": "<body data-gjs-type='column' style='margin:0; padding:0; font-family:Arial, sans-serif;'>\n  <form data-gjs-type='column' style='max-width:600px; margin:80px auto; background-color:#ffffff; border-radius:20px; padding:50px 40px; box-shadow:0 25px 80px rgba(0, 0, 0, 0.15); position:relative; text-align:center;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Title -->\n    <h1 data-gjs-type='text' style='font-size:26px; font-weight:700; color:#0f172a; margin:0 0 30px;'>Join our newsletter for exclusive offers</h1>\n\n         <!-- Email Label -->\n      <h6 for='email' data-gjs-type='text' style='display:block; text-align:left; font-size:15px; color:#1f2937; margin-bottom:8px;'>Email Address</h6>\n\n      <!-- Form Start -->\n          <input type='email' name='email' placeholder='exampleemail@gmail.com' required style='width:96%; padding:14px 16px; font-size:16px; border:1px solid #cbd5e1; border-radius:10px; outline:none; box-shadow:0 0 8px rgba(2, 132, 199, 0.2); margin-bottom:10px;'>\n\n      <!-- Subscribe Button -->\n      <button type='submit' data-gjs-type='button' style='width:100%; padding:14px; background-color:#fca15f; color:#ffffff; font-size:18px; font-weight:600; border:1px solid #ddd; border-radius:10px; cursor:pointer;'>Subscribe</button>\n         </form>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation",
        "Newsletter Signup"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-27",
      "category": "Coupon Discount",
      "image": "Earbud.webp",
      "pages": [
        {
          "name": "Headphone Discount Popup (Responsive Layout - Image Left, Content Right)",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; font-family:Arial, sans-serif; height:100vh;'>\n  <style>\n    @media (max-width: 600px) {\n      .popup-container {\n        flex-direction: column !important;\n        margin: 40px 10px !important;\n        max-width: 100% !important;\n      }\n      .popup-image {\n        order: -1 !important;\n      }\n      .popup-content, .popup-image {\n        width: 100% !important;\n      }\n      .popup-content {\n        padding: 20px !important;\n        text-align: center !important;\n        align-items: center !important;\n      }\n      .popup-content button {\n        margin: 12px auto !important;\n      }\n    }\n  </style>\n\n  <div data-gjs-type='column' class='popup-container' style='margin: 80px auto; display:flex; flex-wrap:wrap; background-color:#121113; border-radius:20px; max-width:800px; width:95%; box-shadow:0 10px 25px rgba(0,0,0,0.4); overflow:hidden; z-index:9999; position:relative;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Left Column (Image) -->\n    <div data-gjs-type='column' class='popup-image' style='flex:1; min-width:300px; background:#2e2e2e; display:flex; align-items:center; justify-content:center;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/Airpods.webp' alt='Headphones' style='width:100%; height:auto; object-fit:cover;' onerror=\"this.style.display='none';\">\n    </div>\n\n    <!-- Right Column (Content) -->\n    <form method='post' data-gjs-type='column' class='popup-content' style='flex:1; min-width:300px; padding:40px; display:flex; flex-direction:column; justify-content:center; background-color:#121113;'>\n      <h2 style='font-size:32px; font-family:\\\"Patrick Hand\\\", cursive; color:#ffffff; font-weight:bold; margin:0 0 10px;'>Sound Deals</h2>\n      <h2 style='font-size:32px; font-family:\\\"Patrick Hand\\\", cursive; color:#ffffff; font-weight:bold; margin:0 0 20px;'>Just for You!</h2>\n      <p style='font-size:16px; color:#ccc; margin-bottom:30px;'>Get 20% off on your first headphone purchase.</p>\n      <button style='width:180px; padding:12px 20px; background:#FF4D4D; color:#ffffff; font-size:15px; font-weight:bold; border:1px solid #ddd; border-radius:10px; cursor:pointer;'>Claim Discount</button>\n    </form>\n\n  </div>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "Electronics",
        "E-commerce"
      ]
    },
    {
      "id": "template-28",
      "category": "Entry",
      "image": "LatestWaitList.webp",
      "pages": [
        {
          "name": "Store Welcome Popup",
          "frames": [
            {
              "component": "<body data-gjs-type='column' style='margin:0; padding:0; font-family:Arial, sans-serif;'>\n  <form data-gjs-type='column' style='max-width:500px; margin:80px auto; background-color:#fdf0f3; border-radius:20px; padding:40px 30px; box-shadow:0 10px 30px rgba(0,0,0,0.1); position:relative; text-align:center;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Title -->\n    <h1 style='font-size:28px; font-weight:700; color:#0a0a0a; margin:0 0 10px;'>Stay Updated with the<br>Latest!</h1>\n\n    <!-- Subtitle -->\n    <p style='font-size:16px; color:#555; margin:0 0 30px;'>Join thousands of readers getting expert insights, updates, and tips delivered weekly</p>\n\n          <input type='email' name='email' placeholder='Enter your email' required style='width:100%; padding:14px 16px; font-size:16px; border:1px solid #ccc; border-radius:8px; margin-bottom:20px; outline:none; box-sizing:border-box;'>\n\n      <button type='submit' style='width:100%; padding:14px; background-color:#d946ef; color:#ffffff; font-size:18px; font-weight:600; border:1px solid #ddd; border-radius:8px; cursor:pointer;'>Subscribe Now</button>\n           <p style='font-size:14px; color:#6b7280; margin-top:20px;'>We respect your inbox \u2013 no spam</p>\n\n  </form>\n\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation",
        "Newsletter Signup"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-29",
      "category": "Entry",
      "image": "LovingTip.webp",
      "pages": [
        {
          "name": "Store Welcome Popup",
          "frames": [
            {
              "component": "<body data-gjs-type='column' style='margin:0; padding:0; font-family:Arial, sans-serif;'>\n  <form data-gjs-type='column' style='max-width:550px; margin:80px auto; background-color:#D9E9EB; border-radius:20px; padding:50px 40px; box-shadow:0 20px 60px rgba(0,0,0,0.2); position:relative; text-align:center;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Title -->\n    <h1 data-gjs-type='text' style='font-size:32px; font-weight:700; color:#111; margin:0 0 20px;'>Loving the tips<br>so far?</h1>\n\n    <!-- Subtitle -->\n    <p data-gjs-type='text' style='font-size:16px; color:#333; margin:0 0 30px;'>Stay in the loop with more curated insights, straight to your inbox</p>\n\n         <input type='email' name='email' placeholder='Enter your email' required data-gjs-type='input' style='width:100%; padding:16px 20px; font-size:16px; border:1px solid #ccc; border-radius:999px; margin-bottom:24px; box-shadow:0 4px 6px rgba(0,0,0,0.1); outline:none; box-sizing:border-box;'>\n\n      <button type='submit' data-gjs-type='button' style='width:100%; padding:16px 20px; background-color:#ea4335; color:#fff; font-size:18px; font-weight:600; border:1px solid #ddd; border-radius:999px; cursor:pointer; box-shadow:0 4px 6px rgba(0,0,0,0.2);'>Subscribe Now</button>\n        <p data-gjs-type='text' style='font-size:13px; color:#555; margin-top:24px;'>No spam. Just helpful content, occasionally</p>\n\n  </form>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation",
        "Newsletter Signup"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-30",
      "category": "Entry",
      "image": "ContentSubscribePopup.webp",
      "pages": [
        {
          "name": "Content Subscribe Popup",
          "frames": [
            {
              "component": "<body data-gjs-type='column' style='margin:0; padding:0; font-family:Arial, sans-serif;'>\n  <form data-gjs-type='column' style='max-width:500px; margin:80px auto; background-color:#ffffff; border-radius:16px; padding:40px 30px; box-shadow:0 25px 80px rgba(0, 0, 0, 0.15); position:relative; text-align:center;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Title -->\n    <h1 data-gjs-type='text' style='font-size:26px; font-weight:700; color:#111; margin:0 0 10px;'>Enjoying the Content?<br>Stay Updated!</h1>\n\n    <!-- Subtitle -->\n    <p data-gjs-type='text' style='font-size:16px; color:#475569; margin:0 0 30px;'>Subscribe now and never miss an update on our latest deals & insights</p>\n\n          <!-- Label -->\n      <h6 for='email' data-gjs-type='text' style='display:block; font-size:15px; font-weight:500; color:#111; margin-bottom:8px; text-align:left;'>Email:</h6>\n\n      <!-- Input Field -->\n     <input type='email' name='email' placeholder='Enter your email' required style='width:100%; padding:14px 16px; font-size:16px; border:1px solid #ccc; border-radius:8px; margin-bottom:24px; outline:none; box-sizing:border-box;'>\n\n      <!-- Subscribe Button -->\n      <button type='submit' data-gjs-type='button' style='width:100%; padding:14px; background-color:#2563eb; color:#ffffff; font-size:16px; font-weight:600; border:1px solid #ddd; border-radius:10px; cursor:pointer; margin-bottom:12px;'>Subscribe Now</button>\n        <!-- Maybe Later Button -->\n    <button type='submit' data-gjs-type='button' style='width:100%; padding:14px; background-color:#e5e7eb; color:#111; font-size:16px; font-weight:500; border:1px solid #ddd; border-radius:10px; cursor:pointer;'>Maybe Later</button>\n\n  </form>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation",
        "Newsletter Signup"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-31",
      "category": "Entry",
      "image": "CartExpirePopup.webp",
      "pages": [
        {
          "name": "Cart Expiry Warning Popup",
          "frames": [
            {
              "component": "<body data-gjs-type='column' style='margin:0; padding:0; font-family:Arial, sans-serif;'>\n  <form data-gjs-type='column' style='max-width:500px; margin:80px auto; background-color:#b91c1c; border-radius:20px; padding:50px 30px; box-shadow:0 25px 80px rgba(0, 0, 0, 0.15); position:relative; text-align:center; color:#ffffff;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Title -->\n    <h1 data-gjs-type='text' style='font-size:28px; font-weight:800; margin-bottom:10px;'>YOUR CART IS</h1>\n    <h1 data-gjs-type='text' style='font-size:44px; font-weight:900; line-height:1.2; margin-bottom:20px;'>ABOUT TO<br>EXPIRE!</h1>\n\n    <!-- Subtitle -->\n    <p data-gjs-type='text' style='font-size:16px; margin:0 0 30px;'>Hurry! Checkout now before your items sell out</p>\n\n    <!-- Lock Icon -->\n    <div style='font-size:28px; margin-bottom:12px;'>\ud83d\udd12</div>\n\n    <!-- Timer Info -->\n    <p style='font-size:18px; font-weight:600; margin-bottom:30px;'>Cart reserved for: <span style='font-weight:bold;'>04:59</span></p>\n\n          <button type='submit' data-gjs-type='button' style='width:100%; padding:16px; background-color:#fff; color:#b91c1c; font-size:18px; font-weight:700; border:1px solid #ddd; border-radius:50px; cursor:pointer; margin-bottom:20px;'>Checkout Now</button>\n        <!-- Continue Shopping Link -->\n    <h3 style='color:#fff; font-size:14px; text-decoration:none;'>continue Shopping \u2192</h3>\n\n  </form>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Cart Recovery"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-32",
      "category": "Lead Capture",
      "image": "BlackFridaySale.webp",
      "pages": [
        {
          "name": "Black Friday Popup",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; font-family:Poppins, sans-serif; min-height:100vh; display:flex; align-items:center; justify-content:center;'>\n  <style>\n    .popup-wrapper {\n      margin: 60px auto;\n      display: flex;\n      flex-wrap: nowrap;\n      background-color: #000000;\n      border-radius: 0px;\n      max-width: 700px;\n      width: 95%;\n      box-shadow: 0 10px 30px rgba(0,0,0,0.4);\n      overflow: hidden;\n      position: relative;\n      border: 1px solid;\n    }\n    .popup-left {\n      flex: 0 0 50%;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      background: #000000;\n      min-height: 400px;\n    }\n    .popup-right {\n      flex: 0 0 50%;\n      min-width: 320px;\n      padding: 50px 40px;\n      background-color: #000000;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      text-align: center;\n    }\n    .close-btn  {\n      position: absolute !important;\n      top: 0px !important;\n      right: 0px !important; left: auto !important;\n      \n      font-size: 24px !important; font-weight: bold !important;\n      font-weight: bold !important;\n      cursor: pointer !important;\n      border: none !important;\n      z-index: 9999 !important;\n    }\n    .popup-left img {\n      width: 100%;\n      height: 100%;\n      max-width: 350px;\n      object-fit: cover;\n      display: block;\n    }\n    .popup-right h3 {\n      font-size: 18px;\n      color: #D2B27A;\n      letter-spacing: 1px;\n      margin-bottom: 5px;\n      font-weight: 600;\n    }\n    .popup-right h1 {\n      font-size: 46px;\n      color: #D2B27A;\n      font-weight: 800;\n      margin-bottom: 30px;\n      line-height: 1;\n    }\n    .popup-right input {\n      width: 100%;\n      max-width: 300px;\n      padding: 12px 14px;\n      margin-bottom: 12px;\n      background: transparent;\n      border: 1.5px solid;\n      border-radius: 6px;\n      color: #fff;\n      font-size: 14px;\n      font-family: Poppins, sans-serif;\n      box-sizing: border-box;\n    }\n    .popup-right input::placeholder {\n      color: rgba(255,255,255,0.7);\n    }\n    .popup-right button {\n      width: 100%;\n      max-width: 300px;\n      padding: 12px 14px;\n      color: #000000;\n      font-size: 14px;\n      font-weight: 600;\n      border: none;\n      border-radius: 6px;\n      cursor: pointer;\n      font-family: Poppins, sans-serif;\n    }\n    @media (max-width: 768px) {\n      .popup-wrapper {\n        flex-direction: column !important;\n        margin: 20px 10px !important;\n        max-width: 100% !important;\n      }\n      .popup-left, .popup-right {\n        width: 100% !important;\n        height: auto !important;\n        flex: 0 0 auto !important;\n      }\n      .popup-left {\n        min-height: 300px !important;\n        padding: 20px !important;\n      }\n      .popup-right {\n        padding: 40px 25px !important;\n        text-align: center !important;\n        align-items: center !important;\n      }\n      .popup-right input, .popup-right button {\n        width: 100% !important;\n        max-width: 100% !important;\n      }\n      .close-btn  {\n      position: absolute !important;\n      top: 0px !important;\n      right: 0px !important; left: auto !important;\n      \n      font-size: 24px !important; font-weight: bold !important;\n      font-weight: bold !important;\n      cursor: pointer !important;\n      border: none !important;\n      z-index: 9999 !important;\n    }\n      .popup-left img {\n        width: 100% !important;\n        height: auto !important;\n        max-width: 250px !important;\n        object-fit: contain !important;\n      }\n      .popup-right h1 {\n        font-size: 24px !important; font-weight: bold !important;\n        margin-bottom: 25px !important;\n      }\n      .popup-right h3 {\n        font-size: 24px !important; font-weight: bold !important;\n      }\n    }\n    @media (max-width: 480px) {\n      .popup-right {\n        padding: 30px 20px !important;\n      }\n      .popup-right h1 {\n        font-size: 24px !important; font-weight: bold !important;\n      }\n      .popup-right h3 {\n        font-size: 24px !important; font-weight: bold !important;\n      }\n    }\n  </style>\n\n  <div class='popup-wrapper' data-gjs-type='column'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Left Image Section -->\n    <div class='popup-left' data-gjs-type='column'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/BlackFridaySale.webp' alt='Black Friday Sale'>\n    </div>\n\n    <!-- Right Side (Form Section) -->\n    <form method='post' class='popup-right' data-gjs-type='column'>\n      <h3>SIGN UP FOR</h3>\n      <h1>50% OFF</h1>\n\n      <input type='text' name='name' placeholder='Name' required style='border-color: #D2B27A; width:240px;'>\n      <input type='email' name='email' placeholder='Email' required style='border-color: #D2B27A; width:240px;'>\n\n      <button type='submit' style='background-color: #D2B27A;width:240px;'>SIGN UP</button>\n    </form>\n\n  </div>\n  </body>"
            }
          ]
        }
      ],
      "type": [
        "Black Friday"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-33",
      "category": "Lead Capture",
      "image": "black-friday-preview.webp",
      "pages": [
        {
          "name": "Black Friday Popup",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; font-family:Poppins, sans-serif; min-height:100vh; display:flex; align-items:center; justify-content:center;'>\n  <style>\n    @media (max-width: 600px) {\n      .popup-wrapper {\n        flex-direction: column !important;\n        margin: 20px 10px !important;\n        max-width: 100% !important;\n      }\n      .popup-image, .popup-content {\n        width: 100% !important;\n        height: auto !important;\n      }\n      .popup-image img {\n        width: 100% !important;\n        height: auto !important;\n        max-height: 300px !important;\n        object-fit: cover !important;\n      }\n      .popup-content {\n        padding: 30px 20px !important;\n        text-align: center !important;\n        align-items: center !important;\n      }\n      .popup-content input, .popup-content button {\n        width: 100% !important;\n      }\n      .close-btn  {\n      position: absolute !important;\n      top: 0px !important;\n      right: 0px !important; left: auto !important;\n      \n      font-size: 24px !important; font-weight: bold !important;\n      font-weight: bold !important;\n      cursor: pointer !important;\n      border: none !important;\n      z-index: 9999 !important;\n    }\n    }\n  </style>\n\n  <div class='popup-wrapper' data-gjs-type='column' style='margin:80px auto 40px auto; display:flex; flex-wrap:nowrap; background-color:#2b2b31; border-radius:0px; max-width:720px; width:95%; box-shadow:0 10px 30px rgba(0,0,0,0.3); overflow:hidden; position:relative;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Left Side (Image Column) -->\n    <div class='popup-image' data-gjs-type='column' style='flex:1; min-width:300px; display:flex; justify-content:center; align-items:center; background:#2e2e2e;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/Black_Tag.webp' alt='Black Friday Sale' style='width:100%; height:100%; object-fit:cover; display:block;' onerror=\"this.style.display='none';\">\n    </div>\n\n    <!-- Right Side (Signup Form) -->\n    <form method='post' class='popup-content' data-gjs-type='column' style='flex:1; min-width:300px; padding:60px 40px; background:#2b2b31; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; text-align:left;'>\n      <h1 style='font-size:32px; color:#d6b676; font-weight:800; margin-bottom:15px;'>Black Friday Deals!</h1>\n      <p style='font-size:16px; color:#ccc; margin-bottom:30px; line-height:1.6;'>Sign up today and unlock <strong>exclusive early access</strong> to our biggest discounts of the year.</p>\n\n      <input type='text' name='name' placeholder='Your Name' style='width:90%; max-width:340px; padding:14px 16px; margin-bottom:15px; background-color:#ffffff; border:1px solid #ddd; border-radius:6px; color:#000000; font-size:15px;'>\n      <input type='email' name='email' placeholder='Your Email' style='width:90%; max-width:340px; padding:14px 16px; margin-bottom:25px; background-color:#ffffff; border:1px solid #ddd; border-radius:6px; color:#000000; font-size:15px;'>\n      <button type='submit' style='width:100%; max-width:340px; padding:14px 16px; background-color:#e74c3c; color:#ffffff; font-size:15px; font-weight:600; border:1px solid #ddd; border-radius:6px; cursor:pointer;'>GET EARLY ACCESS</button>\n    </form>\n  </div>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Black Friday"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-34",
      "category": "Coupon Discount",
      "image": "BlackPaper.webp",
      "pages": [
        {
          "name": "Black Friday Offer Popup",
          "frames": [
            {
              "component": "<style>\n  @media (max-width: 600px) {\n    .popup-section {\n      flex-direction: column !important;\n      max-width: 100% !important;\n      margin: 20px 10px !important;\n    }\n    .popup-left, .popup-right {\n      width: 100% !important;\n    }\n    .popup-right {\n      padding: 24px 16px !important;\n      text-align: center !important;\n    }\n    .popup-buttons button {\n      width: 100% !important;\n      margin-bottom: 10px !important;\n    }\n  }\n</style>\n\n<div data-gjs-type='column' class='popup-section' style='display:flex; flex-wrap:wrap; max-width:700px; margin:60px auto; overflow:hidden; box-shadow:0 8px 20px rgba(0,0,0,0.15); border-radius:16px; position:relative; z-index:9999; background-color:#fff;'>\n\n  <!-- Left Side Image -->\n  <div data-gjs-type='column' class='popup-left' style='flex:1; background-color:#000; display:flex; align-items:center; justify-content:center;'>\n    <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/Blackpaper.webp' alt='Black Friday Offer' style='width:100%; height:100%; object-fit:cover;' />\n  </div>\n\n  <!-- Right Side Content -->\n  <form data-gjs-type='column' class='popup-right' style='flex:1; background-color:#E63E3A; color:#fff; padding:40px; position:relative; display:flex; flex-direction:column; justify-content:center;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <h3 style='font-family:sans-serif; font-weight:400; font-size:18px; margin-bottom:8px;'>Wait! Don\u2019t Miss Our</h3>\n    <h2 style='font-size:36px; font-weight:800; margin-bottom:16px; color:#000;'>BLACK FRIDAY DEAL!</h2>\n    <p style='font-size:15px; line-height:1.6; margin-bottom:24px;'>Complete your order now to get <strong>10% OFF</strong> using code <strong>BF10NOW</strong> at checkout!</p>\n\n    <div class='popup-buttons' style='display:flex; flex-direction:column; gap:10px;'>\n      <button style='background-color:#000000; color:#fff; padding:12px 20px; border:1px solid #ddd; font-size:15px; font-weight:bold; border-radius:8px; cursor:pointer;'>Yes, Complete Order!</button>\n      <button style='background-color:#ffd966; color:#000; padding:12px 20px; border:1px solid #ddd; font-size:15px; font-weight:bold; border-radius:8px; cursor:pointer;'>No, Thanks</button>\n    </div>\n\n  </form>\n</div>"
            }
          ]
        }
      ],
      "type": [
        "Black Friday"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-35",
      "category": "Seasonal Offer",
      "image": "HalloweenPopup.webp",
      "pages": [
        {
          "name": "Halloween Offer Popup",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style=\"margin:0; padding:0; font-family:Poppins, sans-serif; background:#fdfcfb;\">\n\n  <style>\n    * { box-sizing: border-box; }\n\n    .popup-wrapper {\n      width: 360px;\n      max-width: 100%;\n      background: #ffffff;\n      border-radius: 20px;\n      overflow: hidden;\n      box-shadow: 0 10px 30px rgba(0,0,0,0.15);\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      text-align: center;\n    }\n\n    .close-btn  {\n      position: absolute !important;\n      top: 0px !important;\n      right: 0px !important; left: auto !important;\n      \n      font-size: 24px !important; font-weight: bold !important;\n      font-weight: bold !important;\n      cursor: pointer !important;\n      border: none !important;\n      z-index: 9999 !important;\n    }\n\n    .popup-image img {\n      width: 100%;\n      height: auto;\n      display: block;\n    }\n\n    .popup-content {\n      padding: 26px 22px 30px;\n    }\n\n    .popup-content h2 {\n      font-size: 24px;\n      font-weight: 700;\n      margin-bottom: 12px;\n      color: #000;\n    }\n\n    .popup-content p {\n      font-size: 13px;\n      color: #333;\n      margin-bottom: 16px;\n      line-height: 1.5;\n    }\n\n    .coupon-code-block {\n      font-size: 18px;\n      font-weight: bold;\n      background: #ffffff;\n      padding: 12px;\n      border: 2px dashed #000000;\n      border-radius: 8px;\n      color: #333;\n      cursor: pointer;\n      text-align: center;\n      margin: 0 auto 18px;\n      width: 240px;\n    }\n\n    .popup-content button {\n      width: 100%;\n      padding: 12px;\n      background: #000;\n      color: #fff;\n      font-weight: bold;\n      border: none;\n      border-radius: 6px;\n      cursor: pointer;\n    }\n  </style>\n\n  <!-- Center Wrapper (same as Christmas template) -->\n  <div data-gjs-type='column' style=\"min-height:100vh; display:flex; justify-content:center; align-items:center;\">\n\n    <div data-gjs-type='column' class='popup-wrapper'>\n      <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n      <div class='popup-image'>\n        <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/Trick-or-Treat.webp' alt='Halloween Pumpkin'>\n      </div>\n\n      <form data-gjs-type='column' class='popup-content'>\n        <h2>TRICK OR TREAT YOURSELF!</h2>\n        <p>Snag spooky savings before midnight \u2014 use the code below for 10% off your order</p>\n\n        <div data-gjs-type='coupon' class='coupon-code-block' data-code='SAVE20'>\n          SAVE20\n        </div>\n\n        <button>GET MY DISCOUNT</button>\n      </form>\n    </div>\n\n  </div>\n\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Seasonal Campaigns"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-36",
      "category": "Lead Capture",
      "image": "WelcomeBlack.webp",
      "pages": [
        {
          "name": "Black Friday Early Access Popup",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; height:100vh; width:100vw; font-family:Poppins, sans-serif; display:flex; justify-content:center; align-items:center;'>\n  <div data-gjs-type='column' style='margin:40px auto; max-width:380px; width:100%; background-color:#0b0b15; border-radius:16px; overflow:hidden; box-shadow:0 8px 25px rgba(0,0,0,0.6); border:1px solid #2a2a35; position:relative;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Top Section (Image) -->\n    <div style='width:100%; background:#0b0b15;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/Welcome-Black.webp' alt='Black Friday Image' style='width:100%; height:auto; display:block;'>\n    </div>\n\n    <!-- Bottom Section (Text + Form + Buttons) -->\n    <form data-gjs-type='column' style='padding:28px 24px; text-align:center;display:flex; flex-direction:column; align-items:center; justify-content:center'>\n      <h1 style='font-size:28px; color:#f6e0b5; font-weight:800; margin:0 0 12px;'>Black Friday Starts NOW!</h1>\n      <p style='font-size:14px; color:#f6e0b5; opacity:0.85; margin:0 0 24px;'>Sign up now and grab exclusive Black Friday<br> deals before everyone else.</p>\n\n      <!-- Email Input -->\n         <input type='email' name='email' placeholder='Email' required style='width:100%; max-width:300px; padding:12px 14px; margin-bottom:12px; border:1px solid #F8DFAE; border-radius:6px; background-color:#0b0b15; color:#ffffff; font-size:14px; flex-direction:column; align-items:center; justify-content:center'>\n        <button type='submit' data-gjs-type='button' style='width:100%; max-width:300px; padding:12px 14px; background-color:#F8DFAE; color:#000000 display:block; margin-left:auto; margin-right:auto;; font-size:14px; font-weight:600; border:1px solid #ddd; border-radius:6px; cursor:pointer;'>UNLOCK EARLY ACCESS</button>\n       <!-- No Thanks Button -->\n      <button type='submit' data-gjs-type='button' style='margin-top:16px; background:none; color:#f6e0b5; font-size:13px; opacity:0.7; text-decoration:none; border:1px solid #ddd; cursor:pointer;'>No, Thanks</button>\n    </form>\n  </div>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Black Friday",
        "Lead Generation"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-37",
      "category": "Seasonal Offers",
      "image": "Orange-Halloween.webp",
      "pages": [
        {
          "name": "Halloween Haunt Popup",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; height:100vh; width:100vw; font-family:Poppins, sans-serif; display:flex; justify-content:center; align-items:center;'>\n  <div data-gjs-type='column' style='margin:40px auto; max-width:380px; width:100%; background-color:#0c0813; overflow:hidden; box-shadow:0 8px 25px rgba(0,0,0,0.6); border:1px solid #2a2a35; position:relative;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Top Section (Text + Form + Buttons) -->\n    <form data-gjs-type='column' method='post' style='padding:28px 24px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center;'>\n      <h1 style='font-size:26px; color:#ff7518; font-weight:800; margin:0; text-transform:uppercase;'>DON'T MISS THE</h1>\n      <h1 style=\"font-family:Arial, sans-serif; font-size:38px; color:#ff7518; margin:8px 0 16px;\">Halloween Haunt</h1>\n      <p style='font-size:14px; color:#ffffff; opacity:0.9; margin:0 0 24px;'>Join the list for exclusive scary-good deals!</p>\n\n      <!-- Email Input -->\n      <input type='email' name='email' placeholder='Enter your email...' required style='width:100%; max-width:300px; padding:12px 14px; margin-bottom:12px; border:1px solid #ff7518; border-radius:4px; background-color:#0c0813; color:#ffffff; font-size:14px; text-align:center;'>\n\n      <!-- Notify Button -->\n      <button type='submit' style='width:100%; max-width:300px; padding:12px 14px; background-color:#ff7518; color:#000000; font-size:15px; font-weight:700; border:1px solid #ddd; border-radius:4px; cursor:pointer;'>Notify Me \ud83d\udd77\ufe0f</button>\n    </form>\n\n    <!-- Bottom Section (Image) -->\n    <div style='width:100%; background:#0c0813;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/Halloween.webp' alt='Halloween Image' style='width:100%; height:auto; display:block;'>\n    </div>\n  </div>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation",
        "Seasonal Campaigns"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-38",
      "category": "Coupon Discount",
      "image": "CyberMonday.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; font-family:Poppins, sans-serif; height:100vh; display:flex; align-items:center; justify-content:center;'>\n  <style>\n    @media (max-width: 600px) {\n      .popup-wrapper {\n        flex-direction: column !important;\n        margin: 20px 10px !important;\n        max-width: 100% !important;\n      }\n      .popup-left, .popup-right {\n        width: 100% !important;\n      }\n      .popup-right {\n        padding: 24px !important;\n        text-align: center !important;\n        align-items: center !important;\n      }\n      .popup-right button {\n        margin: 12px auto !important;\n      }\n    }\n  </style>\n\n  <div data-gjs-type='column' class='popup-wrapper' style='margin:60px auto; display:flex; flex-wrap:wrap; background:#063547; border-radius:20px; max-width:760px; width:95%; box-shadow:0 8px 40px rgba(0,0,0,0.6); overflow:hidden; position:relative;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Left Image Section -->\n    <div data-gjs-type='column' class='popup-left' style='flex:1; min-width:320px; display:flex; justify-content:center; align-items:center; background-color:#101526;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/cybermonday.webp' alt='Cyber Monday Image' style='width:100%; height:100%; object-fit:cover; display:block;'>\n    </div>\n\n    <!-- Right Content Section -->\n    <form data-gjs-type='column' class='popup-right' style='flex:1; min-width:320px; padding:48px; display:flex; flex-direction:column; justify-content:center; text-align:left; color:#ffffff;'>\n      <h2 style='font-size:34px; font-weight:800; margin-bottom:16px; color:#00e0ff; text-transform:uppercase; letter-spacing:1px;'>Cyber Monday</h2>\n      <h3 style='font-size:26px; font-weight:700; margin-bottom:16px; color:#ffffff;'>Up to 70% Off!</h3>\n      <p style='font-size:16px; color:#bfc6d1; margin-bottom:24px; line-height:1.6;'>Exclusive deals on electronics, gadgets, and accessories. Don\u2019t miss out \u2014 offers end soon!</p>\n      <button type='submit' style='width:180px; padding:14px 24px; background-color:#00e0ff; color:#ffffff; font-size:16px; font-weight:bold; border:1px solid #ddd; border-radius:8px; cursor:pointer;'>Shop Now</button>\n    </form>\n\n  </div>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Seasonal Campaigns"
      ],
      "industry": [
        "Electronics",
        "E-commerce"
      ]
    },
    {
      "id": "template-39",
      "category": "Coupon Discount",
      "image": "LapMob.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; font-family:Poppins, sans-serif; min-height:100vh; display:flex; align-items:center; justify-content:center;'>\n  <style>\n    @media (max-width: 600px) {\n      .popup-wrapper {\n        flex-direction: column !important;\n        margin: 20px 10px !important;\n        max-width: 100% !important;\n      }\n      .popup-left,\n      .popup-right {\n        width: 100% !important;\n      }\n      .popup-left {\n        order: -1 !important;\n        min-height: 220px !important;\n      }\n      .popup-right {\n        padding: 24px !important;\n        text-align: center !important;\n        align-items: center !important;\n      }\n      .popup-right button {\n        margin: 14px auto !important;\n        align-self: center !important;\n      }\n      .close-btn  {\n      position: absolute !important;\n      top: 0px !important;\n      right: 0px !important; left: auto !important;\n      \n      font-size: 24px !important; font-weight: bold !important;\n      font-weight: bold !important;\n      cursor: pointer !important;\n      border: none !important;\n      z-index: 9999 !important;\n    }\n    }\n\n    .popup-left {\n      min-height: 320px;\n      display: flex;\n      align-items: stretch;\n      justify-content: center;\n    }\n    .popup-left img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      display: block;\n    }\n  </style>\n\n  <div class='popup-wrapper' data-gjs-type='column' style='margin:80px auto 40px; display:flex; flex-wrap:wrap; background:#0a0a0f; border-radius:20px; max-width:720px; width:95%; box-shadow:0 8px 40px rgba(0,0,0,0.7); overflow:hidden; position:relative;'>\n\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <div class='popup-left' data-gjs-type='column' style='flex:1; min-width:300px; background-color:#0a0a0f;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/Lapheadsetmob.webp' alt='Premium Tech Sale Image'>\n    </div>\n\n    <form class='popup-right' data-gjs-type='column' style='flex:1; min-width:300px; padding:48px; display:flex; flex-direction:column; justify-content:center; color:#ffffff;'>\n      <h2 style='font-size:32px; font-weight:800; color:#00e0ff; text-transform:uppercase; letter-spacing:1px; margin-bottom:10px;'>Premium Tech</h2>\n      <h3 style='font-size:58px; font-weight:900; margin:10px 0; color:#00e0ff;'>70% <span style='font-size:40px; color:#ffffff;'>OFF</span></h3>\n      <h4 style='font-size:16px; font-weight:500; color:#bfc6d1; margin-top:8px; line-height:1.6;'>Free Shipping \u2022 Exclusive Deals \u2022 Premium Products</h4>\n      <button type='submit' style='width:180px; padding:14px 24px; background-color:#00e0ff; color:#ffffff; font-size:16px; font-weight:bold; border:1px solid #ddd; border-radius:8px; cursor:pointer; margin-top:24px;'>View Products</button>\n    </form>\n\n  </div>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Seasonal Campaigns"
      ],
      "industry": [
        "Electronics",
        "E-commerce"
      ]
    },
    {
      "id": "template-40",
      "category": "Coupon Discount",
      "image": "CyberFlash.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; font-family:Poppins, sans-serif; min-height:100vh; display:flex; align-items:center; justify-content:center;'>\n  <style>\n    @media (max-width: 600px) {\n      .popup-wrapper {\n        flex-direction: column !important;\n        margin: 20px 10px !important;\n        max-width: 100% !important;\n      }\n      .popup-left,\n      .popup-right {\n        width: 100% !important;\n      }\n      .popup-left {\n        order: -1 !important;\n        min-height: 220px !important;\n      }\n      .popup-right {\n        padding: 24px !important;\n        text-align: center !important;\n        align-items: center !important;\n      }\n      .popup-right button {\n        margin: 14px auto !important;\n        align-self: center !important;\n      }\n      .close-btn  {\n      position: absolute !important;\n      top: 0px !important;\n      right: 0px !important; left: auto !important;\n      \n      font-size: 24px !important; font-weight: bold !important;\n      font-weight: bold !important;\n      cursor: pointer !important;\n      border: none !important;\n      z-index: 9999 !important;\n    }\n    }\n\n    .popup-left {\n      min-height: 320px;\n      display: flex;\n      align-items: stretch;\n      justify-content: center;\n    }\n    .popup-left img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      display: block;\n    }\n  </style>\n\n  <div class='popup-wrapper' data-gjs-type='column' style='margin:80px auto 40px; display:flex; flex-wrap:wrap; background:#0a0a0f; border-radius:20px; max-width:700px; width:95%; box-shadow:0 8px 40px rgba(0,0,0,0.7); overflow:hidden; position:relative;'>\n\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <div class='popup-left' data-gjs-type='column' style='flex:1; min-width:300px; background-color:#0a0a0f;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/CyberShock.webp' alt='Cyber Flash Sale Image'>\n    </div>\n\n    <form class='popup-right' data-gjs-type='column' style='flex:1; min-width:300px; padding:48px; display:flex; flex-direction:column; justify-content:center; align-items:center; color:#ffffff; text-align:center;'>\n      <h2 style='font-size:20px; font-weight:800; color:#ffffff; text-transform:uppercase; letter-spacing:1px; margin-bottom:10px;'>Cyber Monday</h2>\n      <h3 style='font-size:30px; font-weight:900; margin:10px 0; color:#ffff00; transform:skew(-10deg); display:inline-block;'>FURY</h3>\n      <h3 style='font-size:42px; font-weight:bold; margin:10px 0; color:#ffff00;'>Flash Sale</h3>\n      <h4 style='font-size:16px; font-weight:500; color:#ffff00; margin-top:8px; line-height:1.6;'>Limited Stock</h4>\n      <div style='font-size:24px; color:#ffff00; margin:10px 0;'>* * *</div>\n      <button type='submit' style='width:180px; padding:14px 24px; background-color:#ffff00; color:#000000; font-size:16px; font-weight:bold; border:1px solid #ddd; border-radius:8px; cursor:pointer; margin-top:24px;'>Grab Deals</button>\n    </form>\n\n  </div>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Seasonal Campaigns"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-41",
      "category": "Coupon Discount",
      "image": "Extra15.webp",
      "pages": [
        {
          "name": "Cyber Monday Extra 15% Off Popup",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; font-family:Poppins, sans-serif; min-height:100vh; display:flex; align-items:center; justify-content:center;'>\n  <style>\n    @media (max-width: 600px) {\n      .popup-wrapper {\n        flex-direction: column !important;\n        max-width: 95% !important;\n        margin: 20px auto !important;\n      }\n      .popup-left, .popup-right {\n        width: 100% !important;\n      }\n      .popup-content {\n        text-align: center !important;\n        padding: 30px 20px !important;\n      }\n      .popup-content h1 {\n        font-size: 24px !important; font-weight: bold !important;\n      }\n      .popup-content p {\n        font-size: 24px !important; font-weight: bold !important;\n      }\n      .close-btn  {\n      position: absolute !important;\n      top: 0px !important;\n      right: 0px !important; left: auto !important;\n      \n      font-size: 24px !important; font-weight: bold !important;\n      font-weight: bold !important;\n      cursor: pointer !important;\n      border: none !important;\n      z-index: 9999 !important;\n    }\n    }\n  </style>\n\n  <div class='popup-wrapper' data-gjs-type='column' style='display:flex; flex-wrap:wrap; background-color:#0d001f; border-radius:20px; max-width:700px; width:95%; overflow:hidden; position:relative; margin:100px auto 40px auto;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Left Section (Image) -->\n    <div class='popup-left' data-gjs-type='column' style='flex:1; display:flex; justify-content:center; align-items:center; background-color:#100024;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/Extra-15.webp' alt='Cyber Discount Offer' style='width:100%; height:auto; object-fit:cover; display:block;'>\n    </div>\n\n    <!-- Right Section -->\n    <form class='popup-right' data-gjs-type='column' style='flex:1; background-color:#090014; display:flex; flex-direction:column; justify-content:center; padding:50px 40px; color:#ffffff;'>\n      <h2 style='font-size:36px; font-weight:700; margin:0 0 10px 0;'>WAIT!</h2>\n      <h1 style='font-size:40px; font-weight:800; margin:0 0 10px 0;'>WAIT <span style='color:#ffcc00; font-style:italic;'>DON'T</span> MISS OUT</h1>\n      <p style='font-size:16px; color:#ccc; margin:10px 0 20px 0;'>Your learnisp off use code: <span style='color:#ff4dff; font-weight:bold;'>CYBER15</span> at checkout.</p>\n      <button type='submit' style='background-color:#cc33ff; color:#fff; padding:14px 28px; border:1px solid #ddd; border-radius:8px; font-size:16px; font-weight:bold; cursor:pointer; box-shadow:0 0 10px rgba(255,0,255,0.4);'>CLAIM DISCOUNT</button>\n    </form>\n\n  </div>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Seasonal Campaigns"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-42",
      "category": "Lead Capture",
      "image": "DigitalExp.webp",
      "pages": [
        {
          "name": "CyberTech Full Image Popup",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; font-family:Poppins, sans-serif; min-height:100vh; display:flex; align-items:center; justify-content:center;'>\n\n  <div class='popup-wrapper' style='position:relative; display:flex; flex-direction:row; background:#0b0120; border-radius:20px; overflow:hidden; max-width:640px; width:90%; box-shadow:0px 0px 40px rgba(0,0,0,0.45); margin:80px auto;'>\n\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <div class='popup-left' style='flex:1; position:relative; overflow:hidden;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/popup-email-capture.webp' alt='Tech Illustration' style='width:100%; height:100%; object-fit:cover; object-position:center; display:block;' />\n    </div>\n\n    <form data-gjs-type='column' class='popup-right' style='flex:1; background:#150033; padding:48px 36px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; text-align:left;'>\n\n      <h1 style='color:#ffffff; font-size:19px; margin-bottom:10px; line-height:40px; font-weight:600;'>\n        Level Up Your Digital Experience\n      </h1>\n\n      <p style='color:#c7c7c7; font-size:15px; margin-bottom:20px; line-height:24px; max-width:360px;'>\n        Join the future of mobile innovation. Subscribe to our exclusive updates and insights.\n      </p>\n\n      <input type='email' placeholder='Enter your email address' style='width:100%; max-width:340px; padding:14px 16px; border:1px solid #ddd; border-radius:8px; outline:none; background-color:#240060; color:#ffffff; font-size:15px; margin-bottom:14px;' />\n\n      <button type='submit' style='width:100%; max-width:340px; padding:14px 16px; background-color:#a94fff; border:1px solid #ddd; border-radius:8px; color:#ffffff; font-weight:600; font-size:16px; cursor:pointer;'>\n        Subscribe Now\n      </button>\n\n      <small style='color:#888888; margin-top:14px; font-size:13px; max-width:340px; line-height:19px;'>\n        We respect your privacy. You can unsubscribe anytime \u2014 no spam guaranteed.\n      </small>\n\n    </form>\n\n  </div>\n\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Seasonal Campaigns"
      ],
      "industry": [
        "Electronics",
        "E-commerce"
      ]
    },
    {
      "id": "template-43",
      "category": "Cart Abandonment",
      "image": "ChristmasCart.webp",
      "pages": [
        {
          "name": "Christmas Cart Reminder Popup",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; font-family:Poppins, sans-serif;'>\n\n  <!-- Overlay -->\n  <div style='position:fixed; inset:0; display:flex; justify-content:center; align-items:center; overflow:hidden;'>\n\n    <!-- Popup Container -->\n    <form data-gjs-type='column' style='max-width:520px; width:90%; max-height:90vh; overflow:auto; background-color:#fbf9f1; border-radius:22px; box-shadow:0 25px 60px rgba(0,0,0,0.25); padding:42px 36px 28px; position:relative; text-align:center;'>\n\n      <!-- Close Button -->\n      <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n      <!-- Heading -->\n      <h2 style='font-size:42px; font-weight:800; color:#9b1c1c; margin:0 0 6px;'>Don\u2019t Miss</h2>\n      <h1 style='font-size:40px; font-weight:700; font-family:Georgia, serif; color:#000; margin:0 0 16px;'>Your Christmas Treat</h1>\n\n      <!-- Subtext -->\n      <p style='font-size:17px; color:#333; margin:0 0 28px;'>Items in your cart may sell out soon.<br>Checkout now.</p>\n\n      <!-- Primary CTA -->\n      <button data-gjs-type='button' style='background-color:#9b1c1c; color:#ffffff; padding:16px 28px; font-size:18px; font-weight:600; border:1px solid #ddd; border-radius:6px; cursor:pointer; margin-bottom:14px; width:100%;'>Complete My Order</button>\n\n      <!-- Secondary CTA -->\n      <button data-gjs-type='button' style='background:none; border:1px solid #ddd; color:#333; font-size:15px; cursor:pointer; text-decoration:underline; display:block; margin:0 auto;'>I\u2019ll Do It Later</button>\n\n      <!-- Bottom Illustration -->\n      <img data-gjs-type='image' src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/sleigh.webp' alt='Christmas Cart Illustration' style='width:100%; height:auto; margin-top:32px; display:block; max-height:220px; object-fit:contain;'>\n\n    </form>\n\n  </div>\n\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Cart Recovery",
        "Seasonal Campaigns"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-44",
      "category": "Coupon Discount",
      "image": "MerryChristmasSale.webp",
      "pages": [
        {
          "name": "Christmas Festive Sale Popup",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; font-family:Poppins, sans-serif;'>\n\n  <!-- Center Wrapper -->\n  <div data-gjs-type='column' style='min-height:100vh; display:flex; justify-content:center; align-items:center;'>\n\n    <!-- Popup Container -->\n    <div data-gjs-type='column' style='max-width:370px; width:100%; background-color:#F1F2F1; box-shadow:0 25px 60px rgba(0,0,0,0.25); position:relative; overflow:hidden; text-align:center;'>\n\n      <!-- Close Button -->\n      <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n      <!-- TOP IMAGE SECTION -->\n      <img data-gjs-type='image' src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/christmas-top.webp' alt='Christmas Decoration Top' style='width:100%; height:auto; display:block;'>\n\n      <!-- CENTER CONTENT COLUMN -->\n      <form data-gjs-type='column' style='padding:36px 32px 40px;background-color:#F1F2F1;'>\n\n        <h2 style='font-size:18px; letter-spacing:2px; color:#9b1c1c; margin:0 0 6px;'>MERRY</h2>\n        <h1 style='font-size:44px; font-weight:700; color:#9b1c1c; margin:0 0 18px;'>Christmas</h1>\n\n        <p style='font-size:22px; font-family:Georgia, serif; color:#000; margin:0 0 10px;'>Festive Sale</p>\n\n        <p style='font-size:38px; font-weight:800; color:#c7a15a; margin:0 0 14px;'>UP TO 30% OFF</p>\n\n        <p style='font-size:16px; font-weight:600; color:#000; margin:0 0 28px;'>LIMITED TIME OFFER</p>\n\n        <button data-gjs-type='button' style='background-color:#9b1c1c; color:#ffffff; padding:14px 32px; font-size:18px; font-weight:600; border:1px solid #ddd; border-radius:6px; cursor:pointer;'>SHOP NOW</button>\n\n      </form>\n\n      <!-- BOTTOM IMAGE SECTION -->\n      <img data-gjs-type='image' src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/christmas-bottom.webp' alt='Christmas Snowflakes Bottom' style='width:100%; height:auto; display:block;'>\n\n    </div>\n  </div>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Seasonal Campaigns"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-45",
      "category": "Lead Capture",
      "image": "MerryChristmasRibbon.webp",
      "pages": [
        {
          "name": "Christmas Festive Sale Popup",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; font-family:Poppins, sans-serif;'>\n\n  <!-- Center Wrapper -->\n  <div style='min-height:100vh; display:flex; justify-content:center; align-items:center;'>\n\n    <!-- Popup Container -->\n    <div data-gjs-type='column' style='max-width:350px; width:100%; background-color:#6B111B; box-shadow:0 25px 60px rgba(0,0,0,0.25); position:relative; overflow:hidden; text-align:center;'>\n\n      <!-- Close Button -->\n      <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:24px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:40px !important; height:40px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n      <!-- TOP IMAGE SECTION -->\n      <img data-gjs-type='image' src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/Merry-christmas-ball.webp' alt='Christmas Decoration Top' style='width:100%; height:auto; display:block;'>\n\n      <!-- CENTER CONTENT COLUMN (UPDATED) -->\n      <form data-gjs-type='column' style='padding:34px 28px 36px;background-color:#6B111B;'>\n\n        <p style='font-size:18px; color:#ffffff; margin:0 0 8px;'>Get Exclusive Christmas Deals</p>\n        <p style='font-size:14px; color:#ffffff; margin:0 0 22px;'>Sign up to receive special holiday offers,<br>discounts, and updates.</p>\n\n        <input type='email' placeholder='Enter your email address' style='width:100%; text-align:center; padding:12px 14px; margin-bottom:14px; border:2px solid #c7a15a; border-radius:4px; font-size:14px;'>\n\n        <button data-gjs-type='button' style='width:100%; background-color:#c7a15a; color:#ffffff; padding:14px; font-size:16px; font-weight:600; border:1px solid #ddd; border-radius:4px; cursor:pointer;'>SUBSCRIBE NOW</button>\n\n        <p style='font-size:12px; color:#ffffff; margin-top:16px;'>No spam. Unsubscribe anytime.</p>\n\n      </form>\n\n      <!-- BOTTOM IMAGE SECTION -->\n      <img data-gjs-type='image' src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/Christmas-ribbon.webp' alt='Christmas Snowflakes Bottom' style='width:100%; height:auto; display:block;'>\n\n    </div>\n  </div>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation",
        "Newsletter Signup",
        "Seasonal Campaigns"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-46",
      "category": "Floating Bar",
      "image": "ChristmasFloating.webp",
      "pages": [
        {
          "name": "Christmas Floating Bar - Horizontal Compact",
          "frames": [
            {
              "component": "<div class='christmas-floating-bar' data-gjs-type='column' style='width:100%; font-family:sans-serif;'>\n\n  <style>\n    @media (max-width: 768px) {\n      .floating-bar-inner {\n        flex-direction: column !important;\n        height: auto !important;\n        padding: 10px 0 !important;\n      }\n      .floating-bar-inner > div {\n        width: 100% !important;\n        justify-content: center !important;\n      }\n      .close-btn  {\n      position: absolute !important;\n      top: 0px !important;\n      right: 0px !important; left: auto !important;\n      \n      font-size: 18px !important; font-weight: bold !important;\n      font-weight: bold !important;\n      cursor: pointer !important;\n      border: none !important;\n      z-index: 9999 !important;\n      width: 30px !important;\n      height: 30px !important;\n      display: flex !important;\n      align-items: center !important;\n      justify-content: center !important;\n      border-radius: 50% !important;\n    }\n      .side-image {\n        display: none !important;\n      }\n    }\n  </style>\n\n  <!-- Floating Bar Container -->\n  <div data-gjs-type='column' class='floating-bar-inner' style='position:fixed; top:0; left:0; width:100%; height:90px; display:flex; flex-direction:row; background-color:#e6f6ff; z-index:999; box-sizing:border-box; border:1px solid #ddd; overflow:hidden;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:18px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:30px !important; height:30px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Left Side Image -->\n    <div data-gjs-type='column' class='side-image' style='flex:0 0 120px; display:flex; align-items:center; justify-content:center; height:100%;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/LeftsideImage.webp' alt='Left Decor' style='height:100%; max-height:100%; width:auto; object-fit:contain; display:block;'>\n    </div>\n\n    <!-- Center Content -->\n    <form data-gjs-type='column' class='floating-bar-content' style='flex:1 1 auto; display:flex; flex-direction:row; justify-content:center; align-items:center; text-align:center; padding:0 10px; background-color:#e6f6ff;color:#001F54; gap:12px;'>\n      <div data-gjs-type='text' style='font-size:18px; font-weight:bold; font-family:Arial, sans-serif; color:#d62828;'>CHRISTMAS SALE :</div>\n      <div data-gjs-type='text' style='font-size:16px; font-weight:bold; font-family:Arial, sans-serif;'>Enjoy Up to 50% OFF</div>\n     <button style='padding:8px 20px; background-color:#d62828; color:white; border:1px solid #ddd; border-radius:30px; font-size:13px; font-weight:bold; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,0.2);'>GRAB THE DEAL</button>    </form>\n\n    <!-- Right Side Image -->\n    <div data-gjs-type='column' class='side-image' style='flex:0 0 120px; display:flex; align-items:center; justify-content:center; height:100%;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/Rightsideimage.webp' alt='Right Decor' style='height:100%; max-height:100%; width:auto; object-fit:contain; display:block;'>\n    </div>\n\n  </div>\n\n</div>"
            }
          ]
        }
      ],
      "type": [
        "Seasonal Campaigns"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-47",
      "category": "Floating Bar",
      "image": "Halloween.webp",
      "pages": [
        {
          "name": "Halloween Floating Bar (Compact)",
          "frames": [
            {
              "component": "<div class='halloween-floating-bar' data-gjs-type='column' style='width:100%; font-family:sans-serif;'>\n\n  <style>\n    @media (max-width: 768px) {\n      .floating-bar-inner {\n        flex-direction: column !important;\n        height: auto !important;\n        padding: 10px 0 !important;\n      }\n      .floating-bar-inner > div {\n        width: 100% !important;\n        justify-content: center !important;\n      }\n      .side-image {\n        display: none !important;\n      }\n      .halloween-content {\n        flex-direction: column !important;\n        gap: 8px !important;\n        padding: 8px 12px !important;\n      }\n      .halloween-content div,\n      .halloween-content button {\n        font-size: 18px !important; font-weight: bold !important;\n      }\n      .close-btn  {\n      position: absolute !important;\n      top: 0px !important;\n      right: 0px !important; left: auto !important;\n      \n      font-size: 18px !important; font-weight: bold !important;\n      font-weight: bold !important;\n      cursor: pointer !important;\n      border: none !important;\n      z-index: 9999 !important;\n      width: 30px !important;\n      height: 30px !important;\n      display: flex !important;\n      align-items: center !important;\n      justify-content: center !important;\n      border-radius: 50% !important;\n    }\n    }\n  </style>\n\n  <!-- Floating Bar Container -->\n  <div data-gjs-type='column' data-gjs-name='Floating Bar' class='floating-bar-inner' style='position:fixed; top:0; left:0; width:100%; height:90px; display:flex; flex-direction:row; background-color:#1e1032; z-index:999; box-sizing:border-box; border:1px solid #ddd; overflow:hidden;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:18px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:30px !important; height:30px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Left Side Image -->\n    <div data-gjs-type='column' class='side-image' style='flex:0 0 120px; display:flex; align-items:center; justify-content:center; height:100%;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/HallowLeft.webp' alt='Pumpkin' style='height:100%; max-height:100%; width:auto; object-fit:contain; display:block;'>\n    </div>\n\n    <!-- Center Content -->\n    <form class='halloween-content' data-gjs-type='column' style='flex:1 1 auto; display:flex; flex-direction:row; justify-content:center; align-items:center; text-align:center; background-color:#1e1032; padding:0 10px; color:#ffffff; gap:12px;'>\n      <div data-gjs-type='text' style='font-size:18px; font-weight:bold; font-family:Arial, sans-serif; color:#fbc531;'>HALLOWEEN DEALS !</div>\n      <div data-gjs-type='text' style='font-size:16px; font-weight:bold; font-family:Arial, sans-serif;'>: Grab 50% OFF Today</div>\n    <button style='padding:8px 20px; background-color:#fbc531; color:black; border:1px solid #ddd; border-radius:30px; font-size:13px; font-weight:bold; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,0.2);'>SHOP NOW</button>    </form>\n\n    <!-- Right Side Image -->\n    <div data-gjs-type='column' class='side-image' style='flex:0 0 120px; display:flex; align-items:center; justify-content:center; height:100%;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/HallowRight.webp' alt='Ghost' style='height:100%; max-height:100%; width:auto; object-fit:contain; display:block;'>\n    </div>\n\n  </div>\n\n</div>"
            }
          ]
        }
      ],
      "type": [
        "Seasonal Campaigns"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-48",
      "category": "Floating Bar",
      "image": "LeafFloating.webp",
      "pages": [
        {
          "name": "One-Day Sale Floating Bar with Timer",
          "frames": [
            {
              "component": "<div class='sale-floating-bar' data-gjs-type='column' style='width:100%; font-family:sans-serif;'>\n  <style>\n    @media (max-width: 768px) {\n      .floating-bar-inner {\n        flex-direction: column !important;\n        height: auto !important;\n        padding: 16px 12px !important;\n        align-items: center !important;\n        gap: 12px !important;\n      }\n      .side-image {\n        display: none !important;\n      }\n      .close-btn  {\n      position: absolute !important;\n      top: 0px !important;\n      right: 0px !important; left: auto !important;\n      \n      font-size: 18px !important; font-weight: bold !important;\n      font-weight: bold !important;\n      cursor: pointer !important;\n      border: none !important;\n      z-index: 9999 !important;\n      width: 30px !important;\n      height: 30px !important;\n      display: flex !important;\n      align-items: center !important;\n      justify-content: center !important;\n      border-radius: 50% !important;\n    }\n      .floating-bar-content {\n        flex-direction: column !important;\n        align-items: center !important;\n        text-align: center !important;\n        gap: 10px !important;\n        width: 100% !important;\n      }\n      .floating-bar-text {\n        order: 1;\n      }\n      .floating-bar-timer {\n        order: 2;\n      }\n      .floating-bar-button {\n        order: 3;\n      }\n    }\n  </style>\n\n  <div data-gjs-type='column' data-gjs-name='Floating Bar' class='floating-bar-inner' style='position:fixed; top:0; left:0; width:100%; height:90px; display:flex; flex-direction:row; background-color:#b4cc8c; z-index:999; box-sizing:border-box; border:1px solid #ddd; overflow:hidden;'>\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:18px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:30px !important; height:30px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <div data-gjs-type='column' class='side-image' style='flex:0 0 120px; display:flex; align-items:center; justify-content:center; height:100%;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/LeftLeaf.webp' alt='Leaf Left' style='height:100%; max-height:100%; width:auto; object-fit:contain; display:block;'>\n    </div>\n\n    <form class='floating-bar-content' data-gjs-type='column' style='flex:1 1 auto; display:flex; flex-direction:row; justify-content:center; align-items:center; text-align:center; padding:0 10px; background-color:#b4cc8c; color:#184d00; gap:12px;'>\n      <div class='floating-bar-text' style='display:flex; flex-direction:column; align-items:center;'>\n        <div data-gjs-type='text' style='font-size:18px; font-weight:bold;'>One-Day Sale:</div>\n        <div data-gjs-type='text' style='font-size:16px; font-weight:500;'>25% OFF Sitewide</div>\n      </div>\n\n      <div class='floating-bar-timer countdown-block' data-gjs-type='countdown' style='display:flex; gap:6px; font-family:inherit; font-weight:bold;margin-top:12px;'>\n        <!-- Countdown will be inserted here -->\n      </div>\n\n     <button class='floating-bar-button' style='padding:10px 20px; background-color:#184d00; color:white; border:1px solid #ddd; border-radius:6px; font-size:14px; font-weight:bold; cursor:pointer;'>GRAB THE DEAL</button>    </form>\n\n    <div data-gjs-type='column' class='side-image' style='flex:0 0 120px; display:flex; align-items:center; justify-content:center; height:100%;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/RightLeaf.webp' alt='Leaf Right' style='height:100%; max-height:100%; width:auto; object-fit:contain; display:block;'>\n    </div>\n  </div>\n\n</div>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-49",
      "category": "Floating Bar",
      "image": "BlackFridayFloating.webp",
      "pages": [
        {
          "name": "Black Friday Floating Bar (Horizontal Aligned Text)",
          "frames": [
            {
              "component": "<div class='black-friday-bar' data-gjs-type='column' style='width:100%; font-family:sans-serif;'>\n  <style>\n    @media (max-width: 768px) {\n      .floating-bar-inner {\n        flex-direction: column !important;\n        height: auto !important;\n        padding: 16px 12px !important;\n        align-items: center !important;\n        gap: 10px !important;\n      }\n      .side-image {\n        display: none !important;\n      }\n      .floating-bar-content {\n        flex-direction: column !important;\n        align-items: center !important;\n        text-align: center !important;\n        gap: 10px !important;\n      }\n      .close-btn  {\n      position: absolute !important;\n      top: 0px !important;\n      right: 0px !important; left: auto !important;\n      \n      font-size: 18px !important; font-weight: bold !important;\n      font-weight: bold !important;\n      cursor: pointer !important;\n      border: none !important;\n      z-index: 9999 !important;\n      width: 30px !important;\n      height: 30px !important;\n      display: flex !important;\n      align-items: center !important;\n      justify-content: center !important;\n      border-radius: 50% !important;\n    }\n    }\n  </style>\n\n  <!-- Floating Bar Container -->\n  <div data-gjs-type='column' data-gjs-name='Floating Bar' class='floating-bar-inner' style='position:fixed; top:0; left:0; width:100%; height:90px; display:flex; flex-direction:row; background-color:#000000; z-index:999; box-sizing:border-box; border:5px solid #000000; overflow:hidden;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:18px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:30px !important; height:30px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Left Sale Tag Image -->\n    <div data-gjs-type='column' class='side-image' style='flex:0 0 90px; display:flex; align-items:center; justify-content:center; height:100%;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/BlackTag.webp' alt='Sale Tag' style='height:100%; max-height:100%; width:auto; object-fit:contain; display:block;'>\n    </div>\n\n    <!-- Center Content -->\n    <form class='floating-bar-content' data-gjs-type='column' style='flex:1 1 auto; display:flex; flex-direction:row; justify-content:center; align-items:center; text-align:left; background-color:#000000; padding:0 20px; gap:20px; color:#ffffff;'>\n      <div style='font-size:18px; font-weight:bold;'>Black Friday, Bold Savings</div>\n      <div style='font-size:16px; font-weight:500;'>Get up to 50% off on select items</div>\n      <button style='padding:8px 20px; background-color:#ffffff; color:#000000; border:1px solid #ddd; border-radius:30px; font-size:13px; font-weight:bold; cursor:pointer;'>Shop Now</button>\n    </form>\n\n    <!-- Right Sale Image -->\n    <div data-gjs-type='column' class='side-image' style='flex:0 0 120px; display:flex; align-items:center; justify-content:center; height:100%;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/BlackSaleRight.webp' alt='Black Friday Sale' style='height:100%; max-height:100%; width:auto; object-fit:contain; display:block;'>\n    </div>\n\n  </div>\n</div>"
            }
          ]
        }
      ],
      "type": [
        "Black Friday"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-50",
      "category": "Floating Bar",
      "image": "Sledge.webp",
      "pages": [
        {
          "name": "Christmas Flash Sale Floating Bar (Clean Image Sides)",
          "frames": [
            {
              "component": "<div class='christmas-flash-bar' style='width:100%; font-family:sans-serif;'>\n  <style>\n    @media (max-width: 768px) {\n      .floating-bar-inner {\n        flex-direction: column !important;\n        height: auto !important;\n        padding: 16px 12px !important;\n        align-items: center !important;\n        gap: 12px !important;\n      }\n      .floating-bar-inner > .side-image {\n        display: none !important;\n      }\n      .floating-bar-content {\n        flex-direction: column !important;\n        align-items: center !important;\n        text-align: center !important;\n        gap: 10px !important;\n      }\n      .close-btn  {\n      position: absolute !important;\n      top: 0px !important;\n      right: 0px !important; left: auto !important;\n      \n      font-size: 18px !important; font-weight: bold !important;\n      font-weight: bold !important;\n      cursor: pointer !important;\n      border: none !important;\n      z-index: 9999 !important;\n      width: 30px !important;\n      height: 30px !important;\n      display: flex !important;\n      align-items: center !important;\n      justify-content: center !important;\n      border-radius: 50% !important;\n    }\n    }\n  </style>\n\n  <div data-gjs-type='column' data-gjs-name='Floating Bar' class='floating-bar-inner' style='background-color:#0c2a33;position:fixed; top:0; left:0; width:100%; height:90px; display:flex; z-index:999; box-sizing:border-box; border:5px solid #0c2a33; overflow:hidden;'>\n\n    <!-- Close Button -->\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:8px !important; right:8px !important; left:auto !important; font-size:18px !important; font-weight:bold !important; color:#000000 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:30px !important; height:30px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <!-- Left Santa Image -->\n    <div data-gjs-type='column' class='side-image' style='flex:0 0 180px; display:flex; align-items:center; justify-content:center; height:100%;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/SantaSleigh.png' alt='Santa Sleigh' style='height:100%; max-height:100%; width:auto; object-fit:contain; display:block;'>\n    </div>\n\n    <!-- Center Content -->\n    <form class='floating-bar-content' data-gjs-type='column' style='flex:1 1 auto; display:flex; flex-direction:row; justify-content:center; align-items:center; gap:20px; padding:0 20px; color:#ffffff;background-color:#0c2a33;'>\n      <div style='display:flex; flex-direction:column;'>\n        <div style='font-size:20px; font-weight:bold; color:#f7c873;'>Christmas Flash Sale!</div>\n        <div style='font-size:14px; font-weight:500;'>Limited Time Only! Don\u2019t Miss Out!</div>\n      </div>\n      <div style='font-size:24px; font-weight:bold; color:white;'>Enjoy 30%<span style='font-size:16px;'> OFF</span></div>\n      <button style='padding:10px 24px; background-color:#c62828; color:#ffffff; border:1px solid #ddd; border-radius:12px; font-size:14px; font-weight:bold; cursor:pointer;'>SHOP NOW</button>    </form>\n\n    <!-- Right Tree Image -->\n    <div data-gjs-type='column' class='side-image' style='flex:0 0 180px; display:flex; align-items:center; justify-content:center; height:100%;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/RightTree.webp' alt='Tree' style='height:100%; max-height:100%; width:auto; object-fit:contain; display:block;'>\n    </div>\n  </div>\n</div>"
            }
          ]
        }
      ],
      "type": [
        "Seasonal Campaigns"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-51",
      "category": "Coupon Discount",
      "image": "contact-popup.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "<style>\n  @media (max-width: 600px) {\n    .contact-popup {\n      margin: 20px !important;\n      padding: 20px !important;\n    }\n  }\n</style>\n\n<form method='post' data-gjs-type='column' class='yslg-page yslg-page-0 contact-popup yslg-form' style='position:relative; max-width:400px; width:90%; margin:80px auto; background:#f5f3f1; border-radius:12px; padding:30px; box-shadow:0 10px 25px rgba(0,0,0,0.15); font-family:serif; display:flex; flex-direction:column; align-items:center;'>\n\n  <!-- Close Button -->\n  <button class='ysi-close-btn' data-gjs-type='close-button' style='position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%; border:1px solid #ccc; background:#fff; font-size:18px; cursor:pointer;'>&times;</button>\n\n  <!-- Heading -->\n  <h2 style='text-align:center; font-size:28px; margin-bottom:10px;'>Got a question?</h2>\n  <p style='text-align:center; font-size:14px; color:#555; margin-bottom:25px;'>Fill out the form below and we\u2019ll assist you with everything you need</p>\n\n  <!-- Form -->\n\n    <input type='text' data-gjs-type='name-input' placeholder='Enter your name' required style='padding:12px; border-radius:8px; border:1px solid #ccc; font-size:14px; margin-bottom:2px; width:100%; max-width:320px; box-sizing:border-box;' />\n\n    <input type='email' placeholder='Enter your email address' required style='padding:12px; border-radius:8px; border:1px solid #ccc; font-size:14px; margin-bottom:2px; width:100%; max-width:320px; box-sizing:border-box;' />\n\n    <input type='tel' data-gjs-type='phone-input' name='phone' placeholder='Enter your phone number' class='form-control phone-input-field' inputmode='numeric' style='padding:12px; border-radius:8px; border:1px solid #ccc; font-size:14px; margin-bottom:2px; width:100%; max-width:320px; box-sizing:border-box;' />\n\n    <textarea data-gjs-type='message' placeholder='Type your message here' rows='4' style='padding:12px; border-radius:8px; border:1px solid #ccc; font-size:14px; resize:none; margin-bottom:2px; width:100%; max-width:320px; box-sizing:border-box;'></textarea>\n\n    <button type='submit' style='margin-top:10px; padding:14px; background:#8b5a2b; color:#fff; font-weight:bold; border:none; border-radius:8px; cursor:pointer; width:100%; max-width:320px; box-sizing:border-box;'>Submit Request</button>\n\n</form>\n\n<script>\n(function($){\n  $(document).ready(function(){\n    $('.yslg-form').on('submit', function(e){\n      e.preventDefault();\n      var $popup = $(this).closest('.ysleadgen-popup');\n      $popup.find('.yslg-page-0').hide();\n      $popup.find('.yslg-page-1').show();\n    });\n  });\n})(jQuery);\n</script>"
            }
          ]
        },
        {
          "name": "Thank You Page",
          "frames": [
            {
              "component": "<div data-gjs-type='column' class='yslg-page yslg-page-1 contact-popup' style='position:relative; max-width:400px; width:90%; margin:80px auto; background:#f5f3f1; border-radius:12px; padding:30px; box-shadow:0 10px 25px rgba(0,0,0,0.15); text-align:center;'>\n\n  <!-- Close Button -->\n  <button class='ysi-close-btn' data-gjs-type='close-button' style='position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%; border:1px solid #ccc; background:#fff; font-size:18px; cursor:pointer;'>&times;</button>\n\n  <h2 style='font-size:26px; margin-bottom:15px;'>Thank You!</h2>\n  <p style='font-size:14px; color:#555; margin-bottom:20px;'>Your request has been submitted successfully. Our team will get back to you soon.</p>\n\n  <button style='padding:12px 20px; background:#8b5a2b; color:#fff; border:none; border-radius:8px; cursor:pointer;'>Close</button>\n\n</div>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-52",
      "category": "Coupon Discount",
      "image": "get-in-touch.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "<style>\n@media (max-width:768px){\n  .touch-wrapper{\n    flex-direction:column!important;\n    margin:20px 10px!important;\n    width:95%!important;\n  }\n\n  /* IMAGE ON TOP IN MOBILE */\n  .touch-image{\n    order:-1!important;\n    height:220px!important;\n  }\n\n  .touch-content{\n    padding:20px!important;\n  }\n\n  .touch-content input,\n  .touch-content textarea,\n  .touch-content button{\n    width:100%!important;\n    max-width:100%!important;\n  }\n}\n</style>\n\n<!-- MAIN WRAPPER -->\n<div data-gjs-type='column' class='yslg-page yslg-page-0 touch-wrapper' style='margin:60px auto; display:flex; flex-wrap:wrap; max-width:720px; width:92%; border-radius:14px; overflow:hidden; box-shadow:0 10px 25px rgba(0,0,0,0.18); position:relative;'>\n\n  <!-- CLOSE BUTTON -->\n  <button class='ysi-close-btn' data-gjs-type='close-button' style='position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:50%; border:none; background:rgba(255,255,255,0.7); font-size:16px; cursor:pointer; z-index:9;'>&times;</button>\n\n  <!-- IMAGE (LEFT SIDE) -->\n  <div data-gjs-type='column' class='touch-image' style='flex:1; min-width:300px; display:flex; line-height:0;'>\n    <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/woman-tablet.webp' style='width:100%; height:100%; object-fit:cover; display:block;'>\n  </div>\n\n  <!-- FORM (RIGHT SIDE - DROPPABLE) -->\n  <form method='post' data-gjs-type='column' class='yslg-form touch-content' style='flex:1; min-width:300px; background:#ffffff; padding:30px 25px; display:flex; flex-direction:column; justify-content:center;'>\n\n    <h2 style='font-size:24px; font-weight:600; margin-bottom:8px;'>Get In Touch \ud83d\udc4b</h2>\n\n    <p style='font-size:13px; color:#666; margin-bottom:20px;'>We are here to answer your questions</p>\n\n    <input type='text' name='name' placeholder='Name*' required style='padding:12px; border-radius:8px; border:1px solid #ddd; margin-bottom:14px;'>\n\n    <input type='email' name='email' placeholder='Email*' required style='padding:12px; border-radius:8px; border:1px solid #ddd; margin-bottom:14px;'>\n\n    <input type='tel' name='phone' placeholder='Phone Number*' required style='padding:12px; border-radius:8px; border:1px solid #ddd; margin-bottom:14px;'>\n\n    <textarea name='message' placeholder='Message' rows='3' style='padding:12px; border-radius:8px; border:1px solid #ddd; resize:none; margin-bottom:14px;'></textarea>\n\n    <button type='submit' style='margin-top:10px; padding:14px; background:#6D28D9; color:#fff; font-weight:600; border:none; border-radius:8px; font-size:14px; cursor:pointer;'>Submit</button>\n\n    <!-- CENTERED NO THANKS -->\n    <p class='ysi-close-btn' data-gjs-type='close-button' style='font-size:12px; color:#777; margin-top:12px; cursor:pointer; align-self:center; text-align:center;'>No Thanks</p>\n\n  </form>\n\n</div>\n\n<script>\n(function($){\n  $(document).ready(function(){\n    $('.yslg-form').on('submit', function(e){\n      e.preventDefault();\n      var $popup = $(this).closest('.ysleadgen-popup');\n      $popup.find('.yslg-page-0').hide();\n      $popup.find('.yslg-page-1').show();\n    });\n  });\n})(jQuery);\n</script>"
            }
          ]
        },
        {
          "name": "Thank You Page",
          "frames": [
            {
              "component": "<div data-gjs-type='column' class='yslg-page yslg-page-1' style='display:none; margin:40px auto; max-width:400px; width:92%; background:#ffffff; padding:25px; border-radius:14px; text-align:center; box-shadow:0 10px 25px rgba(0,0,0,0.18); position:relative;'>\n\n  <button class='ysi-close-btn' data-gjs-type='close-button' style='position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:50%; border:none; background:#eee; font-size:16px; cursor:pointer;'>&times;</button>\n\n  <h2 style='font-size:22px; margin-bottom:10px;'>Thank You! \ud83c\udf89</h2>\n  <p style='font-size:12px; color:#666; margin-bottom:15px;'>We\u2019ll get back to you shortly.</p>\n\n  <button class='ysi-close-btn' data-gjs-type='close-button' style='padding:10px 16px; background:#6D28D9; color:#fff; border:none; border-radius:8px; font-size:13px; cursor:pointer;'>Close</button>\n\n</div>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-53",
      "category": "Coupon Discount",
      "image": "unlock-deals.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "<style>\n  @media (max-width: 768px) {\n    .deal-popup {\n      padding: 25px 15px !important;\n      width: 92% !important;\n    }\n    .deal-input-group {\n      flex-direction: column !important;\n    }\n    .deal-input-group input,\n    .deal-input-group button {\n      width: 100% !important;\n      border-radius: 8px !important;\n    }\n  }\n</style>\n\n<form method='post' data-gjs-type='column' class='yslg-form yslg-page yslg-page-0 deal-popup' style='position:relative; max-width:750px; width:90%; margin:70px auto; background:#eae6dc; border-radius:10px; padding:50px 40px; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,0.2);'>\n\n  <!-- Close Button -->\n  <button class='ysi-close-btn' data-gjs-type='close-button' style='position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%; border:none; background:transparent; font-size:22px; cursor:pointer;'>&times;</button>\n\n  <!-- Heading -->\n  <h1 style='font-size:38px; font-weight:800; color:#0f1f14; margin-bottom:15px;'>UNLOCK EXCLUSIVE DEALS</h1>\n\n  <!-- Subtext -->\n  <p style='font-size:16px; color:#333; max-width:520px; margin:0 auto 30px;'>What's inside: instant discounts, first-access to sales, flash coupons, and special members-only offers.</p>\n\n  <!-- Input Group -->\n  <div class='deal-input-group' style='display:flex; justify-content:center; align-items:center; max-width:500px; margin:0 auto;'>\n\n    <input type='email' name='email' placeholder='Drop Your Email Here, Please' required style='flex:1; padding:14px; border:1px solid #bbb; border-right:none; font-size:14px; border-radius:6px 0 0 6px; outline:none;'>\n\n    <button type='submit' style='padding:14px 22px; background:#0f1f14; color:#fff; font-weight:700; border:none; border-radius:0 6px 6px 0; cursor:pointer;'>GET OFFER</button>\n\n  </div>\n\n  <!-- Privacy Text -->\n  <p style='font-size:13px; color:#555; margin-top:25px; max-width:550px; margin-left:auto; margin-right:auto;'>By signing up, you agree to receive promotional offers. You can unsubscribe anytime. Read our <u>privacy policy</u>.</p>\n\n</form>\n\n<script>\n(function($){\n  $(document).ready(function(){\n    $('.yslg-form').on('submit', function(e){\n      e.preventDefault();\n      var $popup = $(this).closest('.ysleadgen-popup');\n      $popup.find('.yslg-page-0').hide();\n      $popup.find('.yslg-page-1').show();\n    });\n  });\n})(jQuery);\n</script>"
            }
          ]
        },
        {
          "name": "Thank You Page",
          "frames": [
            {
              "component": "<div data-gjs-type='column' class='yslg-page yslg-page-1 deal-popup' style='position:relative; max-width:500px; width:90%; margin:70px auto; background:#eae6dc; border-radius:10px; padding:40px 30px; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,0.2);'>\n\n  <!-- Close Button -->\n  <button class='ysi-close-btn' data-gjs-type='close-button' style='position:absolute; top:12px; right:12px; font-size:20px; background:none; border:none; cursor:pointer;'>&times;</button>\n\n  <h2 style='font-size:28px; margin-bottom:12px; color:#0f1f14;'>You're In! \ud83c\udf89</h2>\n  <p style='font-size:14px; color:#444; margin-bottom:20px;'>Exclusive deals are on the way to your inbox.</p>\n\n  <button style='padding:12px 20px; background:#0f1f14; color:#fff; border:none; border-radius:6px; cursor:pointer;'>Close</button>\n\n</div>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation",
        "Newsletter Signup"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-54",
      "category": "Coupon Discount",
      "image": "bloom-offer.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "<style>\n  @media (max-width: 768px) {\n    .bloom-popup {\n      padding: 20px 15px !important;\n      width: 90% !important;\n    }\n  }\n</style>\n\n<form method='post' data-gjs-type='column' class='yslg-form yslg-page yslg-page-0 bloom-popup' style='position:relative; max-width:420px; width:90%; margin:50px auto; background:#e6bcbc; border-radius:12px; padding:30px 25px; text-align:center; box-shadow:0 10px 25px rgba(0,0,0,0.2); font-family:serif;'>\n\n  <!-- Close Button -->\n  <button class='ysi-close-btn' data-gjs-type='close-button' style='position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%; border:none; background:#8b5a5a; color:#fff; font-size:16px; cursor:pointer;'>&times;</button>\n\n  <!-- Logo / Title -->\n  <h2 style='font-size:28px; color:#8b3a3a; margin-bottom:10px;'>Bloom</h2>\n\n  <!-- Offer Text -->\n  <p style='font-size:12px; letter-spacing:1px; margin-bottom:6px;'>WE\u2019VE GOT SOMETHING FOR YOU</p>\n\n  <h1 style='font-size:42px; color:#8b3a3a; margin:5px 0;'>25% off</h1>\n\n  <p style='font-size:16px; margin-bottom:5px;'>plus early access to new drops</p>\n  <p style='font-size:12px; font-style:italic; margin-bottom:15px;'>when you join us</p>\n\n  <!-- CTA Text -->\n  <p style='font-size:13px; font-weight:600; letter-spacing:1px; margin-bottom:10px;'>SIGN UP TO UNLOCK YOUR DEAL</p>\n\n  <!-- Email Input -->\n  <input type='email' name='email' placeholder='Enter Your Email Address' required style='width:100%; max-width:260px; padding:10px; border-radius:4px; border:1px solid #333; font-size:13px; background:#f5dede; margin:0 auto 10px auto; display:block;'>\n\n  <!-- Submit Button -->\n  <button type='submit' style='width:100%; max-width:260px; padding:11px; background:#8b3a3a; color:#fff; font-weight:700; border:none; border-radius:4px; font-size:13px; cursor:pointer; margin-bottom:10px;'>GET MY OFFER</button>\n\n  <!-- No Thanks -->\n  <p style='font-size:12px; text-decoration:underline; cursor:pointer;'>NO THANKS</p>\n\n  <!-- Footer Note -->\n  <p style='font-size:11px; margin-top:10px;'>Your info stays safe with us. Opt out anytime.</p>\n\n</form>\n\n<script>\n(function($){\n  $(document).ready(function(){\n    $('.yslg-form').on('submit', function(e){\n      e.preventDefault();\n      var $popup = $(this).closest('.ysleadgen-popup');\n      $popup.find('.yslg-page-0').hide();\n      $popup.find('.yslg-page-1').show();\n    });\n  });\n})(jQuery);\n</script>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-55",
      "category": "Coupon Discount",
      "image": "NeedAssistance.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "<style>\n@media (max-width:600px){\n  .assist-wrapper{\n    flex-direction:column!important;\n    margin:20px 10px!important;\n    width:95%!important;\n  }\n\n  .assist-image{\n    order:-1!important;\n    height:220px!important;\n  }\n\n  .assist-content{\n    padding:20px!important;\n  }\n\n  .assist-content input,\n  .assist-content textarea,\n  .assist-content button{\n    width:100%!important;\n    max-width:100%!important;\n  }\n}\n</style>\n\n<!-- MAIN WRAPPER -->\n<div data-gjs-type='column' class='yslg-page yslg-page-0 assist-wrapper' style='margin:80px auto; display:flex; flex-wrap:wrap; border-radius:12px; max-width:720px; width:95%; box-shadow:0 8px 20px rgba(0,0,0,0.15); overflow:hidden; position:relative;'>\n\n  <!-- CLOSE BUTTON -->\n  <button class='ysi-close-btn' data-gjs-type='close-button' style='position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:50%; border:none; font-size:18px; cursor:pointer; background:#fff; z-index:999;'>&times;</button>\n\n  <!-- FORM COLUMN (DROPPABLE) -->\n  <form method='post' data-gjs-type='column' class='yslg-form assist-content' style='flex:1; min-width:300px; padding:30px; background:#f5f5f5; display:flex; flex-direction:column; justify-content:center;'>\n\n    <h2 style='font-size:26px; color:#2bb3c0; margin-bottom:10px;'>Need Assistance?</h2>\n\n    <p style='font-size:14px; color:#555; margin-bottom:20px;'>Let us know what you're facing and we'll help you resolve it quickly</p>\n\n    <input type='text' name='name' placeholder='Name*' required style='margin-bottom:10px; padding:10px; border-radius:6px; border:1px solid #ccc;'>\n\n    <input type='email' name='email' placeholder='Email*' required style='margin-bottom:10px; padding:10px; border-radius:6px; border:1px solid #ccc;'>\n\n    <input type='tel' name='phone' placeholder='Phone Number*' required style='margin-bottom:10px; padding:10px; border-radius:6px; border:1px solid #ccc;'>\n\n    <textarea name='message' placeholder='Message' style='margin-bottom:12px; padding:10px; border-radius:6px; border:1px solid #ccc; min-height:70px; resize:none;'></textarea>\n\n    <button type='submit' style='padding:12px; background:#2bb3c0; color:#fff; border:none; border-radius:6px; font-weight:bold;'>Get Support</button>\n\n    <!-- CENTERED NO THANKS -->\n    <p style='margin-top:12px; font-size:13px; cursor:pointer; align-self:center; text-align:center;'>No Thanks</p>\n\n  </form>\n\n  <!-- IMAGE COLUMN -->\n  <div data-gjs-type='column' class='assist-image' style='flex:1; min-width:300px; display:flex; align-items:center; justify-content:center; line-height:0;'>\n    <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/assistance.webp' style='width:100%; height:100%; object-fit:cover; display:block;'>\n  </div>\n\n</div>\n\n<script>\n(function($){\n  $(document).ready(function(){\n    $('.yslg-form').on('submit', function(e){\n      e.preventDefault();\n      var $popup = $(this).closest('.ysleadgen-popup');\n      $popup.find('.yslg-page-0').hide();\n      $popup.find('.yslg-page-1').show();\n    });\n  });\n})(jQuery);\n</script>"
            }
          ]
        },
        {
          "name": "Thank You Page",
          "frames": [
            {
              "component": "<div data-gjs-type='column' class='yslg-page yslg-page-1' style='display:none; max-width:500px; width:90%; margin:40px auto; padding:25px; background:#ffffff; border-radius:10px; text-align:center; box-shadow:0 8px 20px rgba(0,0,0,0.15); position:relative;'>\n\n  <button class='close-btn ysi-close-btn' data-gjs-type='close-button' style='position:absolute; top:8px; right:8px; width:30px; height:30px; border-radius:50%; border:none; font-size:18px; cursor:pointer;'>&times;</button>\n\n  <h2 style='font-size:24px; color:#2bb3c0; margin-bottom:10px;'>Thank You!</h2>\n\n  <p style='font-size:14px; color:#555;'>Your request has been submitted successfully. Our support team will contact you shortly.</p>\n\n  <button class='ysi-close-btn' data-gjs-type='close-button' style='margin-top:15px; padding:10px 16px; background:#2bb3c0; color:#fff; border:none; border-radius:6px; cursor:pointer;'>Close</button>\n\n</div>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-56",
      "category": "Coupon Discount",
      "image": "Offer30.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "<style>\n  @media (max-width: 768px) {\n    .offer-container {\n      padding: 20px !important;\n      margin: 40px 10px !important;\n      max-width: 100% !important;\n      width: 90% !important;\n    }\n    .offer-title {\n      font-size: 18px !important;\n    }\n    .offer-big {\n      font-size: 26px !important;\n    }\n  }\n</style>\n\n<form method='post' data-gjs-type='column' class='yslg-form yslg-page yslg-page-0 offer-container' style='max-width:560px; width:90%; margin:40px auto; padding:25px; text-align:center; background:#ffffff; position:relative; border-radius:8px; box-shadow:0 8px 20px rgba(0,0,0,0.15); overflow:hidden;'>\n\n  <!-- Close Button -->\n  <button class='close-btn ysi-close-btn' data-gjs-type='close-button' style='position:absolute; top:8px; right:8px; width:30px; height:30px; border-radius:50%; border:none; font-size:18px; cursor:pointer; background:#ddd;'>&times;</button>\n\n  <!-- Background Image -->\n  <div style='position:absolute; top:0; left:0; width:100%; height:100%; background:url(https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/offer-bg.webp) center/cover no-repeat; opacity:0.8; z-index:0;'></div>\n\n  <!-- Content -->\n  <div style='position:relative; z-index:1;'>\n\n    <p class='offer-title' style='font-size:18px; letter-spacing:1.5px; color:#333; margin-bottom:8px;'>EXCLUSIVE PERKS AWAIT</p>\n\n    <h1 class='offer-big' style='font-size:32px; font-weight:900; color:#111; margin-bottom:10px;'>ENJOY 30% SAVINGS TODAY</h1>\n\n    <p style='font-size:14px; color:#555; margin-bottom:20px;'>Receive early updates on deals, releases, and special moments</p>\n\n    <!-- Email Input -->\n    <input type='email' name='email' placeholder='Enter email address' required style='width:100%; max-width:320px; padding:10px; border:2px dashed #999; border-radius:5px; margin:0 auto 15px auto; text-align:center; font-size:14px; display:block;'>\n\n    <!-- Submit Button -->\n    <button type='submit' style='width:100%; max-width:320px; padding:12px; background:#000; color:#fff; font-size:15px; font-weight:bold; border:none; cursor:pointer;'>GET OFFER</button>\n\n    <!-- No Thanks -->\n    <p style='margin-top:12px; font-size:13px; color:#333; cursor:pointer;'>No Thanks</p>\n\n  </div>\n\n</form>\n\n<script>\n(function($){\n  $(document).ready(function(){\n    $('.yslg-form').on('submit', function(e){\n      e.preventDefault();\n      var $popup = $(this).closest('.ysleadgen-popup');\n      $popup.find('.yslg-page-0').hide();\n      $popup.find('.yslg-page-1').show();\n    });\n  });\n})(jQuery);\n</script>"
            }
          ]
        },
        {
          "name": "Thank You Page",
          "frames": [
            {
              "component": "<div data-gjs-type='column' class='yslg-page yslg-page-1' style='display:none; max-width:420px; margin:50px auto; padding:25px; background:#ffffff; border-radius:8px; text-align:center; box-shadow:0 8px 20px rgba(0,0,0,0.15); position:relative;'>\n\n  <button class='close-btn ysi-close-btn' data-gjs-type='close-button' style='position:absolute; top:6px; right:6px; width:28px; height:28px; border-radius:50%; border:none; font-size:16px; cursor:pointer;'>&times;</button>\n\n  <h2 style='font-size:22px; color:#000; margin-bottom:8px;'>Thank You!</h2>\n  <p style='font-size:13px; color:#555;'>You\u2019ve successfully claimed your offer.</p>\n\n</div>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-57",
      "category": "Coupon Discount",
      "image": "DarkOffer.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "<style>\n  @media (max-width: 768px) {\n    .dark-popup {\n      padding: 28px !important;\n      width: 90% !important;\n    }\n    .dark-title {\n      font-size: 16px !important;\n    }\n    .dark-offer {\n      font-size: 40px !important;\n    }\n  }\n</style>\n\n<form method='post' data-gjs-type='column' class='yslg-form yslg-page yslg-page-0 dark-popup' style='max-width:420px; width:90%; margin:80px auto; padding:50px 25px; background:#000000; color:#ffffff; text-align:center; border-radius:8px; position:relative; box-shadow:0 12px 30px rgba(0,0,0,0.5);'>\n\n  <!-- Close Button -->\n  <button class='close-btn ysi-close-btn' data-gjs-type='close-button' style='position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:50%; border:none; font-size:18px; cursor:pointer; background:transparent; color:#aaa;'>&times;</button>\n\n  <!-- Heading -->\n  <p class='dark-title' style='font-size:16px; letter-spacing:2px; color:#ccc; margin-bottom:15px;'>STEP INTO SAVINGS</p>\n\n  <!-- Big Offer -->\n  <h1 class='dark-offer' style='font-size:56px; font-weight:900; color:#d71920; margin:20px 0;'>25% OFF</h1>\n\n  <!-- Sub Heading -->\n  <div style='display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:30px;'>\n    <span style='width:30px; height:2px; background:#d71920; display:inline-block;'></span>\n    <span style='font-size:15px; letter-spacing:2px; color:#fff;'>STOREWIDE</span>\n    <span style='width:30px; height:2px; background:#d71920; display:inline-block;'></span>\n  </div>\n\n  <p style='font-size:14px; color:#bbb; margin-bottom:35px;'>Fresh deals updated every week</p>\n\n  <!-- Email Input -->\n  <input type='email' name='email' placeholder='Email address' required style='width:100%; max-width:280px; padding:14px; background:#2c2c2c; border:1px solid #555; color:#fff; border-radius:4px; margin:0 auto 20px auto; display:block;'>\n\n  <!-- Submit Button -->\n  <button type='submit' style='width:100%; max-width:280px; padding:16px; background:#d71920; color:#fff; font-size:15px; font-weight:bold; border:none; cursor:pointer;'>GET OFFER</button>\n\n  <!-- No Thanks -->\n  <p style='margin-top:18px; font-size:13px; color:#aaa; cursor:pointer;'>No Thanks</p>\n\n</form>\n\n<script>\n(function($){\n  $(document).ready(function(){\n    $('.yslg-form').on('submit', function(e){\n      e.preventDefault();\n      var $popup = $(this).closest('.ysleadgen-popup');\n      $popup.find('.yslg-page-0').hide();\n      $popup.find('.yslg-page-1').show();\n    });\n  });\n})(jQuery);\n</script>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-58",
      "category": "Coupon Discount",
      "image": "ContactTouch.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "<style>\n@media (max-width:600px){\n  .contact-wrapper{\n    flex-direction:column!important;\n    margin:30px 10px!important;\n  }\n\n  .contact-left{\n    order:-1!important;\n    height:220px!important;\n  }\n\n  .contact-right{\n    padding:20px!important;\n  }\n\n  .contact-right input,\n  .contact-right textarea,\n  .contact-right button{\n    width:100%!important;\n    max-width:100%!important;\n  }\n}\n</style>\n\n<!-- MAIN WRAPPER -->\n<div data-gjs-type='column' class='yslg-page yslg-page-0 contact-wrapper' style='margin:60px auto; display:flex; flex-wrap:wrap; max-width:720px; width:92%; border-radius:12px; overflow:hidden; box-shadow:0 10px 25px rgba(0,0,0,0.18); position:relative;'>\n\n  <!-- CLOSE BUTTON -->\n  <button class='ysi-close-btn' data-gjs-type='close-button' style='position:absolute; top:8px; right:8px; width:30px; height:30px; border-radius:50%; border:none; font-size:18px; cursor:pointer; background:#fff; z-index:10;'>&times;</button>\n\n  <!-- LEFT IMAGE COLUMN -->\n  <div data-gjs-type='column' class='contact-left' style='flex:1; min-width:300px; min-height:350px; display:flex;'>\n    <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/contact-illustration.webp' style='width:100%; height:100%; object-fit:cover; display:block;'>\n  </div>\n\n  <!-- FORM COLUMN (DROPPABLE - SAME AS TEMPLATE 55) -->\n  <form method='post' data-gjs-type='column' class='contact-right yslg-form' style='flex:1; min-width:300px; padding:35px 25px; background:#f9f9f9; display:flex; flex-direction:column; justify-content:center; align-items:center;'>\n\n    <h2 style='font-size:24px; color:#111; margin-bottom:8px; text-align:center;'>Let\u2019s Get in Touch</h2>\n\n    <p style='font-size:13px; color:#666; margin-bottom:20px; text-align:center;'>we are here to answer your questions</p>\n\n    <input type='text' name='name' placeholder='Full Name' required style='width:100%; max-width:280px; padding:11px; border-radius:6px; border:1px solid #ddd; margin-bottom:10px;'>\n\n    <input type='email' name='email' placeholder='Email Address' required style='width:100%; max-width:280px; padding:11px; border-radius:6px; border:1px solid #ddd; margin-bottom:10px;'>\n\n    <input type='tel' data-gjs-type='phone-input' name='phone' class='form-control phone-input-field' inputmode='numeric' placeholder='Phone Number' required style='width:100%; max-width:280px; padding:11px; border-radius:6px; border:1px solid #ddd; margin-bottom:10px;'>\n\n    <textarea name='message' placeholder='Type your message here...' style='width:100%; max-width:280px; padding:11px; border-radius:6px; border:1px solid #ddd; min-height:80px; resize:none; margin-bottom:10px;'></textarea>\n\n    <!-- SUBMIT BUTTON -->\n    <button type='submit' style='width:100%; max-width:280px; padding:12px; background:#3b6edc; color:#fff; border:none; border-radius:20px; font-size:14px; font-weight:bold; cursor:pointer;'>Send Message</button>\n\n    <!-- CENTERED NO THANKS -->\n    <p class='ysi-close-btn' data-gjs-type='close-button' style='margin-top:12px; font-size:12px; color:#666; cursor:pointer; align-self:center; text-align:center;'>No Thanks</p>\n\n  </form>\n\n</div>\n\n<script>\n(function($){\n  $(document).ready(function(){\n    $('.yslg-form').on('submit', function(e){\n      e.preventDefault();\n      var $popup = $(this).closest('.ysleadgen-popup');\n      $popup.find('.yslg-page-0').hide();\n      $popup.find('.yslg-page-1').show();\n    });\n  });\n})(jQuery);\n</script>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-59",
      "category": "Coupon Discount",
      "image": "UnlockOfferDark.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "<style>\n  @media (max-width: 768px) {\n    .popup-container {\n      padding: 25px 12px !important;\n      width: 90% !important;\n    }\n    .popup-input-row {\n      flex-direction: column !important;\n      gap: 10px !important;\n    }\n    .popup-input-row input,\n    .popup-input-row button {\n      width: 100% !important;\n    }\n  }\n</style>\n\n<div data-gjs-type='column' class='yslg-page yslg-page-0 popup-container' style='margin:60px auto; max-width:480px; width:480px; background:#2f3443; border-radius:8px; padding:35px 20px; text-align:center; position:relative; box-shadow:0 8px 20px rgba(0,0,0,0.25);'>\n\n  <!-- Close Button -->\n  <button class='ysi-close-btn' data-gjs-type='close-button' style='position:absolute; top:8px; right:10px; font-size:20px; color:#ffffff; background:transparent; border:none; cursor:pointer;'>&times;</button>\n\n  <!-- Heading Small -->\n  <p style='color:#2dd4bf; letter-spacing:2px; font-size:13px; margin-bottom:10px;'>DON\\'T MISS OUT</p>\n\n  <!-- Main Heading -->\n  <h2 style='font-size:34px; color:#ffffff; font-weight:700; margin-bottom:10px;'>UNLOCK 10% OFF</h2>\n\n  <!-- Sub Heading -->\n  <p style='font-size:16px; color:#e5e7eb; margin-bottom:20px;'>INSTANTLY WITH YOUR EMAIL</p>\n\n  <!-- Divider -->\n  <div style='width:70%; height:1px; background:#9ca3af; margin:15px auto 25px;'></div>\n\n  <!-- Form -->\n  <form class='yslg-form' method='post' style='display:flex; justify-content:center; align-items:center;' data-gjs-type='form'>\n    <div class='popup-input-row' style='display:flex; width:100%; max-width:360px; gap:12px;'>\n      <input type='email' placeholder='Enter your email address' required style='flex:1; padding:10px 12px; border-radius:6px; border:none; outline:none; font-size:13px; background:#e5e7eb; color:#111827;'>\n      <button type='submit' style='padding:10px 16px; background:#2dd4bf; color:#111827; border:none; border-radius:6px; font-weight:600; cursor:pointer;'>Unlock</button>\n    </div>\n  </form>\n\n</div>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-60",
      "category": "Gamification",
      "image": "greenwheel.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "  <style>\n    * { box-sizing: border-box; }\n    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap');\n\n    .ysi-template-60.ysi-spin-container {\n      max-width: 800px;\n      width: 95%;\n      margin: 40px auto;\n      background: #f0f2f5;\n      border-radius: 20px;\n      box-shadow: 0 15px 40px rgba(0,0,0,0.15);\n      display: flex;\n      flex-wrap: nowrap;\n      position: relative;\n      overflow: hidden;\n      min-height: 440px;\n    }\n\n    .ysi-template-60 .ysi-spin-left {\n      flex: 1 1 320px;\n      padding: 30px;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      background: #f0f2f5;\n      position: relative;\n    }\n\n    .ysi-template-60 .ysi-spin-right {\n      flex: 1 1 320px;\n      padding: 40px 30px;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      text-align: left;\n      background: #f0f2f5;\n    }\n\n    .ysi-template-60 .ysi-wheel-wrapper-60 {\n      position: relative;\n      width: 320px;\n      height: 320px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .ysi-template-60 .ysi-wheel-outer-border-60 {\n      position: absolute;\n      width: 332px;\n      height: 332px;\n      border-radius: 50%;\n      background: #1a1a1a;\n      box-shadow: 0 0 15px rgba(0,0,0,0.3);\n      z-index: 1;\n    }\n\n    .ysi-template-60 .ysi-light-60 {\n        position: absolute;\n        width: 6px;\n        height: 6px;\n        background: #fff;\n        border-radius: 50%;\n        top: 50%;\n        left: 50%;\n        margin-top: -3px;\n        margin-left: -3px;\n        box-shadow: 0 0 4px #fff;\n    }\n\n    .ysi-template-60 .ysi-wheel-60 {\n      width: 300px;\n      height: 300px;\n      border-radius: 50%;\n      position: relative;\n      overflow: hidden;\n      transition: transform 5s cubic-bezier(0.15, 0, 0.15, 1);\n      z-index: 2;\n      background: conic-gradient(\n        #003722 0deg 90deg,\n        #000000 90deg 180deg,\n        #003722 180deg 270deg,\n        #000000 270deg 360deg\n      );\n      border: 3px solid #1a1a1a;\n    }\n\n    .ysi-template-60 .ysi-wheel-label-60 {\n      position: absolute !important;\n      top: 50% !important;\n      left: 50% !important;\n      width: 140px !important;\n      height: 20px !important;\n      margin-top: -10px !important;\n      transform-origin: left center !important;\n      display: flex !important;\n      align-items: center !important;\n      justify-content: flex-end !important;\n      padding-right: 15px !important;\n      font-weight: 800 !important;\n      font-size: 11px !important;\n      box-sizing: border-box !important;\n      \n      color: #fff;\n      text-transform: uppercase !important;\n      text-align: right !important;\n      line-height: 1.1 !important;\n      z-index: 99 !important;\n      overflow: visible !important;\n    }\n\n    .ysi-template-60 .ysi-wheel-center-60 {\n      position: absolute;\n      width: 80px;\n      height: 80px;\n      background: #fff;\n      border-radius: 50%;\n      z-index: 10;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0 0 10px rgba(0,0,0,0.2);\n      border: 5px solid #1a1a1a;\n    }\n\n    .ysi-template-60 .ysi-spin-btn-center {\n      width: 100%;\n      height: 100%;\n      background: transparent;\n      border: none;\n      border-radius: 50%;\n      font-weight: 900;\n      font-size: 16px;\n      cursor: pointer;\n      color: #1a1a1a;\n      transition: transform 0.1s;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 1;\n      padding: 0;\n      margin: 0;\n    }\n\n    .ysi-template-60 .ysi-pointer-right-60 {\n      position: absolute;\n      right: -18px;\n      top: 48%;\n      transform: translateY(-50%) rotate(45deg);\n      width: 30px;\n      height: 30px;\n      background: #fff;\n      border-radius: 50% 50% 50% 0;\n      z-index: 20;\n      box-shadow: 0 0 10px rgba(0,0,0,0.2);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: transform 0.1s;\n    }\n\n    .ysi-template-60 .ysi-pointer-right-60.ysi-ticking {\n      transform: translateY(-50%) rotate(30deg);\n    }\n\n    .ysi-template-60 .ysi-spin-title {\n      font-size: 16px;\n      font-weight: 500;\n      color: #666;\n      margin-bottom: 3px;\n    }\n\n    .ysi-template-60 .ysi-shock-title {\n      font-size: 38px;\n      font-weight: 900;\n      color: #1a1a1a;\n      line-height: 1;\n      margin-bottom: 25px;\n      text-transform: uppercase;\n      letter-spacing: -0.5px;\n    }\n\n    .ysi-template-60 .ysi-wheel-form input {\n      width: 100%;\n      padding: 12px 15px;\n      border: 1.5px solid #ccc;\n      border-radius: 4px;\n      font-size: 15px;\n      margin-bottom: 12px;\n      outline: none;\n      box-sizing: border-box;\n    }\n\n    .ysi-template-60 .ysi-main-spin-btn {\n      background: #003722;\n      color: #fff;\n      border: none;\n      padding: 15px;\n      border-radius: 30px;\n      font-size: 16px;\n      font-weight: 700;\n      cursor: pointer;\n      width: 100%;\n      text-transform: uppercase;\n    }\n\n    .ysi-template-60 .ysi-close-btn {\n        position: absolute !important;\n        top: 15px !important;\n        right: 15px !important;\n        background: none !important;\n        border: none !important;\n        font-size: 24px !important;\n        cursor: pointer !important;\n        z-index: 100 !important;\n        color: #999 !important;\n    }\n\n    @media (max-width: 600px) {\n      .ysi-template-60 .ysi-spin-container { flex-wrap: wrap;  flex-direction: column; width:90%; }\n      .ysi-template-60 .ysi-wheel-wrapper-60 { transform: scale(0.9); }\n    }\n  </style>\n\n  <div class='ysi-spin-container yslg-page yslg-page-0 ysi-template-60' data-gjs-type='column'>\n    <button class='ysi-close-btn' data-gjs-type='close-button'>&times;</button>\n\n    <div class='ysi-spin-left' data-gjs-type='column'>\n      <div class='ysi-wheel-wrapper-60'>\n        <div class='ysi-wheel-outer-border-60'>\n            <div class='ysi-light-60' style='transform: rotate(0deg) translateY(-158px);'></div>\n            <div class='ysi-light-60' style='transform: rotate(45deg) translateY(-158px);'></div>\n            <div class='ysi-light-60' style='transform: rotate(90deg) translateY(-158px);'></div>\n            <div class='ysi-light-60' style='transform: rotate(135deg) translateY(-158px);'></div>\n            <div class='ysi-light-60' style='transform: rotate(180deg) translateY(-158px);'></div>\n            <div class='ysi-light-60' style='transform: rotate(225deg) translateY(-158px);'></div>\n            <div class='ysi-light-60' style='transform: rotate(270deg) translateY(-158px);'></div>\n            <div class='ysi-light-60' style='transform: rotate(315deg) translateY(-158px);'></div>\n        </div>\n        <div id='ysi-wheel-60' class='ysi-wheel-60'>\n           <!-- Labels Settings Group -->\n           <div class='ysi-labels-settings-60' data-gjs-name='labels settings' data-gjs-type='column'>\n              <div class='ysi-wheel-label-60' data-coupon='SAVE50' data-gjs-name='labels settings' data-gjs-type='text' style='transform: rotate(45deg);'>50% OFF</div>\n              <div class='ysi-wheel-label-60' data-coupon='SAVE25' data-gjs-name='labels settings' data-gjs-type='text' style='transform: rotate(135deg);'>25% OFF</div>\n              <div class='ysi-wheel-label-60' data-coupon='FREE' data-gjs-name='labels settings' data-gjs-type='text' style='transform: rotate(225deg);'>FREE SHIPPING</div>\n              <div class='ysi-wheel-label-60' data-coupon='SAVE50' data-gjs-name='labels settings' data-gjs-type='text' style='transform: rotate(315deg);'>50% OFF</div>\n           </div>\n        </div><div class='ysi-wheel-center-60'><button id='ysi-spin-btn-center' class='ysi-spin-btn-center'>SPIN</button></div><div class='ysi-pointer-right-60'><div style='width:8px; height:8px; background:#888; border-radius:50%; transform:rotate(-45deg);'></div></div></div></div><div class='ysi-spin-right' data-gjs-type='column'><p class='ysi-spin-title'>Try your luck and win a</p><h2 class='ysi-shock-title'>SHOCKING DEAL!</h2><form class='ysi-wheel-form yslg-form' method='post'><input type='email' name='email' placeholder='Email Address' required /><button type='submit' id='ysi-main-spin-btn' class='ysi-main-spin-btn'>SPIN THE WHEEL</button></form></div></div>",
              "name": "Main Page"
            }
          ]
        },
        {
          "name": "Thank You Page",
          "frames": [
            {
              "component": "  <style>\n    .ysi-template-60.ysi-thankyou-container {\n      max-width: 450px;\n      width: 90%;\n      margin: 80px auto;\n      background: #ffffff;\n      border-radius: 20px;\n      box-shadow: 0 15px 40px rgba(0,0,0,0.2);\n      padding: 40px 30px;\n      text-align: center;\n      position: relative;\n    }\n\n    .ysi-win-icon { font-size: 50px; margin-bottom: 15px; }\n    .ysi-thankyou-title { font-size: 28px; font-weight: 800; color: #1a1a1a; margin-bottom: 8px; }\n    .ysi-win-msg { font-size: 18px; color: #003722; font-weight: 600; margin-bottom: 20px; }\n    .ysi-coupon-box { background: #f8f9fa; border: 2px dashed #003722; border-radius: 10px; padding: 15px; margin-bottom: 20px; }\n    .ysi-coupon-code { font-size: 24px; font-weight: 800; color: #333; }\n    .ysi-back-btn { background: #003722; color: #fff; border: none; padding: 12px 25px; border-radius: 40px; font-size: 15px; font-weight: 700; cursor: pointer; width: 100%; }\n    .ysi-close-btn { position: absolute !important; top: 12px !important; right: 12px !important; background: none !important; border: none !important; font-size: 20px !important; color: #999 !important; }\n  </style>\n\n  <div class='ysi-thankyou-container ysi-template-60' data-gjs-type='column'>\n    <button class='ysi-close-btn' data-gjs-type='close-button'>&times;</button>\n    <div class='ysi-win-icon'>\ud83c\udf89</div>\n    <h2 class='ysi-thankyou-title'>Thank You!</h2>\n    <p class='ysi-win-msg'></p>\n    <div class='ysi-coupon-box'>\n      <span class='ysi-coupon-code'></span>\n    </div>\n    <button class='ysi-back-btn' onclick=\"jQuery(this).closest('.ysleadgen-popup').fadeOut();\">CONTINUE SHOPPING</button>\n  </div>",
              "name": "Thank You Page"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-61",
      "category": "Gamification",
      "image": "goldenwheel.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "  <style>\n    * { box-sizing: border-box; }\n    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap');\n\n    .ysi-template-61.ysi-spin-container {\n      max-width: 800px;\n      width: 95%;\n      margin: 40px auto;\n      background: #0f172a;\n      border-radius: 30px;\n      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n      display: flex;\n      flex-wrap: nowrap;\n      position: relative;\n      overflow: hidden;\n      min-height: 460px;\n      border: 2px solid #334155;\n    }\n\n    .ysi-template-61 .ysi-spin-left {\n      flex: 1 1 320px;\n      padding: 30px;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      background: #0f172a;\n      position: relative;\n    }\n\n    .ysi-template-61 .ysi-spin-right {\n      flex: 1 1 320px;\n      padding: 40px 30px;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      text-align: left;\n      background: #1e293b;\n    }\n\n    .ysi-template-61 .ysi-wheel-wrapper-61 {\n      position: relative;\n      width: 320px;\n      height: 320px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .ysi-template-61 .ysi-wheel-outer-border-61 {\n      position: absolute;\n      width: 336px;\n      height: 336px;\n      border-radius: 50%;\n      background: #D2B27A;\n      box-shadow: 0 0 30px rgba(210, 178, 122, 0.3);\n      z-index: 1;\n    }\n\n    .ysi-template-61 .ysi-light-61 {\n        position: absolute;\n        width: 8px;\n        height: 8px;\n        background: #fff;\n        border-radius: 50%;\n        top: 50%;\n        left: 50%;\n        margin-top: -4px;\n        margin-left: -4px;\n        box-shadow: 0 0 10px #fff;\n    }\n\n    .ysi-template-61 .ysi-wheel-61 {\n      width: 310px;\n      height: 310px;\n      border-radius: 50%;\n      position: relative;\n      overflow: hidden;\n      transition: transform 5s cubic-bezier(0.15, 0, 0.15, 1);\n      z-index: 2;\n      background: conic-gradient(\n        #D2B27A 0deg 90deg,\n        #0f172a 90deg 180deg,\n        #D2B27A 180deg 270deg,\n        #0f172a 270deg 360deg\n      );\n      border: 5px solid #0f172a;\n    }\n\n    .ysi-template-61 .ysi-wheel-label-61 {\n      position: absolute !important;\n      top: 50% !important;\n      left: 50% !important;\n      width: 145px !important;\n      height: 20px !important;\n      margin-top: -10px !important;\n      transform-origin: left center !important;\n      display: flex !important;\n      align-items: center !important;\n      justify-content: flex-end !important;\n      padding-right: 20px !important;\n      font-weight: 800 !important;\n      font-size: 12px !important;\n      box-sizing: border-box !important;\n      color: inherit !important;\n      text-transform: uppercase !important;\n      text-align: right !important;\n      line-height: 1.1 !important;\n      z-index: 99 !important;\n      overflow: visible !important;\n    }\n\n    .ysi-template-61 .ysi-wheel-center-61 {\n      position: absolute;\n      width: 70px;\n      height: 70px;\n      background: #D2B27A;\n      border-radius: 50%;\n      z-index: 10;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0 0 20px rgba(0,0,0,0.5);\n      border: 4px solid #0f172a;\n    }\n\n    .ysi-template-61 .ysi-spin-btn-center {\n      width: 100%;\n      height: 100%;\n      background: transparent;\n      border: none;\n      border-radius: 50%;\n      font-weight: 900;\n      font-size: 14px;\n      cursor: pointer;\n      color: #0f172a;\n      transition: transform 0.1s;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 1;\n      padding: 0;\n      margin: 0;\n    }\n\n    .ysi-template-61 .ysi-pointer-right-61 {\n      position: absolute;\n      right: -22px;\n      top: 50%;\n      transform: translateY(-50%) rotate(45deg);\n      width: 35px;\n      height: 35px;\n      background: #D2B27A;\n      border-radius: 50% 50% 50% 0;\n      z-index: 20;\n      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: transform 0.1s;\n    }\n\n    .ysi-template-61 .ysi-pointer-right-61.ysi-ticking {\n      transform: translateY(-50%) rotate(30deg);\n    }\n\n    .ysi-template-61 .ysi-spin-title {\n      font-size: 14px;\n      font-weight: 600;\n      color: #94a3b8;\n      margin-bottom: 5px;\n      text-transform: uppercase;\n      letter-spacing: 2px;\n    }\n\n    .ysi-template-61 .ysi-shock-title {\n      font-size: 42px;\n      font-weight: 800;\n      color: #ffffff;\n      line-height: 1.1;\n      margin-bottom: 30px;\n      text-transform: uppercase;\n      letter-spacing: -1px;\n      background: linear-gradient(to right, #D2B27A, #fef3c7);\n      -webkit-background-clip: text;\n      -webkit-text-fill-color: transparent;\n    }\n\n    .ysi-template-61 .ysi-wheel-form input {\n      width: 100%;\n      padding: 15px 20px;\n      border: 2px solid #334155;\n      border-radius: 12px;\n      font-size: 15px;\n      margin-bottom: 15px;\n      outline: none;\n      box-sizing: border-box;\n      background: #0f172a;\n      color: #ffffff;\n      transition: border-color 0.3s;\n    }\n\n    .ysi-template-61 .ysi-wheel-form input:focus {\n      border-color: #D2B27A;\n    }\n\n    .ysi-template-61 .ysi-main-spin-btn {\n      background: #D2B27A;\n      color: #0f172a;\n      border: none;\n      padding: 16px;\n      border-radius: 12px;\n      font-size: 16px;\n      font-weight: 800;\n      cursor: pointer;\n      width: 100%;\n      text-transform: uppercase;\n      transition: all 0.3s;\n      box-shadow: 0 4px 6px -1px rgba(210, 178, 122, 0.4);\n    }\n\n    .ysi-template-61 .ysi-main-spin-btn:hover {\n       transform: translateY(-2px);\n       box-shadow: 0 10px 15px -3px rgba(210, 178, 122, 0.5);\n    }\n\n    .ysi-template-61 .ysi-close-btn {\n        position: absolute !important;\n        top: 20px !important;\n        right: 20px !important;\n        background: rgba(255,255,255,0.1) !important;\n        border: none !important;\n        font-size: 24px !important;\n        cursor: pointer !important;\n        z-index: 100 !important;\n        color: #94a3b8 !important;\n        width: 36px !important;\n        height: 36px !important;\n        border-radius: 50% !important;\n        display: flex !important;\n        align-items: center !important;\n        justify-content: center !important;\n        transition: all 0.2s !important;\n    }\n\n    .ysi-template-61 .ysi-close-btn:hover {\n        background: rgba(255,255,255,0.2) !important;\n        color: #fff !important;\n    }\n\n    @media (max-width: 600px) {\n      .ysi-template-61.ysi-spin-container { flex-wrap: wrap;  flex-direction: column; width:92%; min-height: auto; }\n      .ysi-template-61 .ysi-spin-left { padding: 20px; }\n      .ysi-template-61 .ysi-wheel-wrapper-61 { transform: scale(0.85); width: 280px; height: 280px; }\n      .ysi-template-61 .ysi-wheel-outer-border-61 { width: 290px; height: 290px; }\n      .ysi-template-61 .ysi-wheel-61 { width: 270px; height: 270px; }\n      .ysi-template-61 .ysi-wheel-label-61 { width: 125px; }\n      .ysi-template-61 .ysi-spin-right { padding: 30px 20px; }\n    }\n  </style>\n\n  <div class='ysi-spin-container yslg-page yslg-page-0 ysi-template-61' data-gjs-type='column'>\n    <button class='ysi-close-btn' data-gjs-type='close-button'>&times;</button>\n\n    <div class='ysi-spin-left' data-gjs-type='column'>\n      <div class='ysi-wheel-wrapper-61'>\n        <div class='ysi-wheel-outer-border-61'>\n            <div class='ysi-light-61' style='transform: rotate(0deg) translateY(-160px);'></div>\n            <div class='ysi-light-61' style='transform: rotate(45deg) translateY(-160px);'></div>\n            <div class='ysi-light-61' style='transform: rotate(90deg) translateY(-160px);'></div>\n            <div class='ysi-light-61' style='transform: rotate(135deg) translateY(-160px);'></div>\n            <div class='ysi-light-61' style='transform: rotate(180deg) translateY(-160px);'></div>\n            <div class='ysi-light-61' style='transform: rotate(225deg) translateY(-160px);'></div>\n            <div class='ysi-light-61' style='transform: rotate(270deg) translateY(-160px);'></div>\n            <div class='ysi-light-61' style='transform: rotate(315deg) translateY(-160px);'></div>\n        </div>\n        <div id='ysi-wheel-61' class='ysi-wheel-61'>\n           <!-- Labels Settings Group -->\n           <div class='ysi-labels-settings-61' data-gjs-name='labels settings' data-gjs-type='column'>\n              <div class='ysi-wheel-label-61' data-coupon='SAVE50' data-gjs-name='labels settings' data-gjs-type='text' style='transform: rotate(45deg); color:#ffffff !important;'>50% OFF</div>\n              <div class='ysi-wheel-label-61' data-coupon='SAVE25' data-gjs-name='labels settings' data-gjs-type='text' style='transform: rotate(135deg); color:#ffffff !important;'>25% OFF</div>\n              <div class='ysi-wheel-label-61' data-coupon='FREE' data-gjs-name='labels settings' data-gjs-type='text' style='transform: rotate(225deg); color:#ffffff !important;'>FREE SHIPPING</div>\n              <div class='ysi-wheel-label-61' data-coupon='SAVE50' data-gjs-name='labels settings' data-gjs-type='text' style='transform: rotate(315deg); color:#ffffff !important;'>50% OFF</div>\n           </div>\n        </div><div class='ysi-wheel-center-61'><button id='ysi-spin-btn-center' class='ysi-spin-btn-center'>SPIN</button></div><div class='ysi-pointer-right-61'><div style='width: 10px; height: 10px; background:#fef3c7; border-radius: 50%; transform:rotate(-45deg);'></div></div></div></div><div class='ysi-spin-right' data-gjs-type='column'><p class='ysi-spin-title'>Limited Time VIP Access</p><h2 class='ysi-shock-title'>UNLOCK YOUR PREMIER DEAL!</h2><form class='ysi-wheel-form yslg-form' method='post'><input type='email' name='email' placeholder='Enter Your Best Email' required /><button type='submit' id='ysi-main-spin-btn' class='ysi-main-spin-btn'>SPIN TO WIN</button></form></div></div>",
              "name": "Main Page"
            }
          ]
        },
        {
          "name": "Thank You Page",
          "frames": [
            {
              "component": "  <style>\n    .ysi-template-61.ysi-thankyou-container {\n      max-width: 450px;\n      width: 90%;\n      margin: 80px auto;\n      background: #0f172a;\n      border-radius: 30px;\n      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n      padding: 50px 30px;\n      text-align: center;\n      position: relative;\n      border: 2px solid #334155;\n    }\n\n    .ysi-win-icon { font-size: 60px; margin-bottom: 20px; filter: drop-shadow(0 0 10px #D2B27A); }\n    .ysi-thankyou-title { font-size: 32px; font-weight: 800; color: #ffffff; margin-bottom: 10px; }\n    .ysi-win-msg { font-size: 18px; color: #D2B27A; font-weight: 600; margin-bottom: 25px; text-transform: uppercase; letter-spacing: 1px; }\n    .ysi-coupon-box { background: rgba(255,255,255,0.05); border: 2px dashed #D2B27A; border-radius: 15px; padding: 20px; margin-bottom: 30px; }\n    .ysi-coupon-code { font-size: 28px; font-weight: 800; color: #ffffff; letter-spacing: 2px; }\n    .ysi-back-btn { background: #D2B27A; color: #0f172a; border: none; padding: 15px 30px; border-radius: 12px; font-size: 16px; font-weight: 800; cursor: pointer; width: 100%; transition: all 0.3s; }\n    .ysi-back-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(210, 178, 122, 0.5); }\n    .ysi-close-btn { position: absolute !important; top: 15px !important; right: 15px !important; background: none !important; border: none !important; font-size: 20px !important; color: #94a3b8 !important; }\n  </style>\n\n  <div class='ysi-thankyou-container ysi-template-61' data-gjs-type='column'>\n    <button class='ysi-close-btn' data-gjs-type='close-button'>&times;</button>\n    <div class='ysi-win-icon'>\ud83c\udfc6</div>\n    <h2 class='ysi-thankyou-title'>Congratulations!</h2>\n    <p class='ysi-win-msg'></p>\n    <div class='ysi-coupon-box'>\n      <span class='ysi-coupon-code'></span>\n    </div>\n    <button class='ysi-back-btn' onclick=\"jQuery(this).closest('.ysleadgen-popup').fadeOut();\">START SHOPPING NOW</button>\n  </div>",
              "name": "Thank You Page"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-62",
      "category": "Gamification",
      "image": "orangewheel.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "  <style>\n    * { box-sizing: border-box; }\n    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700;900&display=swap');\n\n    .ysi-template-62.ysi-spin-container {\n      max-width: 480px;\n      width: 95%;\n      margin: 10px auto;\n      background: #000000;\n      border-radius: 20px;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      position: relative;\n      overflow: hidden;\n      padding: 45px 20px 5px 20px;\n      box-shadow: 0 20px 50px rgba(0,0,0,0.9);\n      font-family: 'Poppins', sans-serif;\n      border: 3px solid #ffffff;\n    }\n\n    .ysi-template-62 .ysi-header-section {\n      text-align: center;\n      margin-bottom: 15px;\n    }\n\n    .ysi-template-62 .ysi-main-title {\n      font-size: 28px;\n      font-weight: 900;\n      color: #ff7e00;\n      text-transform: uppercase;\n      line-height: 1.1;\n      margin: 0;\n    }\n\n    .ysi-template-62 .ysi-sub-title {\n      font-size: 14px;\n      color: #ffffff;\n      margin: 5px 0 0 0;\n      opacity: 0.8;\n    }\n\n    .ysi-template-62 .ysi-wheel-form {\n      width: 100%;\n      max-width: 300px;\n      display: flex;\n      flex-direction: column;\n      gap: 10px;\n      margin-bottom: 15px;\n      z-index: 10;\n    }\n\n    .ysi-template-62 .ysi-wheel-form input {\n      padding: 12px 15px;\n      border: 2px solid #ff7e00;\n      border-radius: 8px;\n      background: transparent;\n      color: #fff;\n      font-size: 14px;\n      text-align: center;\n      outline: none;\n    }\n\n    .ysi-template-62 .ysi-main-spin-btn {\n      background: #ff7e00;\n      color: #000;\n      border: none;\n      padding: 12px;\n      border-radius: 8px;\n      font-size: 16px;\n      font-weight: 800;\n      cursor: pointer;\n      text-transform: uppercase;\n    }\n\n    .ysi-template-62 .ysi-wheel-area {\n      position: relative;\n      width: 280px;\n      height: 280px;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      margin-bottom: 10px;\n    }\n\n    .ysi-template-62 .ysi-wheel-pointer {\n      position: absolute;\n      top: -8px;\n      left: 50%;\n      transform: translateX(-50%);\n      width: 35px;\n      height: 40px;\n      background: #ff7e00;\n      clip-path: polygon(50% 100%, 0% 0%, 100% 0%);\n      z-index: 20;\n      border: 2px solid #fff;\n    }\n\n    .ysi-template-62 .ysi-wheel-62 {\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      border: 6px solid #ffffff;\n      position: relative;\n      overflow: hidden;\n      transition: transform 4s cubic-bezier(0.15, 0, 0.15, 1);\n      background: conic-gradient(\n        #ff7e00 0deg 90deg,\n        #000000 90deg 180deg,\n        #ff7e00 180deg 270deg,\n        #000000 270deg 360deg\n      );\n    }\n\n    .ysi-template-62 .ysi-wheel-label-62 {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      width: 50%;\n      height: 40px;\n      transform-origin: left center;\n      display: flex;\n      align-items: center;\n      justify-content: flex-end;\n      padding-right: 35px;\n      font-weight: 900;\n      font-size: 14px;\n      color: #ffffff;\n      text-transform: uppercase;\n      z-index: 10;\n    }\n\n    .ysi-template-62 .ysi-wheel-center {\n      position: absolute;\n      width: 55px;\n      height: 55px;\n      background: radial-gradient(circle, #ff9500 0%, #ff5e00 100%);\n      border-radius: 50%;\n      border: 5px solid #222;\n      z-index: 15;\n    }\n\n    .ysi-template-62 .ysi-bag-image-container {\n      width: 90%;\n      margin-top: 0px;\n      padding-bottom: 5px;\n    }\n\n    .ysi-template-62 .ysi-bag-img {\n      width: 100%;\n      height: auto;\n      display: block;\n      object-fit: contain;\n    }\n\n    .ysi-template-62 .ysi-close-btn-circle {\n      position: absolute;\n      top: 15px !important;\n      right: 15px !important;\n      width: 32px;\n      height: 32px;\n      background: #ff7e00;\n      color: #000;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      z-index: 100;\n      font-size: 22px;\n      font-weight: bold;\n      border: 2px solid #fff;\n      line-height: 0;\n      padding: 0;\n    }\n  </style>\n\n  <div class='ysi-spin-container yslg-page yslg-page-0 ysi-template-62'>\n    <button class='ysi-close-btn-circle' data-gjs-type='close-button'>&times;</button>\n\n    <div class='ysi-header-section'>\n      <h1 class='ysi-main-title'>Boost Your Cart<br>Spin for an Extra Deal</h1>\n      <p class='ysi-sub-title'>Spin to upgrade your purchase with a bonus</p>\n    </div>\n\n    <form class='ysi-wheel-form yslg-form' method='post'>\n      <input type='email' name='email' placeholder='Enter your email address' required />\n      <button type='submit' class='ysi-main-spin-btn'>Spin Now</button>\n    </form>\n\n    <div class='ysi-wheel-area'>\n      <div class='ysi-wheel-pointer'></div>\n      <div id='ysi-wheel-62' class='ysi-wheel-62'>\n        <div class='ysi-wheel-label-62' style='transform: rotate(45deg);'>10% OFF</div>\n        <div class='ysi-wheel-label-62' style='transform: rotate(135deg);'>Try Again</div>\n        <div class='ysi-wheel-label-62' style='transform: rotate(225deg);'>15% OFF</div>\n        <div class='ysi-wheel-label-62' style='transform: rotate(315deg);'>Spin Again</div>\n      </div>\n      <div class='ysi-wheel-center'></div>\n    </div>\n\n    <div class='ysi-bag-image-container'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/OrangeBag.webp' class='ysi-bag-img' alt='Shopping Bags' />\n    </div>\n  </div>",
              "name": "Main Page"
            }
          ]
        },
        {
          "name": "Thank You Page",
          "frames": [
            {
              "component": "  <style>\n    div.ysi-template-62.ysi-thanks.yslg-page {\n      max-width: 500px !important;\n      width: 500px !important;\n      margin: 100px auto !important;\n      background: #000 !important;\n      border: 3px solid #ffffff !important;\n      border-radius: 20px !important;\n      padding: 40px 20px !important;\n      text-align: center !important;\n      position: relative !important;\n      color: #fff !important;\n      font-family: 'Poppins', sans-serif;\n      box-shadow: 0 20px 50px rgba(0,0,0,0.5) !important;\n    }\n    .ysi-thanks-title { color: #ff7e00; font-size: 28px; font-weight: 900; margin-bottom: 10px; }\n    .ysi-win-msg { font-size: 18px; color: #ff7e00; font-weight: 600; margin-bottom: 15px; text-transform: uppercase; }\n    .ysi-code-box { background: #111; border: 2px dashed #ff7e00; padding: 15px; margin: 20px 0; font-size: 24px; font-weight: 700; }\n    .ysi-claim-btn { background: #ff7e00; color: #000; border: none; padding: 12px 25px; border-radius: 8px; font-weight: 700; cursor: pointer; width: 100%; }\n  </style>\n  <div class='ysi-thanks ysi-template-62 yslg-page yslg-page-1'>\n    <h2 class='ysi-thanks-title'>CONGRATS!</h2>\n    <p class='ysi-win-msg'></p>\n    <p>Your lucky discount is ready:</p>\n    <div class='ysi-code-box'>LUCKY15</div>\n    <button class='ysi-claim-btn' onclick=\"jQuery(this).closest('.ysleadgen-popup').fadeOut();\">USE IT NOW</button>\n  </div>",
              "name": "Thank You Page"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation",
        "Cart Recovery"
      ],
      "industry": [
        "Fashion",
        "E-commerce"
      ]
    },
    {
      "id": "template-63",
      "category": "Gamification",
      "image": "purplewheel.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "  <style>\n    * { box-sizing: border-box; }\n    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800;900&display=swap');\n    @import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');\n\n    .ysi-template-63.ysi-spin-container {\n      max-width: 520px;\n      width: 95%;\n      min-height: 750px;\n      margin: 20px auto;\n      background: linear-gradient(to bottom, #e9d5ff 0%, #ffffff 50%, #f3f4f6 100%);\n      border-radius: 20px;\n      box-shadow: 0 15px 40px rgba(0,0,0,0.15);\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      position: relative;\n      overflow: hidden;\n      padding: 40px 25px 30px 25px;\n      font-family: 'Poppins', sans-serif;\n    }\n\n    .ysi-template-63 .ysi-header-section {\n      text-align: center;\n      margin-bottom: 25px;\n    }\n\n    .ysi-template-63 .ysi-script-title {\n      font-family: 'Pacifico', cursive;\n      font-size: 32px;\n      color: #7c3aed;\n      margin: 0;\n      line-height: 1.1;\n      font-weight: bold;\n    }\n\n    .ysi-template-63 .ysi-main-title {\n      font-size: 44px;\n      font-weight: 900;\n      color: #1e1b4b;\n      text-transform: capitalize;\n      margin: -5px 0 8px 0;\n      line-height: 1.0;\n    }\n\n    .ysi-template-63 .ysi-sub-title {\n      font-size: 16px;\n      color: #4b5563;\n      max-width: 400px;\n      margin: 0 auto;\n      font-weight: 600;\n    }\n\n    .ysi-template-63 .ysi-wheel-form {\n      width: 100%;\n      max-width: 380px;\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      margin-bottom: 35px;\n      z-index: 10;\n    }\n\n    .ysi-template-63 .ysi-wheel-form input {\n      padding: 14px 20px;\n      border: 2px solid #a855f7;\n      border-radius: 12px;\n      font-size: 16px;\n      outline: none;\n      text-align: center;\n      font-weight: 600;\n    }\n\n    .ysi-template-63 .ysi-main-spin-btn {\n      background: #6d28d9;\n      color: #fff;\n      border: none;\n      padding: 14px;\n      border-radius: 12px;\n      font-size: 18px;\n      font-weight: 800;\n      cursor: pointer;\n      text-transform: uppercase;\n      letter-spacing: 1.5px;\n    }\n\n    .ysi-template-63 .ysi-wheel-area {\n      position: relative;\n      width: 440px;\n      height: 440px;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      margin-bottom: -150px;\n      margin-top: 30px;\n    }\n\n    .ysi-template-63 .ysi-wheel-pointer {\n      position: absolute;\n      top: -15px;\n      left: 50%;\n      transform: translateX(-50%);\n      width: 50px;\n      height: 55px;\n      background: #a855f7;\n      clip-path: polygon(50% 100%, 0% 0%, 100% 0%);\n      z-index: 20;\n      border: 3px solid #fff;\n    }\n\n    .ysi-template-63 .ysi-wheel-63 {\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      border: 15px solid #ffffff;\n      position: relative;\n      overflow: hidden;\n      transition: transform 4s cubic-bezier(0.15, 0, 0.15, 1);\n      background: conic-gradient(\n        #c084fc 0deg 90deg,\n        #7e22ce 90deg 180deg,\n        #c084fc 180deg 270deg,\n        #7e22ce 270deg 360deg\n      );\n      box-shadow: 0 8px 30px rgba(0,0,0,0.2);\n    }\n\n    .ysi-template-63 .ysi-wheel-label-63 {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      width: 50%;\n      height: 40px;\n      transform-origin: left center;\n      display: flex;\n      align-items: center;\n      justify-content: flex-end;\n      padding-right: 40px;\n      font-weight: 800;\n      font-size: 24px;\n      color: #fff;\n      z-index: 10;\n    }\n\n    .ysi-template-63 .ysi-wheel-center {\n      position: absolute;\n      width: 90px;\n      height: 90px;\n      background: #ffffff;\n      border-radius: 50%;\n      z-index: 15;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0 4px 15px rgba(0,0,0,0.1);\n    }\n\n    .ysi-template-63 .ysi-center-inner {\n      width: 60px;\n      height: 60px;\n      background: #6d28d9;\n      border-radius: 50%;\n    }\n\n    .ysi-template-63 .ysi-close-btn-circle {\n      position: absolute;\n      top: 10px !important;\n      right: 10px !important;\n      width: 35px;\n      height: 35px;\n      background: #7c3aed;\n      color: #fff;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      z-index: 100;\n      font-size: 24px;\n      border: none;\n    }\n\n    @media (max-width: 480px) {\n      .ysi-template-63.ysi-spin-container { padding: 20px 15px 10px 15px; min-height: 600px; }\n      .ysi-template-63 .ysi-wheel-area { width: 320px; height: 320px; margin-bottom: -100px; }\n      .ysi-template-63 .ysi-main-title { font-size: 32px; }\n      .ysi-template-63 .ysi-wheel-label-63 { font-size: 18px; }\n    }\n  </style>\n\n  <div class='ysi-spin-container yslg-page yslg-page-0 ysi-template-63'>\n    <button class='ysi-close-btn-circle' data-gjs-type='close-button'>&times;</button>\n\n    <div class='ysi-header-section'>\n      <p class='ysi-script-title'>Spin & unlock</p>\n      <h1 class='ysi-main-title'>Your Reward</h1>\n      <p class='ysi-sub-title'>Spin now and unlock your deal before it disappears</p>\n    </div>\n\n    <form class='ysi-wheel-form yslg-form' method='post'>\n      <input type='email' name='email' placeholder='Enter your email address' required />\n      <button type='submit' class='ysi-main-spin-btn'>SPIN NOW</button>\n    </form>\n\n    <div class='ysi-wheel-area'>\n      <div class='ysi-wheel-pointer'></div>\n      <div class='ysi-wheel-63' id='ysi-wheel-63'>\n        <div class='ysi-wheel-label-63' style='transform: rotate(45deg);'>10% off</div>\n        <div class='ysi-wheel-label-63' style='transform: rotate(135deg);'>Try again</div>\n        <div class='ysi-wheel-label-63' style='transform: rotate(225deg);'>15% off</div>\n        <div class='ysi-wheel-label-63' style='transform: rotate(315deg);'>Spin again</div>\n      </div>\n      <div class='ysi-wheel-center'>\n        <div class='ysi-center-inner'></div>\n      </div>\n    </div>\n  </div>",
              "name": "Main Page"
            }
          ]
        },
        {
          "name": "Thank You Page",
          "frames": [
            {
              "component": "  <style>\n    div.ysi-template-63.ysi-thankyou-container.yslg-page {\n      max-width: 450px !important;\n      width: 450px !important;\n      margin: 60px auto !important;\n      background: #ffffff !important;\n      border-radius: 20px !important;\n      padding: 50px 30px !important;\n      text-align: center !important;\n      position: relative !important;\n      font-family: 'Poppins', sans-serif !important;\n      box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;\n      color: #000 !important;\n    }\n    .ysi-thankyou-title { font-size: 32px; font-weight: 800; color: #6d28d9; margin-bottom: 8px; }\n    .ysi-win-msg { font-size: 18px; font-weight: 700; color: #6d28d9; margin-bottom: 10px; }\n    .ysi-coupon-box { background: #f5f3ff; border: 2px dashed #a855f7; border-radius: 12px; padding: 20px; margin: 20px 0; }\n    .ysi-coupon-code { font-size: 28px; font-weight: 800; color: #1e1b4b; }\n    .ysi-back-btn { background: #6d28d9; color: #fff; border: none; padding: 15px 30px; border-radius: 10px; font-size: 16px; font-weight: 700; cursor: pointer; width: 100%; }\n  </style>\n  <div class='ysi-thankyou-container ysi-template-63 yslg-page yslg-page-1'>\n    <h2 class='ysi-thankyou-title'>CONGRATS!</h2>\n    <p class='ysi-win-msg'></p>\n    <p style='font-size: 16px;'>You've unlocked a special reward:</p>\n    <div class='ysi-coupon-box'><span class='ysi-coupon-code'>REWARD15</span></div>\n    <button class='ysi-back-btn' onclick=\"jQuery(this).closest('.ysleadgen-popup').fadeOut();\">USE IT NOW</button>\n  </div>",
              "name": "Thank You Page"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-64",
      "category": "Gamification",
      "image": "Litebluewheel.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "  <style>\n    * { box-sizing: border-box; }\n    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&display=swap');\n\n    .ysi-template-64.ysi-spin-container {\n      max-width: 850px;\n      width: 95%;\n      margin: 40px auto;\n      background: #1B2F3A;\n      border-radius: 12px;\n      box-shadow: 0 20px 50px rgba(0,0,0,0.5);\n      display: flex;\n      flex-wrap: nowrap;\n      position: relative;\n      overflow: hidden;\n      min-height: 480px;\n      font-family: 'Poppins', sans-serif;\n      border: 2px solid #87CEEB;\n    }\n\n    .ysi-template-64 .ysi-spin-left {\n      flex: 1.2;\n      padding: 40px;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      position: relative;\n    }\n\n    .ysi-template-64 .ysi-spin-right {\n      flex: 1;\n      padding: 50px 40px;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      text-align: center;\n      color: #ffffff;\n    }\n\n    .ysi-template-64 .ysi-wheel-wrapper-64 {\n      position: relative;\n      width: 380px;\n      height: 380px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .ysi-template-64 .ysi-wheel-outer-ring {\n      position: absolute;\n      width: 405px;\n      height: 405px;\n      border-radius: 50%;\n      border: 12px solid #7ED8F0;\n      z-index: 1;\n    }\n\n    .ysi-template-64 .ysi-wheel-dot {\n      position: absolute;\n      width: 8px;\n      height: 8px;\n      background: #ffffff;\n      border-radius: 50%;\n      top: 50%;\n      left: 50%;\n      margin-top: -4px;\n      margin-left: -4px;\n      z-index: 2;\n    }\n\n    .ysi-template-64 .ysi-wheel-64 {\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      position: relative;\n      overflow: hidden;\n      transition: transform 5s cubic-bezier(0.15, 0, 0.15, 1);\n      z-index: 3;\n      background: conic-gradient(\n        #ffffff 0deg 90deg,\n        #87CEEB 90deg 180deg,\n        #ffffff 180deg 270deg,\n        #87CEEB 270deg 360deg\n      );\n      border: 5px solid #7ED8F0;\n    }\n\n    .ysi-template-64 .ysi-wheel-label-64 {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      width: 50%;\n      height: 30px;\n      transform-origin: left center;\n      display: flex;\n      align-items: center;\n      justify-content: flex-end;\n      padding-right: 35px;\n      font-weight: 700;\n      font-size: 16px;\n      text-transform: uppercase;\n      z-index: 99;\n      color: #000000;\n    }\n\n    .ysi-template-64 .ysi-wheel-center-64 {\n      position: absolute;\n      width: 70px;\n      height: 70px;\n      background: #DFFDFF;\n      border-radius: 50%;\n      z-index: 10;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0 0 15px rgba(0,0,0,0.4);\n    }\n\n    .ysi-template-64 .ysi-center-dot {\n      width: 40px;\n      height: 40px;\n      background: #1B2F3A;\n      border-radius: 50%;\n    }\n\n    /* Updated Pointer Style: Sharp side facing LEFT (towards wheel) positioned on RIGHT border */\n    .ysi-template-64 .ysi-pointer-side-view {\n      position: absolute;\n      right: -22px; /* Positioned on the border */\n      top: 50%;\n      width: 50px;\n      height: 50px;\n      background: #1B2F3A;\n      /* Creates the sharp point at the bottom-left corner of the div */\n      border-radius: 50% 50% 50% 0;\n      /* Rotated 45 degrees so the sharp corner points exactly LEFT */\n      transform: translateY(-50%) rotate(45deg);\n      z-index: 20;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: -4px 4px 10px rgba(0,0,0,0.3);\n      border: 2px solid #7ED8F0;\n    }\n\n    .ysi-template-64 .ysi-pointer-dot {\n      width: 15px;\n      height: 15px;\n      background: #ffffff;\n      border-radius: 50%;\n      /* Counter-rotate the dot so it stays centered */\n      transform: rotate(-45deg);\n    }\n\n    .ysi-template-64 .ysi-shock-title {\n      font-size: 36px;\n      font-weight: 700;\n      color: #ffffff;\n      line-height: 1.2;\n      margin: 0 0 10px 0;\n    }\n\n    .ysi-template-64 .ysi-text-line-2 {\n       display: block;\n       font-size: 32px;\n       font-weight: 700;\n    }\n\n    .ysi-template-64 .ysi-highlight-percent {\n      display: block;\n      font-size: 58px;\n      font-weight: 700;\n      color: #ffffff;\n      line-height: 1.1;\n      margin-top: 5px;\n    }\n\n    .ysi-template-64 .ysi-sub-title {\n      font-size: 18px;\n      color: #94a3b8;\n      margin-bottom: 30px;\n    }\n\n    .ysi-template-64 .ysi-wheel-form input {\n      width: 100%;\n      padding: 15px 20px;\n      background: #ffffff;\n      border: none;\n      border-radius: 8px;\n      font-size: 16px;\n      margin-bottom: 15px;\n      outline: none;\n      color: #1B2F3A;\n      text-align: center;\n    }\n\n    .ysi-template-64 .ysi-main-spin-btn {\n      background: #7ED8F0;\n      color: #1B2F3A;\n      border: none;\n      padding: 16px;\n      border-radius: 8px;\n      font-size: 18px;\n      font-weight: 800;\n      cursor: pointer;\n      width: 100%;\n      text-transform: uppercase;\n      letter-spacing: 1px;\n    }\n\n    .ysi-template-64 .ysi-close-btn {\n        position: absolute;\n        top: 20px;\n        right: 60px;\n        background: rgba(255,255,255,0.1);\n        border: none;\n        width: 35px;\n        height: 35px;\n        border-radius: 50%;\n        font-size: 20px;\n        cursor: pointer;\n        z-index: 100;\n        color: #fff;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    @media (max-width: 768px) {\n      .ysi-template-64.ysi-spin-container { flex-direction: column; min-height: auto; }\n      .ysi-template-64 .ysi-wheel-wrapper-64 { width: 300px; height: 300px; }\n      .ysi-template-64 .ysi-wheel-outer-ring { width: 320px; height: 320px; }\n      .ysi-template-64 .ysi-shock-title { font-size: 28px; }\n      .ysi-template-64 .ysi-highlight-percent { font-size: 44px; }\n    }\n  </style>\n\n  <div class='ysi-spin-container yslg-page yslg-page-0 ysi-template-64'>\n    <button class='ysi-close-btn' data-gjs-type='close-button'>&times;</button>\n\n    <div class='ysi-spin-left'>\n      <div class='ysi-wheel-wrapper-64'>\n        <div class='ysi-wheel-outer-ring'>\n            <div class='ysi-wheel-dot' style='transform: rotate(0deg) translateY(-198px);'></div>\n            <div class='ysi-wheel-dot' style='transform: rotate(30deg) translateY(-198px);'></div>\n            <div class='ysi-wheel-dot' style='transform: rotate(60deg) translateY(-198px);'></div>\n            <div class='ysi-wheel-dot' style='transform: rotate(90deg) translateY(-198px);'></div>\n            <div class='ysi-wheel-dot' style='transform: rotate(120deg) translateY(-198px);'></div>\n            <div class='ysi-wheel-dot' style='transform: rotate(150deg) translateY(-198px);'></div>\n            <div class='ysi-wheel-dot' style='transform: rotate(180deg) translateY(-198px);'></div>\n            <div class='ysi-wheel-dot' style='transform: rotate(210deg) translateY(-198px);'></div>\n            <div class='ysi-wheel-dot' style='transform: rotate(240deg) translateY(-198px);'></div>\n            <div class='ysi-wheel-dot' style='transform: rotate(270deg) translateY(-198px);'></div>\n            <div class='ysi-wheel-dot' style='transform: rotate(300deg) translateY(-198px);'></div>\n            <div class='ysi-wheel-dot' style='transform: rotate(330deg) translateY(-198px);'></div>\n        </div>\n        <div class='ysi-pointer-side-view'><div class='ysi-pointer-dot'></div></div>\n        <div id='ysi-wheel-64' class='ysi-wheel-64'>\n            <div class='ysi-wheel-label-64' style='transform: rotate(45deg);'>10% off</div>\n            <div class='ysi-wheel-label-64' style='transform: rotate(135deg);'>Sorry!!!</div>\n            <div class='ysi-wheel-label-64' style='transform: rotate(225deg);'>15% off</div>\n            <div class='ysi-wheel-label-64' style='transform: rotate(315deg);'>Try again</div>\n        </div>\n        <div class='ysi-wheel-center-64'>\n            <div class='ysi-center-dot'></div>\n        </div>\n      </div>\n    </div>\n\n    <div class='ysi-spin-right'>\n      <h2 class='ysi-shock-title'>Spin & Save<span class='ysi-text-line-2'>Up to</span><span class='ysi-highlight-percent'>20% OFF</span></h2>\n      <p class='ysi-sub-title'>Spin now and discover how much you can save</p>\n      <form class='ysi-wheel-form yslg-form' method='post'>\n        <input type='email' name='email' placeholder='Enter your email address' required />\n        <button type='submit' class='ysi-main-spin-btn'>SPIN NOW</button>\n      </form>\n    </div>\n  </div>",
              "name": "Main Page"
            }
          ]
        },
        {
          "name": "Thank You Page",
          "frames": [
            {
              "component": "  <style>\n    div.ysi-template-64.ysi-thankyou-container.yslg-page {\n      max-width: 500px !important;\n      width: 500px !important;\n      margin: 80px auto !important;\n      background: #1B2F3A !important;\n      border-radius: 12px !important;\n      box-shadow: 0 15px 40px rgba(0,0,0,0.5) !important;\n      padding: 50px 30px !important;\n      text-align: center !important;\n      position: relative !important;\n      color: #fff !important;\n      font-family: 'Poppins', sans-serif !important;\n      border: 2px solid #87CEEB !important;\n    }\n    .ysi-thankyou-title { font-size: 32px; font-weight: 900; color: #DFFDFF; margin-bottom: 10px; }\n    .ysi-win-msg { font-size: 18px; font-weight: 700; color: #DFFDFF; margin-bottom: 10px; }\n    .ysi-coupon-box { background: rgba(255,255,255,0.05); border: 2px dashed #DFFDFF; border-radius: 8px; padding: 25px; margin: 30px 0; }\n    .ysi-coupon-code { font-size: 32px; font-weight: 800; color: #ffffff; letter-spacing: 2px; }\n    .ysi-back-btn { background: #DFFDFF; color: #1B2F3A; border: none; padding: 15px 30px; border-radius: 8px; font-size: 16px; font-weight: 700; cursor: pointer; width: 100%; }\n  </style>\n  <div class='ysi-thankyou-container ysi-template-64 yslg-page yslg-page-1'>\n    <h2 class='ysi-thankyou-title'>CONGRATULATIONS!</h2>\n    <p class='ysi-win-msg'></p>\n    <p style='font-size: 16px; color: #94a3b8;'>Your exclusive discount code is ready:</p>\n    <div class='ysi-coupon-box'>\n      <span class='ysi-coupon-code'>SAVE20NOW</span>\n    </div>\n    <button class='ysi-back-btn' onclick=\"jQuery(this).closest('.ysleadgen-popup').fadeOut();\">CLAIM DISCOUNT</button>\n  </div>",
              "name": "Main Page"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-65",
      "category": "Gamification",
      "image": "Litegreenwheel.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "  <style>\n    * { box-sizing: border-box; }\n    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap');\n\n    div.ysi-template-65.ysi-spin-container {\n      max-width: 1050px !important;\n      width: 95% !important;\n      margin: 40px auto !important;\n      background: #F8FFDE;\n      border-radius: 0px !important;\n      box-shadow: 0 15px 40px rgba(0,0,0,0.1) !important;\n      display: flex !important;\n      flex-direction: row !important;\n      flex-wrap: nowrap !important;\n      position: relative !important;\n      overflow: hidden !important;\n      min-height: 450px !important;\n      font-family: 'Poppins', sans-serif !important;\n    }\n\n    .ysi-template-65 .ysi-content-section {\n      flex: 1 !important;\n      padding: 30px 20px 30px 40px !important;\n      display: flex !important;\n      flex-direction: row !important;\n      align-items: center !important;\n      position: relative !important;\n      z-index: 5 !important;\n      min-width: 0 !important;\n    }\n\n    .ysi-template-65 .ysi-boy-image {\n      width: 400px;\n      height: auto;\n      margin-right: 10px;\n      z-index: 2;\n      align-self: flex-end;\n    }\n\n    .ysi-template-65 .ysi-text-form-wrapper {\n      flex: 1;\n      text-align: left;\n    }\n\n    .ysi-template-65 .ysi-spin-right-side {\n      flex: 0 0 500px !important;\n      width: 500px !important;\n      display: flex !important;\n      justify-content: flex-end !important;\n      align-items: center !important;\n      position: relative !important;\n    }\n\n    .ysi-template-65 .ysi-wheel-wrapper-65 {\n      position: absolute !important;\n      right: -120px !important;\n      top: 50% !important;\n      transform: translateY(-50%) !important;\n      width: 400px !important;\n      height: 400px !important;\n      display: flex !important;\n      align-items: center !important;\n      justify-content: center !important;\n      flex-shrink: 0 !important;\n      z-index: 10 !important;\n    }\n\n    .ysi-template-65 .ysi-dots-65 {\n      position: absolute !important;\n      width: 420px !important;\n      height: 420px !important;\n      border-radius: 50% !important;\n      border: 12px solid #A8C838 !important;\n      background-image: radial-gradient(circle, white 4px, transparent 5px) !important;\n      background-size: 35px 35px !important;\n      background-position: center !important;\n      z-index: 2 !important;\n    }\n\n    .ysi-template-65 .ysi-wheel-65 {\n      width: 100% !important;\n      height: 100% !important;\n      border-radius: 50% !important;\n      position: relative !important;\n      overflow: hidden !important;\n      transition: transform 5s cubic-bezier(0.15, 0, 0.15, 1);\n      z-index: 3 !important;\n      background: conic-gradient(\n        #A8C838 0deg 90deg,\n        #F8FFDE 90deg 180deg,\n        #A8C838 180deg 270deg,\n        #F8FFDE 270deg 360deg\n      );\n      border: 2px solid #A8C838 !important;\n      transform: rotate(0deg);\n    }\n\n    .ysi-template-65 .ysi-wheel-label-65 {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      width: 42%;\n      height: 30px;\n      transform-origin: left center;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-weight: 700;\n      font-size: 15px;\n      z-index: 99;\n    }\n\n    .ysi-template-65 .ysi-wheel-center-65 {\n      position: absolute;\n      width: 85px;\n      height: 85px;\n      background: #ffffff;\n      border-radius: 50%;\n      z-index: 10;\n      border: 12px solid #A8C838;\n      box-shadow: 0 0 10px rgba(0,0,0,0.1);\n    }\n\n    .ysi-template-65 .ysi-pointer-container {\n      position: absolute !important;\n      left: -20px !important;\n      top: 50% !important;\n      transform: translateY(-50%) rotate(180deg) !important;\n      z-index: 50 !important;\n    }\n\n    .ysi-template-65 .ysi-pointer-shape {\n      width: 42px;\n      height: 42px;\n      background: #A8C838;\n      border-radius: 50% 50% 50% 0;\n      transform: rotate(45deg);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border: 3px solid #ffffff;\n    }\n\n    .ysi-template-65 .ysi-pointer-dot {\n      width: 11px;\n      height: 11px;\n      background: #ffffff;\n      border-radius: 50%;\n    }\n\n    .ysi-template-65 .ysi-shock-title {\n      font-size: 44px;\n      font-weight: 800;\n      color: #000000;\n      line-height: 1.1;\n      margin: 0 0 15px 0;\n    }\n\n    .ysi-template-65 .ysi-sub-title {\n      font-size: 17px;\n      color: #555;\n      margin-bottom: 25px;\n      line-height: 1.4;\n    }\n\n    .ysi-template-65 .ysi-wheel-form input {\n      width: 100%;\n      padding: 15px 20px;\n      background: #ffffff;\n      border: 2px solid #A8C838;\n      border-radius: 8px;\n      font-size: 16px;\n      margin-bottom: 12px;\n      outline: none;\n      color: #000;\n      font-family: 'Poppins', sans-serif;\n    }\n\n    .ysi-template-65 .ysi-main-spin-btn {\n      background: #000000;\n      color: #ffffff;\n      border: none;\n      padding: 16px;\n      border-radius: 8px;\n      font-size: 17px;\n      font-weight: 700;\n      cursor: pointer;\n      width: 100%;\n      text-transform: uppercase;\n      letter-spacing: 1px;\n    }\n\n    .ysi-template-65 .ysi-close-btn {\n      position: absolute;\n      top: 10px !important;\n      right: 10px !important;\n      background: #000;\n      color: #fff;\n      border: none;\n      width: 30px;\n      height: 30px;\n      border-radius: 50%;\n      cursor: pointer;\n      z-index: 100;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    @media (max-width: 768px) {\n      .ysi-template-65.ysi-spin-container { flex-direction: column; min-height: auto; }\n      .ysi-template-65 .ysi-wheel-wrapper-65 { margin-left: 0; transform: scale(0.65); }\n      .ysi-template-65 .ysi-boy-image { width: 320px; }\n    }\n  </style>\n\n  <div class='ysi-spin-container yslg-page yslg-page-0 ysi-template-65'>\n    <button class='ysi-close-btn' data-gjs-type='close-button'>&times;</button>\n\n    <div class='ysi-content-section'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/Greenman.webp' class='ysi-boy-image' alt='Student' />\n      <div class='ysi-text-form-wrapper'>\n        <h2 class='ysi-shock-title'>Unlock Your<br>Learning Offer</h2>\n        <p class='ysi-sub-title'>Spin the wheel and get a special course discount</p>\n        <form class='ysi-wheel-form yslg-form' method='post'>\n          <input type='email' name='email' placeholder='Enter your email address' required />\n          <button type='submit' class='ysi-main-spin-btn'>SPIN NOW</button>\n        </form>\n      </div>\n    </div>\n\n    <div class='ysi-spin-right-side'>\n      <div class='ysi-wheel-wrapper-65'>\n         <div class='ysi-pointer-container ysi-pointer-right-65'>\n            <div class='ysi-pointer-shape'>\n              <div class='ysi-pointer-dot'></div>\n            </div>\n         </div>\n         <div class='ysi-dots-65'></div>\n         <div id='ysi-wheel-65' class='ysi-wheel-65' style='transform: rotate(0deg);'>\n            <div class='ysi-wheel-label-65' style='transform: rotate(45deg); color: #000000;'>10% off</div>\n            <div class='ysi-wheel-label-65' style='transform: rotate(135deg); color: #000000;'>Free 7-Day Trial</div>\n            <div class='ysi-wheel-label-65' style='transform: rotate(225deg); color: #000000;'>15% off</div>\n            <div class='ysi-wheel-label-65' style='transform: rotate(315deg); color: #000000;'>Extra Gift</div>\n        </div>\n        <div class='ysi-wheel-center-65'></div>\n      </div>\n    </div>\n  </div>",
              "name": "Main Page"
            }
          ]
        },
        {
          "name": "Thank You Page",
          "frames": [
            {
              "component": "  <style>\n    div.ysi-template-65.ysi-thankyou-container.yslg-page {\n      max-width: 600px !important;\n      width: 600px !important;\n      margin: 80px auto !important;\n      background: #F8FFDE !important;\n      border-radius: 12px !important;\n      box-shadow: 0 15px 40px rgba(0,0,0,0.1) !important;\n      padding: 50px 30px !important;\n      text-align: center !important;\n      position: relative !important;\n      color: #000 !important;\n      font-family: 'Poppins', sans-serif !important;\n    }\n    .ysi-template-65.ysi-thankyou-container.yslg-page .ysi-thankyou-title { font-size: 32px; font-weight: 800; color: #A8C838; margin-bottom: 10px; }\n    .ysi-win-msg { font-size: 18px; font-weight: 700; color: #A8C838; margin-bottom: 15px; }\n    .ysi-template-65.ysi-thankyou-container.yslg-page .ysi-coupon-box { background: #fff !important; border: 2px dashed #A8C838 !important; border-radius: 8px !important; padding: 25px !important; margin: 30px 0 !important; }\n    .ysi-template-65.ysi-thankyou-container.yslg-page .ysi-coupon-code { font-size: 32px; font-weight: 800; letter-spacing: 2px; }\n    .ysi-template-65.ysi-thankyou-container.yslg-page .ysi-back-btn { background: #000; color: #fff; border: none; padding: 15px 30px; border-radius: 8px; font-size: 16px; font-weight: 700; cursor: pointer; width: 100%; }\n  </style>\n  <div class='ysi-thankyou-container ysi-template-65 yslg-page yslg-page-1'>\n    <h2 class='ysi-thankyou-title'>CONGRATULATIONS!</h2>\n    <p class='ysi-win-msg'></p>\n    <p>Your special discount code is ready:</p>\n    <div class='ysi-coupon-box'>\n      <span class='ysi-coupon-code'>LEARN2026</span>\n    </div>\n    <button class='ysi-back-btn' onclick=\"jQuery(this).closest('.ysleadgen-popup').fadeOut();\">CLAIM OFFER</button>\n  </div>",
              "name": "Main Page"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-66",
      "category": "Slide-in",
      "image": "black-friday-popup.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "<style>\n  /* Position bottom-right in editor canvas */\n  .bf-popup-67 {\n    position: fixed !important;\n    bottom: 20px !important;\n    right: 20px !important;\n    margin: 0 !important;\n    z-index: 9999;\n  }\n  /* Reset positioned flow inside frontend wrapper */\n  .ysleadgen-popup .bf-popup-67,\n  .ysi-popup .bf-popup-67 {\n    position: relative !important;\n    bottom: auto !important;\n    right: auto !important;\n  }\n  .bf-tag-container {\n    width: 120px;\n    height: 120px;\n    margin: 0 auto 15px;\n  }\n  .bf-tag-img {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n  }\n  @media (max-width: 768px) {\n    .bf-popup-67 {\n      max-width: 320px !important;\n      padding: 20px 15px !important;\n    }\n    .bf-title-67 {\n      font-size: 24px !important;\n    }\n  }\n</style>\n\n<form data-gjs-type='form' class='yslg-page yslg-page-0 bf-popup-67 yslg-form' method='post' style='max-width:380px; width:100%; background:#1a1a1a; border-radius:12px; padding:35px 25px; text-align:center; box-shadow:0 15px 35px rgba(0,0,0,0.5); font-family:\"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;'>\n\n  \n  <button class='ysi-close-btn' data-gjs-type='close-button' style='position:absolute; top:12px; right:12px; background:transparent; border:none; color:#777; font-size:24px; cursor:pointer; line-height:1;'>&times;</button>\n\n  \n  <h2 class='bf-title-67' style='font-size:32px; color:#ffffff; margin:0 0 15px 0; font-weight:700;'>Are You Leaving ?</h2>\n\n  \n  <p style='font-size:15px; color:#ffffff; margin:0 auto 20px auto; line-height:1.4; max-width:280px;'>Complete your purchase now and get a special Black Friday 30% discount</p>\n\n  \n  <div class='bf-tag-container'>\n    <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/discount-tag-icon.webp' class='bf-tag-img' alt='Discount Tag' onerror=\"this.src='https://img.icons8.com/color/144/sale-price-tag.png';\">\n  </div>\n\n  \n  <div style='margin-top:20px;'>\n    <input type='email' placeholder='Enter Your Email Address' required style='width:100%; padding:14px; border:none; border-radius:6px; margin-bottom:15px; font-size:14px; background:#ffffff; color:#333; box-sizing:border-box;'>\n\n    <button type='submit' style='width:100%; padding:14px; background:#ff0000; color:#fff; font-size:16px; font-weight:800; border:none; border-radius:6px; cursor:pointer; text-transform:uppercase; letter-spacing:0.5px; transition: background 0.2s;'>Get Discount Code</button>\n  </div>\n\n</form>"
            }
          ]
        }
      ],
      "type": [
        "Black Friday"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-67",
      "category": "Slide-in",
      "image": "slide-in-gift.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "<style>\n  /* Position bottom-right in editor canvas */\n  .slide-popup-63 {\n    position: fixed !important;\n    bottom: 20px !important;\n    right: 20px !important;\n    margin: 0 !important;\n  }\n  .ysleadgen-popup .slide-popup-63,\n  .ysi-popup .slide-popup-63 {\n    position: relative !important;\n    bottom: auto !important;\n    right: auto !important;\n  }\n  @media (max-width: 768px) {\n    .slide-popup-63 {\n      padding: 24px 20px !important;\n      margin: 0 !important;\n    }\n  }\n</style>\n\n<form data-gjs-type='form' class='yslg-page yslg-page-0 slide-popup-63 yslg-form' method='post' style='max-width:380px; width:100%; background:#ffffff; border-radius:12px; border-top: 6px solid #4ade80; padding:30px 24px; text-align:center; box-shadow:0 15px 35px rgba(0,0,0,0.15); font-family:Helvetica, sans-serif; display:flex; flex-direction:column; align-items:center;'>\n\n  \n  <button class='ysi-close-btn' data-gjs-type='close-button' style='position:absolute; top:12px; right:12px; width:28px; height:28px; border-radius:50%; border:none; background:#f1f5f9; color:#64748b; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center;'>&times;</button>\n\n  <div data-gjs-type='column' style='margin-bottom: 15px; width:100%;'>\n    <h3 style='margin:0; font-size:20px; color:#0f172a; font-weight:700;'>Special Gift Unlocked!</h3>\n  </div>\n\n  <p style='font-size:15px; color:#475569; margin:0 0 20px 0; line-height:1.5; width:100%;'>Sign up for our newsletter today and get a <strong>free shipping</strong> voucher delivered instantly to your inbox.</p>\n\n  <input type='email' placeholder='Enter your email...' required style='width:100%; padding:12px 14px; border:1px solid #cbd5e1; border-radius:6px; margin-bottom:12px; font-size:14px; box-sizing:border-box; text-align:center;'>\n  <button type='submit' style='width:100%; padding:14px; background:#0f172a; color:#fff; font-size:15px; font-weight:600; border:none; border-radius:6px; cursor:pointer;'>Claim My Free Shipping</button>\n\n</form>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation",
        "Newsletter Signup"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-68",
      "category": "Slide-in",
      "image": "slide-in-notification.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "<style>\n  .slide-popup-69 {\n    position: fixed !important;\n    bottom: 20px !important;\n    right: 20px !important;\n    margin: 0 !important;\n    z-index: 1000;\n  }\n  .ysleadgen-popup .slide-popup-69,\n  .ysi-popup .slide-popup-69 {\n    position: relative !important;\n    bottom: auto !important;\n    right: auto !important;\n  }\n  .ysi-flash-title-wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 15px;\n    margin-bottom: 20px;\n  }\n  .ysi-flash-line {\n    height: 4px;\n    width: 60px;\n    background-color: #ff6600;\n    border-radius: 2px;\n  }\n</style>\n\n<form data-gjs-type='form' class='yslg-page yslg-page-0 slide-popup-69 yslg-form' method='post' style='max-width:480px; width:100%; background:#fffaf0; border-radius:15px; padding:30px; text-align:center; box-shadow:0 15px 30px rgba(0,0,0,0.1); font-family: Helvetica, Arial, sans-serif; display:flex; flex-direction:column; position:relative;'>\n\n  \n  <button class='ysi-close-btn' data-gjs-type='close-button' style='position:absolute; top:12px; right:12px; width:28px; height:28px; border:1px solid #333; border-radius:50%; background:transparent; color:#333; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center;'>&times;</button>\n\n  \n  <div class='ysi-flash-title-wrapper'>\n    <div class='ysi-flash-line'></div>\n    <h4 style='margin:0; font-size:22px; color:#ff6600; font-weight:900; text-transform:uppercase; letter-spacing:1px;'>Flash Sale Ending</h4>\n    <div class='ysi-flash-line'></div>\n  </div>\n\n  \n  <div style='margin-bottom:25px;'>\n    <p style='margin:0; font-size:24px; color:#000; font-weight:700;'>\n      Get <span style='font-size:42px; vertical-align:middle;'>40</span> <span style='font-size:18px; display:inline-flex; flex-direction:column; line-height:1; vertical-align:middle;'>% <br> OFF</span> on all electronics\n    </p>\n  </div>\n\n  \n  <div style='width:90%; margin:0 auto;'>\n    <input type='email' placeholder='Your Email' required style='width:100%; padding:14px 15px; border:1.5px solid #ffccaa; border-radius:8px; font-size:16px; outline:none; box-sizing:border-box; margin-bottom:15px; background:#fff;'>\n    \n    <button type='submit' style='width:100%; padding:14px; background:#ff6600; color:#fff; font-size:18px; font-weight:800; border:none; border-radius:8px; cursor:pointer; text-transform:uppercase; letter-spacing:1px; transition: 0.3s;'>Reveal Code</button>\n  </div>\n\n</form>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "Electronics",
        "E-commerce"
      ]
    },
    {
      "id": "template-69",
      "category": "Slide-in",
      "image": "wellness-journey.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "  <style>\n    * { box-sizing: border-box; }\n    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Poppins:wght@400;600&display=swap');\n\n    .slide-popup-70 {\n      position: fixed !important;\n      bottom: 20px !important;\n      right: 20px !important;\n      margin: 0 !important;\n      z-index: 9999;\n    }\n    .ysleadgen-popup .slide-popup-70,\n    .ysi-popup .slide-popup-70 {\n      position: relative !important;\n      bottom: auto !important;\n      right: auto !important;\n    }\n\n    .ysi-template-67.ysi-wellness-container {\n      max-width: 500px;\n      width: 95%;\n      margin: 40px auto;\n      background: #ffffff;\n      border-radius: 12px;\n      box-shadow: 0 20px 50px rgba(0,0,0,0.2);\n      position: relative;\n      overflow: hidden;\n      font-family: 'Poppins', sans-serif;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .ysi-template-67 .ysi-top-content {\n      background: #7A7D56; /* Dark olive green from image */\n      padding: 40px 30px;\n      text-align: center;\n      color: #ffffff;\n      position: relative;\n    }\n\n    .ysi-template-67 .ysi-close-btn {\n      position: absolute;\n      top: 15px;\n      right: 25px;\n      background: transparent;\n      color: #000;\n      border: none;\n      font-size: 24px;\n      cursor: pointer;\n      z-index: 10;\n    }\n\n    .ysi-template-67 .ysi-main-title {\n      font-family: 'Montserrat', sans-serif;\n      font-size: 28px;\n      font-weight: 800;\n      margin-bottom: 20px;\n      line-height: 1.2;\n    }\n\n    .ysi-template-67 .ysi-description {\n      font-size: 18px;\n      line-height: 1.5;\n      margin-bottom: 25px;\n      opacity: 0.9;\n    }\n\n    .ysi-template-67 .ysi-download-btn-wrapper {\n      display: inline-flex;\n      align-items: center;\n      background: #2D4356;\n      border-radius: 4px;\n      overflow: hidden;\n      cursor: pointer;\n      transition: transform 0.2s;\n      text-decoration: none;\n    }\n\n    .ysi-template-67 .ysi-download-btn-wrapper:hover {\n      transform: translateY(-2px);\n    }\n\n    .ysi-template-67 .ysi-btn-text {\n      padding: 12px 20px;\n      font-weight: 600;\n      font-size: 18px;\n      color: #ffffff;\n    }\n\n    .ysi-template-67 .ysi-btn-icon {\n      background: #ffffff;\n      padding: 12px 15px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    /* Live site sanitization strips <svg>; use a safe text arrow instead */\n    .ysi-template-67 .ysi-btn-icon span {\n      font-size: 20px;\n      font-weight: 900;\n      color: #2D4356;\n      line-height: 1;\n      display: inline-block;\n    }\n\n    .ysi-template-67 .ysi-no-thanks {\n      display: block;\n      margin-top: 15px;\n      font-size: 14px;\n      color: #ffffff;\n      opacity: 0.7;\n      text-decoration: none;\n      cursor: pointer;\n    }\n\n    .ysi-template-67 .ysi-image-section {\n      width: 100%;\n      height: 350px;\n      overflow: hidden;\n    }\n\n    .ysi-template-67 .ysi-hero-image {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n    }\n\n    @media (max-width: 480px) {\n      .ysi-template-67 .ysi-main-title { font-size: 24px; }\n      .ysi-template-67 .ysi-image-section { height: 250px; }\n    }\n  </style>\n\n  <div class='ysi-wellness-container ysi-template-67 slide-popup-70'>\n    <button class='ysi-close-btn' data-gjs-type='close-button'>&times;</button>\n\n    <div class='ysi-top-content'>\n      <h2 class='ysi-main-title'>Start Your Wellness Journey</h2>\n      <p class='ysi-description'>Get your free eBook to boost health and happiness.</p>\n      \n      <div class='ysi-download-btn-wrapper'>\n        <div class='ysi-btn-text'>Download Now</div>\n        <div class='ysi-btn-icon'>\n          <span aria-hidden='true'>\u2193</span>\n        </div>\n      </div>\n\n      <a class='ysi-no-thanks' onclick=\"jQuery(this).closest('.ysleadgen-popup').fadeOut();\">No Thanks</a>\n    </div>\n\n    <div class='ysi-image-section'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/baggywomen.webp' class='ysi-hero-image' alt='Wellness Journey' />\n    </div>\n  </div>",
              "name": "Main Page"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "Fashion",
        "E-commerce"
      ]
    },
    {
      "id": "template-70",
      "category": "Slide-in",
      "image": "vip-growth.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "  <style>\n    * { box-sizing: border-box; }\n    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700;800&family=Poppins:wght@400;600&display=swap');\n\n    .slide-popup-71 {\n      position: fixed !important;\n      bottom: 20px !important;\n      right: 20px !important;\n      margin: 0 !important;\n      z-index: 9999;\n    }\n    .ysleadgen-popup .slide-popup-71,\n    .ysi-popup .slide-popup-71 {\n      position: relative !important;\n      bottom: auto !important;\n      right: auto !important;\n    }\n\n    .ysi-template-68.ysi-vip-container {\n      max-width: 700px;\n      width: 95%;\n      margin: 40px auto;\n      background: linear-gradient(135deg, #006054 0%, #003d33 100%);\n      border-radius: 20px;\n      box-shadow: 0 25px 60px rgba(0,0,0,0.3);\n      padding: 40px 40px 30px 40px; /* Reduced vertical padding */\n      text-align: center;\n      position: relative;\n      font-family: 'Montserrat', sans-serif;\n      color: #ffffff;\n    }\n\n    .ysi-template-68 .ysi-close-btn {\n      position: absolute;\n      top: 20px;\n      right: 40px;\n      background: rgba(255,255,255,0.1);\n      color: #ffffff;\n      border: none;\n      width: 32px;\n      height: 32px;\n      border-radius: 50%;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      opacity: 0.6;\n      transition: 0.3s;\n    }\n\n    .ysi-template-68 .ysi-close-btn:hover { opacity: 1; background: rgba(255,255,255,0.2); }\n\n    .ysi-template-68 .ysi-crown-icon {\n      margin-bottom: 10px; /* Reduced margin */\n    }\n\n    .ysi-template-68 .ysi-crown-icon svg {\n      width: 45px; /* Slightly reduced size */\n      height: 45px; /* Slightly reduced size */\n      fill: #e1ff00; /* Lime yellow crown */\n    }\n\n    .ysi-template-68 .ysi-pre-title {\n      font-size: 13px; /* Slightly reduced font size */\n      letter-spacing: 3px;\n      font-weight: 500;\n      margin-bottom: 15px; /* Reduced margin */\n      opacity: 0.9;\n    }\n\n    .ysi-template-68 .ysi-main-headline {\n      font-size: 28px; /* Reduced font size */\n      font-weight: 700;\n      line-height: 1.3; /* Tighter line height */\n      margin-bottom: 30px; /* Reduced margin */\n      max-width: 550px;\n      margin-left: auto;\n      margin-right: auto;\n    }\n\n    .ysi-template-68 .ysi-vip-btn {\n      display: inline-block;\n      background: #e1ff00; /* Vibrant lime yellow */\n      color: #003d33;\n      padding: 15px 45px; /* Reduced padding */\n      border-radius: 40px;\n      font-size: 20px; /* Slightly reduced font size */\n      font-weight: 800;\n      text-decoration: none;\n      margin-bottom: 20px; /* Reduced margin */\n      transition: all 0.3s ease;\n      box-shadow: 0 10px 20px rgba(0,0,0,0.15);\n    }\n\n    .ysi-template-68 .ysi-vip-btn:hover {\n      transform: scale(1.05);\n      box-shadow: 0 15px 30px rgba(0,0,0,0.25);\n    }\n\n    .ysi-template-68 .ysi-footer-link {\n      display: block;\n      color: #ffffff;\n      opacity: 0.7;\n      font-size: 15px; /* Slightly reduced font size */\n      text-decoration: underline;\n      cursor: pointer;\n      transition: 0.3s;\n    }\n\n    .ysi-template-68 .ysi-footer-link:hover { opacity: 1; }\n\n    @media (max-width: 600px) {\n      .ysi-template-68.ysi-vip-container { padding: 30px 20px 20px 20px; }\n      .ysi-template-68 .ysi-main-headline { font-size: 22px; }\n      .ysi-template-68 .ysi-vip-btn { padding: 12px 25px; font-size: 17px; }\n      .ysi-template-66 .ysi-crown-icon svg { width: 40px; height: 40px; }\n    }\n  </style>\n\n  <div class='ysi-vip-container ysi-template-68 slide-popup-71'>\n    <button class='ysi-close-btn' data-gjs-type='close-button'>&times;</button>\n\n    <div class='ysi-crown-icon'>\n      <svg viewBox='0 0 24 24'><path d='M5 16L3 5L8.5 10L12 4L15.5 10L21 5L19 16H5M19 19C19 19.6 18.6 20 18 20H6C5.4 20 5 19.6 5 19V18H19V19Z'/></svg>\n    </div>\n\n    <div class='ysi-pre-title'>VIP GROWTH STARTS HERE</div>\n\n    <h2 class='ysi-main-headline'>Join our exclusive webinar and access content designed for real transformation.</h2>\n\n    <a href='#' class='ysi-vip-btn'>Claim VIP Access</a>\n\n    <span class='ysi-footer-link' onclick=\"jQuery(this).closest('.ysleadgen-popup').fadeOut();\">No thanks, maybe later</span>\n  </div>",
              "name": "Main Page"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-71",
      "category": "Full Screen",
      "image": "one-last-step-fullscreen.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "<style>\n\n  /* FULLSCREEN ROOT (same as template-65) */\n  .ysleadgen-root.ysleadgen-fullscreen {\n    position: fixed !important;\n    top: 0 !important;\n    left: 0 !important;\n    width: 100vw !important;\n    height: 100vh !important;\n    max-width: none !important;\n    max-height: none !important;\n    transform: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    z-index: 2147483647 !important;\n  }\n\n  .yslg-page {\n    width: 100%;\n    height: 100%;\n  }\n\n  .fs-container {\n    width: 100%;\n    height: 100%;\n    min-height: 100vh;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: #eef1f5;\n    font-family: Arial, sans-serif;\n  }\n\n  .fs-center-box {\n    text-align: center;\n    max-width: 420px;\n    width: 90%;\n  }\n\n  .fs-icon {\n    width: 180px;\n    height: 180px;\n    border-radius: 50%;\n    background: #ff7a00;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0 auto 25px;\n  }\n\n  .fs-icon img {\n    width: 90px;\n  }\n\n  .fs-title {\n    font-size: 34px;\n    font-weight: 600;\n    margin-bottom: 10px;\n    color: #000;\n  }\n\n  .fs-desc {\n    font-size: 16px;\n    color: #666;\n    margin-bottom: 25px;\n  }\n\n  .fs-input {\n    width: 100%;\n    padding: 15px;\n    border-radius: 12px;\n    border: 1px solid #ccc;\n    font-size: 16px;\n    margin-bottom: 18px;\n  }\n\n  .fs-submit {\n    width: 100%;\n    padding: 15px;\n    background: #ff7a00;\n    color: #fff;\n    border: none;\n    border-radius: 12px;\n    font-size: 18px;\n    cursor: pointer;\n    box-shadow: 0 6px 15px rgba(255,122,0,0.4);\n  }\n\n  .fs-submit:hover {\n    background: #e96d00;\n  }\n\n  .fs-skip {\n    margin-top: 18px;\n    font-size: 14px;\n    color: #888;\n    cursor: pointer;\n  }\n\n  .close-btn {\n    position: absolute !important;\n    top: 20px !important;\n    right: 20px !important;\n    width: 40px !important;\n    height: 40px !important;\n    border-radius: 50% !important;\n    background: #fff !important;\n    border: 1px solid #ddd !important;\n    font-size: 20px !important;\n    cursor: pointer !important;\n  }\n\n</style>\n\n<div data-gjs-type='column' class=\"fs-container yslg-page yslg-page-0\">\n  <button class=\"close-btn ysi-close-btn\">&times;</button>\n\n  <div class=\"fs-center-box\">\n    <div class=\"fs-icon\">\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/Mail.webp' />\n    </div>\n\n    <h1 class=\"fs-title\">One Last Step</h1>\n    <p class=\"fs-desc\">Unlock your website subscriber growth plan instantly</p>\n\n    <form class=\"yslg-form\">\n      <input type=\"email\" class=\"fs-input\" placeholder=\"Enter Your Email...\" required />\n      <button class=\"fs-submit\">Show Me How</button>\n    </form>\n\n    <div class=\"fs-skip\" data-action=\"close\">Maybe Later</div>\n  </div>\n</div>\n\n<script>\n(function($){\n  $('.yslg-form').on('submit', function(e){\n    e.preventDefault();\n    var $popup = $(this).closest('.ysleadgen-popup');\n    $popup.find('.yslg-page-0').hide();\n    $popup.find('.yslg-page-1').show();\n  });\n\n  $('[data-action=\"close\"]').on('click', function(){\n    $(this).closest('.ysleadgen-popup').find('.ysi-close-btn').click();\n  });\n})(jQuery);\n</script>"
            }
          ]
        },
        {
          "name": "Thank You Page",
          "frames": [
            {
              "component": "<div class=\"fs-container yslg-page yslg-page-1\">\n  <button class=\"close-btn ysi-close-btn\">&times;</button>\n\n  <div style=\"text-align:center;\">\n    <h1 style=\"font-size:32px; margin-bottom:15px;\">You're All Set \ud83c\udf89</h1>\n    <p style=\"color:#666; margin-bottom:25px;\">Check your inbox for your growth plan.</p>\n    <button class=\"fs-submit fs-close-final\">Continue</button>\n  </div>\n</div>\n\n<script>\n(function($){\n  $('.fs-close-final').on('click', function(){\n    $(this).closest('.ysleadgen-popup').find('.ysi-close-btn').click();\n  });\n})(jQuery);\n</script>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation",
        "Newsletter Signup"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-72",
      "category": "Full Screen",
      "image": "welcome-offer-fullscreen.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "<style>\n\n  /* FULLSCREEN ROOT (STANDARDIZED) */\n  .ysleadgen-root.ysleadgen-fullscreen {\n    position: fixed !important;\n    top: 0 !important;\n    left: 0 !important;\n    width: 100vw !important;\n    height: 100vh !important;\n    max-width: none !important;\n    max-height: none !important;\n    transform: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    z-index: 2147483647 !important;\n  }\n\n  .yslg-page {\n    width: 100%;\n    height: 100%;\n  }\n\n  .fs-container {\n    width: 100%;\n    height: 100%;\n    min-height: 100vh;\n    display: flex;\n    background: #f3f3f3;\n    font-family: Arial, sans-serif;\n  }\n\n  .fs-left {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: #eae6df;\n  }\n\n  .fs-left img {\n    width: 90%;\n    height: auto;\n    object-fit: contain;\n  }\n\n  .fs-right {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    padding: 40px;\n    text-align: center;\n  }\n\n  .fs-title {\n    font-size: 48px;\n    font-weight: 800;\n    letter-spacing: 3px;\n    margin-bottom: 30px;\n  }\n\n  .fs-offer-box {\n    border: 2px solid #000;\n    padding: 25px 30px;\n    margin-bottom: 30px;\n  }\n\n  .fs-offer-box h3 {\n    margin: 0;\n    font-size: 18px;\n    letter-spacing: 2px;\n  }\n\n  .fs-offer-box h1 {\n    margin: 10px 0;\n    font-size: 42px;\n  }\n\n  .fs-offer-box p {\n    margin: 0;\n    font-size: 14px;\n  }\n\n  .fs-input {\n    width: 100%;\n    max-width: 420px;\n    padding: 14px;\n    margin-bottom: 15px;\n    border-radius: 10px;\n    border: 1px solid #bbb;\n    font-size: 15px;\n  }\n\n  .fs-submit {\n    margin-top: 15px;\n    background: #000;\n    color: #fff;\n    padding: 14px 30px;\n    border-radius: 10px;\n    font-size: 16px;\n    border: none;\n    cursor: pointer;\n  }\n\n  .fs-submit:hover {\n    background: #222;\n  }\n\n  .close-btn {\n    position: absolute !important;\n    top: 20px !important;\n    right: 20px !important;\n    width: 40px !important;\n    height: 40px !important;\n    border-radius: 50% !important;\n    background: #fff !important;\n    border: 1px solid #ccc !important;\n    font-size: 20px !important;\n    cursor: pointer !important;\n    z-index: 10;\n  }\n\n  @media (max-width: 900px) {\n    .fs-container {\n      flex-direction: column;\n    }\n\n    .fs-left {\n      display: none;\n    }\n\n    .fs-title {\n      font-size: 32px;\n    }\n  }\n\n</style>\n\n<div class=\"fs-container yslg-page yslg-page-0\">\n\n  <button class=\"close-btn ysi-close-btn\">&times;</button>\n\n  <div class=\"fs-left\">\n    <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/fashion-bag.webp' />\n  </div>\n\n  <div data-gjs-type='column' class=\"fs-right\">\n    <div class=\"fs-title\">WELCOME</div>\n\n    <div class=\"fs-offer-box\">\n      <h3>ENJOY</h3>\n      <h1>$15 OFF*</h1>\n      <p>YOUR ENTIRE PURCHASE</p>\n    </div>\n\n    <form class=\"yslg-form\" style=\"width:100%; display:flex; flex-direction:column; align-items:center;\">\n      <input type=\"text\" class=\"fs-input\" placeholder=\"Enter Your Name...\" required />\n      <input type=\"email\" class=\"fs-input\" placeholder=\"Enter Your Email...\" required />\n      <button class=\"fs-submit\">Claim My $15 Off \u00bb</button>\n    </form>\n\n  </div>\n</div>\n\n<script>\n(function($){\n  $('.yslg-form').on('submit', function(e){\n    e.preventDefault();\n    var $popup = $(this).closest('.ysleadgen-popup');\n    $popup.find('.yslg-page-0').hide();\n    $popup.find('.yslg-page-1').show();\n  });\n})(jQuery);\n</script>"
            }
          ]
        },
        {
          "name": "Thank You Page",
          "frames": [
            {
              "component": "<div class=\"fs-container yslg-page yslg-page-1\" style=\"display:flex; align-items:center; justify-content:center;\">\n\n  <button class=\"close-btn ysi-close-btn\">&times;</button>\n\n  <div style=\"text-align:center;\">\n    <h1 style=\"font-size:32px; margin-bottom:15px;\">Success \ud83c\udf89</h1>\n    <p style=\"color:#666; margin-bottom:25px;\">Your discount code is on the way!</p>\n    <button class=\"fs-submit fs-close-final\">Continue Shopping</button>\n  </div>\n\n</div>\n\n<script>\n(function($){\n  $('.fs-close-final').on('click', function(){\n    $(this).closest('.ysleadgen-popup').find('.ysi-close-btn').click();\n  });\n})(jQuery);\n</script>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "Fashion",
        "E-commerce"
      ]
    },
    {
      "id": "template-73",
      "category": "Full Screen",
      "image": "newsletter-minimal-fullscreen.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "<style>\n   .ysleadgen-root.ysleadgen-fullscreen {\n    position: fixed !important;\n    top: 0 !important;\n    left: 0 !important;\n    width: 100vw !important;\n    height: 100vh !important;\n    max-width: none !important;\n    max-height: none !important;\n    transform: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    z-index: 2147483647 !important;\n  }\n\n  .fs-container {\n    width: 100%;\n    height: 100%;\n    min-height: 100vh;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    overflow: auto;\n    background-color: #dbe6b8;\n    font-family: Arial, sans-serif;\n  }\n\n  .fs-box {\n    max-width: 520px;\n    width: 90%;\n    text-align: left;\n  }\n\n  .fs-dots {\n    margin-bottom: 20px;\n  }\n\n  .fs-dots span {\n    display: inline-block;\n    width: 8px;\n    height: 8px;\n    background: #1e40af;\n    border-radius: 50%;\n    margin-right: 6px;\n  }\n\n  .fs-small {\n    font-size: 16px;\n    margin-bottom: 10px;\n  }\n\n  .fs-title {\n    font-size: 28px;\n    line-height: 1.4;\n    margin-bottom: 30px;\n  }\n\n  .fs-title span {\n    color: #1e40af;\n    font-weight: bold;\n  }\n\n  .fs-input {\n    width: 100%;\n    border: none;\n    border-bottom: 1px solid #555;\n    background-color: #dbe6b8;    padding: 12px 5px;\n    margin-bottom: 25px;\n    font-size: 16px;\n  }\n\n  .fs-input:focus {\n    outline: none;\n    border-color: #000;\n  }\n\n  .fs-submit {\n    width: 100%;\n    border: 2px solid #000;\n    background: transparent;\n    padding: 14px;\n    font-size: 16px;\n    cursor: pointer;\n    margin-top: 10px;\n  }\n\n  .fs-submit:hover {\n    background: #000;\n    color: #fff;\n  }\n\n  .fs-note {\n    font-size: 12px;\n    color: #000;\n    margin-top: 12px;\n  }\n\n  .close-btn {\n    position: absolute !important;\n    top: 20px !important;\n    right: 20px !important;\n    width: 36px !important;\n    height: 36px !important;\n    border-radius: 50% !important;\n    background: transparent !important;\n    border: 1px solid #000 !important;\n    font-size: 18px !important;\n    cursor: pointer !important;\n    z-index: 100 !important;\n  }\n</style>\n\n<div data-gjs-type='column' class=\"fs-container yslg-page yslg-page-0\">\n\n  <button class=\"close-btn ysi-close-btn\" data-gjs-type=\"close-button\">&times;</button>\n\n  <div class=\"fs-box\">\n\n    <div class=\"fs-dots\">\n      <span></span><span></span><span></span>\n    </div>\n\n    <div class=\"fs-small\">Improve your customer experience.</div>\n\n    <div class=\"fs-title\">\n      Join our <span>weekly newsletter</span> for simple, practical customer experience tips.\n    </div>\n\n    <form class=\"yslg-form\" method=\"post\">\n      <input type=\"text\" name=\"name\" class=\"fs-input\" placeholder=\"Enter Your Name here...\" required />\n      <input type=\"email\" name=\"email\" class=\"fs-input\" placeholder=\"Enter Your email here...\" required />\n      <button type=\"submit\" class=\"fs-submit\">SUBSCRIBE</button>\n    </form>\n\n    <div class=\"fs-note\">We respect your privacy. Your information will never be shared or sold.</div>\n\n  </div>\n</div>\n\n<script>\n(function($){\n  $(document).ready(function(){\n    $('.yslg-form').on('submit', function(e){\n      e.preventDefault();\n      var $popup = $(this).closest('.ysleadgen-popup');\n      $popup.find('.yslg-page-0').hide();\n      $popup.find('.yslg-page-1').show();\n    });\n  });\n})(jQuery);\n</script>"
            }
          ]
        },
        {
          "name": "Thank You Page",
          "frames": [
            {
              "component": "<style>\n  .ysleadgen-root.ysleadgen-fullscreen {\n    width: 100vw !important;\n    height: 100vh !important;\n  }\n</style>\n\n<div class=\"fs-container yslg-page yslg-page-1\">\n\n  <button class=\"close-btn ysi-close-btn\" data-gjs-type=\"close-button\">&times;</button>\n\n  <div style=\"text-align:center; max-width:400px;\">\n    <h1 style=\"font-size:28px; margin-bottom:15px;\">You're Subscribed \ud83c\udf89</h1>\n    <p style=\"color:#555; margin-bottom:20px;\">Thanks for joining our newsletter.</p>\n    <button class=\"fs-submit fs-close-final\">Continue</button>\n  </div>\n\n</div>\n\n<script>\n(function($){\n  $(document).ready(function(){\n    $('.fs-close-final').on('click', function(){\n      $(this).closest('.ysleadgen-popup').find('.ysi-close-btn').click();\n    });\n  });\n})(jQuery);\n</script>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation",
        "Newsletter Signup"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-74",
      "category": "Full Screen",
      "image": "help-call-fullscreen.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "<style>\n  .ysleadgen-root.ysleadgen-fullscreen {\n    position: fixed !important;\n    top: 0 !important;\n    left: 0 !important;\n    width: 100vw !important;\n    height: 100vh !important;\n    max-width: none !important;\n    max-height: none !important;\n    transform: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    z-index: 2147483647 !important;\n  }\n\n  .fs-container {\n    width: 100%;\n    height: 100%;\n    min-height: 100vh;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    overflow: auto;\n    background: #e6f4ea;\n    font-family: Arial, sans-serif;\n  }\n\n  .fs-card {\n    background: #f4f4f4;\n    border-radius: 30px;\n    padding: 40px 50px;\n    border: 4px solid #1aa334;\n    box-shadow: 0 20px 40px rgba(0,0,0,0.15);\n    text-align: center;\n    max-width: 600px;\n    width: 90%;\n  }\n\n  .fs-inner-box {\n    background: #f1e7a5;\n    border-radius: 20px;\n    padding: 20px;\n    margin-bottom: 30px;\n  }\n\n  .fs-title {\n    font-size: 28px;\n    font-weight: 700;\n    margin-bottom: 10px;\n  }\n\n  .fs-desc {\n    font-size: 18px;\n  }\n\n  .fs-call-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 12px;\n    background: #1aa334;\n    color: #fff;\n    font-size: 20px;\n    padding: 16px 28px;\n    border-radius: 12px;\n    text-decoration: none;\n    font-weight: 600;\n  }\n\n  .fs-call-btn:hover {\n    background: #148a2a;\n  }\n\n  .fs-call-icon {\n    font-size: 22px;\n  }\n\n  .close-btn {\n    position: absolute !important;\n    top: 20px !important;\n    right: 20px !important;\n    width: 36px !important;\n    height: 36px !important;\n    border-radius: 50% !important;\n    background: transparent !important;\n    border: 1px solid #333 !important;\n    font-size: 18px !important;\n    cursor: pointer !important;\n    z-index: 100 !important;\n  }\n</style>\n\n<div class=\"fs-container yslg-page yslg-page-0\">\n\n  <button class=\"close-btn ysi-close-btn\" data-gjs-type=\"close-button\">&times;</button>\n\n  <div data-gjs-type='column' class=\"fs-card\">\n\n    <div data-gjs-type='column' class=\"fs-inner-box\">\n      <div class=\"fs-title\">Need any help?</div>\n      <div class=\"fs-desc\">Give us a call \u2014 we're here for you.</div>\n    </div>\n\n    <a href=\"tel:+18023456763\" class=\"fs-call-btn\">\n      <span class=\"fs-call-icon\">\ud83d\udcde</span>\n      +802 345 6763\n    </a>\n\n  </div>\n\n</div>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-75",
      "category": "Full Screen",
      "image": "investing-guide-fullscreen.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "<style>\n  /* FULLSCREEN ROOT FIX */\n  .ysleadgen-root.ysleadgen-fullscreen {\n    position: fixed !important;\n    top: 0 !important;\n    left: 0 !important;\n    width: 100vw !important;\n    height: 100vh !important;\n    max-width: none !important;\n    max-height: none !important;\n    transform: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    z-index: 2147483647 !important;\n  }\n\n  .fs-container {\n    width: 100%;\n    height: 100%;\n    min-height: 100vh;\n    display: flex;\n    position: relative;\n    overflow: hidden;\n    background: #e5e5e5;\n    font-family: 'Arial', sans-serif;\n  }\n\n  .fs-left {\n    flex: 1;\n    background: #f5f5f5;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 40px;\n  }\n\n  .fs-left img {\n    width: 100%;\n    max-width: 500px;\n    height: auto;\n    object-fit: contain;\n  }\n\n  .fs-right {\n    flex: 1;\n    background: #000;\n    color: #fff;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    padding: 60px;\n  }\n\n  .fs-title-small {\n    letter-spacing: 6px;\n    font-size: 16px;\n    margin-bottom: 10px;\n    color: #ccc;\n  }\n\n  .fs-title {\n    font-size: 48px;\n    font-weight: 800;\n    line-height: 1.2;\n    margin-bottom: 20px;\n  }\n\n  .fs-desc {\n    font-size: 18px;\n    margin-bottom: 30px;\n    color: #ddd;\n  }\n\n  .fs-sub-desc {\n    font-size: 16px;\n    margin-bottom: 40px;\n    color: #bbb;\n  }\n\n  .fs-btn {\n    background: #2cc3d5;\n    color: #000;\n    padding: 16px 30px;\n    border-radius: 30px;\n    font-size: 18px;\n    border: none;\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    gap: 10px;\n    font-weight: 600;\n  }\n\n  .fs-btn:hover {\n    background: #22aab9;\n  }\n\n  .close-btn.ysi-close-btn{\n    position: absolute !important;\n    top: 25px !important;\n    right: 25px !important;\n    width: 40px !important;\n    height: 40px !important;\n    border-radius: 50% !important;\n    background-color: #000000 !important;\n    border: 1px solid #999 !important;\n    color: #ffffff !important;\n    font-size: 22px !important;\n    cursor: pointer !important;\n    z-index: 100 !important;\n  }\n\n  @media (max-width: 900px) {\n    .fs-container {\n      flex-direction: column;\n    }\n\n    .fs-left {\n      display: none;\n    }\n\n    .fs-right {\n      width: 100%;\n      padding: 40px 25px;\n      text-align: center;\n      align-items: center;\n    }\n\n    .fs-title {\n      font-size: 32px;\n    }\n  }\n</style>\n\n<div data-gjs-type='column' class=\"fs-container yslg-page yslg-page-0\">\n\n  <button class=\"close-btn ysi-close-btn\" data-gjs-type=\"close-button\">&times;</button>\n\n  <div class=\"fs-left\">\n    <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/investor.webp' alt=\"investor\" />\n  </div>\n\n  <form data-gjs-type='column' class=\"fs-right\">\n\n    <div class=\"fs-title-small\">FREE GUIDE TO</div>\n\n    <div class=\"fs-title\">START INVESTING</div>\n\n    <div class=\"fs-desc\">Join us and become a better investor.</div>\n\n    <div class=\"fs-sub-desc\">\n      Discover timeless tips and techniques from experienced investors.\n    </div>\n\n    <button class=\"fs-btn yslg-form\">\n      Download the Free Guide \u2b07\n    </button>\n\n  </form>\n\n</div>\n\n<script>\n(function($){\n  $(document).ready(function(){\n    $('.yslg-form').on('click', function(e){\n      e.preventDefault();\n      var $popup = $(this).closest('.ysleadgen-popup');\n      $popup.find('.yslg-page-0').hide();\n      $popup.find('.yslg-page-1').show();\n    });\n  });\n})(jQuery);\n</script>"
            }
          ]
        },
        {
          "name": "Thank You Page",
          "frames": [
            {
              "component": "<div class=\"fs-container yslg-page yslg-page-1\" style=\"display:flex; align-items:center; justify-content:center; background:#000; color:#fff;\">\n\n  <button class=\"close-btn ysi-close-btn\" data-gjs-type=\"close-button\" style=\"color:#fff; border-color:#fff;\">&times;</button>\n\n  <div style=\"text-align:center; max-width:400px;\">\n    <h1 style=\"font-size:32px; margin-bottom:15px;\">Download Ready \ud83c\udf89</h1>\n    <p style=\"color:#ccc; margin-bottom:25px;\">Your free investing guide is ready.</p>\n    <button class=\"fs-btn fs-close-final\">Continue</button>\n  </div>\n\n</div>\n\n<script>\n(function($){\n  $(document).ready(function(){\n    $('.fs-close-final').on('click', function(){\n      $(this).closest('.ysleadgen-popup').find('.ysi-close-btn').click();\n    });\n  });\n})(jQuery);\n</script>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "Electronics",
        "E-commerce"
      ]
    },
    {
      "id": "template-76",
      "category": "Yes/No",
      "image": "DigitalLibrary.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "<style>\n  .popup-wrapper {\n    max-width: 750px;\n    width: 95%;\n    margin: 80px auto;\n    display: flex;\n    border-radius: 12px;\n    overflow: hidden;\n    box-shadow: 0 10px 30px rgba(0,0,0,0.2);\n    position: relative;\n  }\n\n  .popup-left {\n    flex: 1;\n    position: relative;\n    background: #f4f4f4;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .popup-left img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  .popup-right {\n    flex: 1;\n    background: #0f5c5c;\n    color: #ffffff;\n    padding: 40px;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    position: relative;\n  }\n\n  .close-btn {\n    position: absolute;\n    top: 12px;\n    right: 12px;\n    background: transparent;\n    border: none;\n    font-size: 20px;\n    cursor: pointer;\n    z-index: 10;\n  }\n\n  /* DESKTOP DEFAULT */\n  .close-desktop {\n    display: block;\n    visibility: visible;\n    pointer-events: auto;\n  }\n\n  .close-mobile {\n    display: none;\n    visibility: hidden;\n    pointer-events: none;\n  }\n\n  /* MOBILE */\n  @media screen and (max-width:768px) {\n\n    .popup-wrapper {\n      flex-direction: column !important;\n      margin: 20px !important;\n      border-radius: 10px !important;\n    }\n\n    .popup-left, .popup-right {\n      width: 100% !important;\n    }\n\n    .popup-left img {\n      height: 220px !important;\n    }\n\n    .popup-right {\n      padding: 24px 20px !important;\n      text-align: center !important;\n    }\n\n    /* STRICT SWITCH */\n    .close-desktop {\n      display: none !important;\n      visibility: hidden !important;\n      pointer-events: none !important;\n    }\n\n    .close-mobile {\n      display: block !important;\n      visibility: visible !important;\n      pointer-events: auto !important;\n    }\n  }\n</style>\n\n<div class='popup-wrapper yslg-page yslg-page-0'>\n\n  <!-- IMAGE SECTION (MOBILE CLOSE ONLY) -->\n  <div class='popup-left'>\n\n    <button class='close-btn close-mobile ysi-close-btn' data-gjs-type='close-button'>&times;</button>\n\n    <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/ebook-illustration.webp'>\n\n  </div>\n\n  <!-- RIGHT SECTION (DESKTOP CLOSE ONLY) -->\n  <div data-gjs-type='column' class='popup-right'>\n\n    <button class='close-btn close-desktop ysi-close-btn' data-gjs-type='close-button'>&times;</button>\n\n    <h1 style='font-size:28px; margin-bottom:16px; font-weight:bold;'>Grow Your Digital Library Today!</h1>\n\n    <p style='font-size:15px; line-height:1.6; margin-bottom:24px; color:#d7eeee;'>\n      Explore a vast collection of knowledge and entertainment. Sign up now to get exclusive ebooks sent straight to your inbox on a regular basis.\n    </p>\n\n    <button class='yslg-next-page ysi-yes-btn' style='padding:14px 20px; background:#ffffff; color:#0f5c5c; font-size:15px; font-weight:bold; border:none; border-radius:8px; cursor:pointer; margin-bottom:14px;'>\n      Yes Begin Building My Library\n    </button>\n\n    <button class='ysi-no-btn' style='background:#0f5c5c; color:#ffffff; font-size:15px; font-weight:bold; border:none; border-radius:8px; cursor:pointer;'>\n      No Thanks\n    </button>\n\n  </div>\n\n</div>"
            }
          ]
        },
        {
          "name": "Thank You Page",
          "frames": [
            {
              "component": "<style>\n  .popup-wrapper {\n    max-width: 750px;\n    width: 95%;\n    margin: 80px auto;\n    display: flex;\n    border-radius: 12px;\n    overflow: hidden;\n    box-shadow: 0 10px 30px rgba(0,0,0,0.2);\n    position: relative;\n  }\n\n  .popup-left {\n    flex: 1;\n    position: relative;\n    background: #f4f4f4;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .popup-left img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  .popup-right {\n    flex: 1;\n    background: #0f5c5c;\n    color: #ffffff;\n    padding: 40px;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n    position: relative;\n  }\n\n  .close-btn {\n    position: absolute;\n    top: 12px;\n    right: 12px;\n    background: transparent;\n    border: none;\n    font-size: 20px;\n    cursor: pointer;\n    z-index: 10;\n  }\n\n  .close-desktop {\n    display: block;\n  }\n\n  .close-mobile {\n    display: none;\n  }\n\n  @media screen and (max-width:768px) {\n\n    .popup-wrapper {\n      flex-direction: column !important;\n      margin: 20px !important;\n    }\n\n    .close-desktop {\n      display: none !important;\n    }\n\n    .close-mobile {\n      display: block !important;\n    }\n  }\n</style>\n\n<div class='popup-wrapper yslg-page yslg-page-1'>\n\n  <div class='popup-left'>\n\n    <button class='close-btn close-mobile ysi-close-btn' data-gjs-type='close-button'>&times;</button>\n\n    <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/ebook-illustration.webp'>\n\n  </div>\n\n  <div class='popup-right'>\n\n    <button class='close-btn close-desktop ysi-close-btn' data-gjs-type='close-button'>&times;</button>\n\n    <h1 style='font-size:28px; margin-bottom:16px;'>You're In!</h1>\n\n    <p style='font-size:15px; margin-bottom:20px; color:#d7eeee;'>\n      Your digital library access has been activated. Check your inbox for your first ebook.\n    </p>\n\n    <div data-gjs-type='coupon' data-code='WELCOME' style='font-size:18px; font-weight:bold; background:#ffffff; color:#0f5c5c; padding:12px 20px; border-radius:6px;'>\n      WELCOME\n    </div>\n\n  </div>\n\n</div>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-77",
      "category": "Yes/No",
      "image": "HolidayDiscount.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "<style>\n  .popup-box {\n    width: 360px;\n    margin: 60px auto;\n    background: #ffffff;\n    border-radius: 6px;\n    overflow: hidden;\n    box-shadow: 0 6px 18px rgba(0,0,0,0.15);\n    position: relative;\n  }\n\n  @media (max-width: 768px) {\n    .popup-box {\n      width: 90% !important;\n      margin: 30px auto !important;\n    }\n  }\n</style>\n\n<div class='yslg-page yslg-page-0 popup-box'>\n\n  <button class='ysi-close-btn' data-gjs-type='close-button' style='position:absolute; top:10px; right:10px; border:none; background:transparent; font-size:18px; cursor:pointer; color:#888;'>&times;</button>\n\n  <div data-gjs-type='column' style='padding:24px; text-align:center;'>\n    <p style='margin:0; font-size:16px; color:#333;'>Enjoy an additional</p>\n    \n    <h1 style='margin:10px 0; font-size:48px; color:#1e3a8a; font-weight:bold;'>10%</h1>\n    \n    <p style='margin:0 0 20px; font-size:14px; color:#333;'>\n      savings this holiday\n    </p>\n\n    <button class='yslg-next-page ysi-yes-btn' data-gjs-type='yes-button' style='padding:10px 18px; border:1px solid #333;color:#000000; background-color:#ffffff; font-size:14px; cursor:pointer; margin-bottom:10px;'>\n      Yes, Apply My Discount\n    </button>\n\n    <div class='ysi-no-btn' data-gjs-type='no-button' style='font-size:12px; color:#777; cursor:pointer;'>\n      No, Thanks\n    </div>\n  </div>\n\n  <div>\n    <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/fashion-model.webp' style='width:100%; display:block;'>\n  </div>\n\n</div>"
            }
          ]
        },
        {
          "name": "Thank You Page",
          "frames": [
            {
              "component": "<style>\n  .popup-box {\n    width: 360px;\n    margin: 60px auto;\n    background: #ffffff;\n    border-radius: 6px;\n    overflow: hidden;\n    box-shadow: 0 6px 18px rgba(0,0,0,0.15);\n    position: relative;\n  }\n\n  @media (max-width: 768px) {\n    .popup-box {\n      width: 90% !important;\n      margin: 30px auto !important;\n    }\n  }\n</style>\n\n<div class='yslg-page yslg-page-1 popup-box'>\n\n  <button class='ysi-close-btn' data-gjs-type='close-button' style='position:absolute; top:10px; right:10px; border:none; background:transparent; font-size:18px; cursor:pointer; color:#888;'>&times;</button>\n\n  <div style='padding:24px; text-align:center;'>\n    <h1 style='margin-bottom:10px; font-size:28px; color:#1e3a8a;'>Thank You!</h1>\n\n    <p style='font-size:14px; color:#333; margin-bottom:20px;'>\n      Your discount has been applied successfully.\n    </p>\n\n    <div data-gjs-type='coupon' data-code='SAVE10' style='font-size:18px; font-weight:bold; border:2px dashed #1e3a8a; padding:10px; border-radius:6px; display:inline-block; color:#1e3a8a;'>\n      SAVE10\n    </div>\n\n  </div>\n\n  <div>\n    <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/fashion-model.webp' style='width:100%; display:block;'>\n  </div>\n\n</div>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "Fashion",
        "E-commerce"
      ]
    },
    {
      "id": "template-78",
      "category": "Yes/No",
      "image": "BulkOrder.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "<style>\n  @media (max-width: 768px) {\n    .popup-card {\n      width: 90% !important;\n      margin: 30px auto !important;\n    }\n  }\n\n  .popup-card {\n    width: 420px;\n    margin: 60px auto; /* \u2705 KEY FIX */\n    background: #f5f5f5;\n    border-radius: 16px;\n    overflow: hidden;\n    box-shadow: 0 10px 25px rgba(0,0,0,0.2);\n    position: relative;\n  }\n\n  .popup-img {\n    width: 100%;\n    height: 180px;\n    object-fit: cover;\n    display: block;\n  }\n\n  .popup-content {\n    padding: 24px;\n    text-align: center;\n  }\n\n  .popup-title {\n    margin: 0 0 12px;\n    font-size: 20px;\n    letter-spacing: 1px;\n    color: #8b4513;\n    font-weight: bold;\n  }\n\n  .popup-divider {\n    width: 60px;\n    height: 2px;\n    background: #c89b6d;\n    margin: 0 auto 12px;\n  }\n\n  .popup-text {\n    font-size: 14px;\n    color: #555;\n    margin-bottom: 20px;\n  }\n\n  .popup-actions {\n    display: flex;\n    gap: 10px;\n    justify-content: center;\n  }\n\n  .btn {\n    padding: 10px 20px;\n    border-radius: 6px;\n    font-size: 14px;\n    cursor: pointer;\n    border: none;\n  }\n\n  .btn-primary {\n    background: #8b4513;\n    color: #fff;\n  }\n\n  .btn-secondary {\n    background: #e5e5e5;\n    color: #333;\n  }\n\n  .close-btn {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n    width: 28px;\n    height: 28px;\n    border-radius: 50%;\n    border: none;\n    background: #ffffff;\n    cursor: pointer;\n  }\n</style>\n\n<div class='popup-card yslg-page yslg-page-0'>\n\n  <button class='close-btn ysi-close-btn' data-gjs-type='close-button'>&times;</button>\n\n  <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/clothing-rack.webp' class='popup-img' />\n\n  <div class='popup-content'>\n    <h2 class='popup-title'>PLACING ORDER FOR A GROUP</h2>\n\n    <div class='popup-divider'></div>\n\n    <p class='popup-text'>We offer special bulk ordering options.</p>\n\n    <div class='popup-actions'>\n\n      <button class='btn btn-primary yslg-next-page ysi-yes-btn' data-gjs-type='yes-button'>\n        Explore Options\n      </button>\n\n      <button class='btn btn-secondary ysi-no-btn' data-gjs-type='no-button'>\n        No thanks\n      </button>\n\n    </div>\n\n  </div>\n\n</div>"
            }
          ]
        },
        {
          "name": "Thank You Page",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; min-height:100vh; display:flex; align-items:center; justify-content:center; background:#dcdcdc; font-family:Arial, sans-serif;'>\n\n<div class='popup-card yslg-page yslg-page-1'>\n\n  <button class='close-btn ysi-close-btn' data-gjs-type='close-button'>&times;</button>\n\n  <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/clothing-rack.webp' class='popup-img' />\n\n  <div class='popup-content'>\n    <h2 class='popup-title'>Thank You!</h2>\n\n    <p class='popup-text'>Our team will contact you shortly with bulk order details.</p>\n\n    <div data-gjs-type='coupon' data-code='BULK10' style='font-size:16px; font-weight:bold; border:2px dashed #8b4513; padding:10px; border-radius:6px; display:inline-block; color:#8b4513;'>\n      BULK10\n    </div>\n\n  </div>\n\n</div>\n\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "Fashion",
        "E-commerce"
      ]
    },
    {
      "id": "template-79",
      "category": "Yes/No",
      "image": "WebinarPopup.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "<style>\n  .popup-card {\n    max-width: 900px;\n    width: 95%;\n    margin: 60px auto;\n    display: flex;\n    border-radius: 12px;\n    overflow: hidden;\n    box-shadow: 0 10px 30px rgba(0,0,0,0.2);\n    background: #ffffff;\n    position: relative;\n  }\n\n  .popup-left {\n    flex: 1;\n    position: relative;\n  }\n\n  .popup-left img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n  }\n\n  .popup-right {\n    flex: 1;\n    padding: 40px;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    text-align: center;\n    position: relative;\n  }\n\n  /* CLOSE BUTTON BASE */\n  .close-btn {\n    position: absolute;\n    top: 12px;\n    right: 12px;\n    font-size: 22px;\n    background: none;\n    border: none;\n    cursor: pointer;\n    z-index: 10;\n  }\n\n  /* DESKTOP DEFAULT */\n  .close-desktop {\n    display: block;\n    visibility: visible;\n    pointer-events: auto;\n  }\n\n  .close-mobile {\n    display: none;\n    visibility: hidden;\n    pointer-events: none;\n  }\n\n  .countdown {\n    display: flex;\n    justify-content: center;\n    gap: 10px;\n    margin-bottom: 20px;\n  }\n\n  .time-box {\n    background: linear-gradient(135deg,#6c4cf1,#3a0edb);\n    color: #fff;\n    padding: 12px;\n    border-radius: 10px;\n    min-width: 65px;\n  }\n\n  .popup-actions {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n    margin-top: 10px;\n  }\n\n  .btn {\n    padding: 14px 20px;\n    font-size: 16px;\n    font-weight: bold;\n    border: none;\n    border-radius: 30px;\n    cursor: pointer;\n  }\n\n  .btn-primary {\n    background: linear-gradient(135deg,#6c4cf1,#3a0edb);\n    color: #fff;\n  }\n\n  .btn-secondary {\n    background: #e5e5e5;\n    color: #333;\n    border-radius: 20px;\n    font-size: 14px;\n  }\n\n  /* MOBILE STRICT SWITCH */\n  @media screen and (max-width:768px) {\n\n    .popup-card {\n      flex-direction: column;\n      margin: 30px auto !important;\n      width: 90% !important;\n    }\n\n    .popup-right {\n      padding: 24px 20px;\n    }\n\n    .countdown {\n      flex-wrap: wrap;\n    }\n\n    /* HIDE DESKTOP BTN */\n    .close-desktop {\n      display: none !important;\n      visibility: hidden !important;\n      pointer-events: none !important;\n    }\n\n    /* SHOW MOBILE BTN */\n    .close-mobile {\n      display: block !important;\n      visibility: visible !important;\n      pointer-events: auto !important;\n    }\n  }\n</style>\n\n<div class='popup-card yslg-page yslg-page-0'>\n\n  <!-- IMAGE SECTION (MOBILE CLOSE ONLY) -->\n  <div class='popup-left'>\n    <button class='close-btn close-mobile ysi-close-btn' data-gjs-type='close-button'>&times;</button>\n    <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/webinar-person.webp' />\n  </div>\n\n  <!-- RIGHT SECTION (DESKTOP CLOSE ONLY) -->\n  <div class='popup-right'>\n\n    <button class='close-btn close-desktop ysi-close-btn' data-gjs-type='close-button'>&times;</button>\n\n    <h1 style='font-size:30px; margin-bottom:20px;'>Learn from the Experts!</h1>\n\n    <div class='countdown' data-gjs-type='countdown'>\n      <div class='time-box'><div>00</div><div>Days</div></div>\n      <div class='time-box'><div>00</div><div>Hours</div></div>\n      <div class='time-box'><div>00</div><div>Minutes</div></div>\n      <div class='time-box'><div>00</div><div>Seconds</div></div>\n    </div>\n\n    <p style='font-size:15px; color:#555;'>\n      Sign up for our upcoming webinar to gain valuable insights.\n    </p>\n\n    <div class='popup-actions'>\n      <button class='btn btn-primary yslg-next-page ysi-yes-btn'>Save Your Spot</button>\n      <button class='btn btn-secondary ysi-no-btn'>No Thanks</button>\n    </div>\n\n  </div>\n\n</div>"
            }
          ]
        },
        {
          "name": "Thank You Page",
          "frames": [
            {
              "component": "<style>\n  .popup-card {\n    max-width: 900px;\n    width: 95%;\n    margin: 60px auto;\n    display: flex;\n    border-radius: 12px;\n    overflow: hidden;\n    box-shadow: 0 10px 30px rgba(0,0,0,0.2);\n    background: #ffffff;\n    position: relative;\n  }\n\n  .popup-left img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  .popup-right {\n    flex: 1;\n    padding: 40px;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    text-align: center;\n    position: relative;\n  }\n\n  @media screen and (max-width:768px) {\n    .popup-card { \n      flex-direction: column; \n      margin: 30px auto !important;\n      width: 90% !important;\n    }\n    .popup-right { padding: 24px 20px; }\n  }\n</style>\n\n<div class='popup-card yslg-page yslg-page-1'>\n\n  <div class='popup-left' style='flex:1;'>\n    <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/webinar-person.webp' />\n  </div>\n\n  <form class='popup-right' style='align-items:center;'>\n\n    <button class='ysi-close-btn' data-gjs-type='close-button' style='position:absolute; top:12px; right:12px; font-size:22px; background:none; border:none; cursor:pointer;'>&times;</button>\n\n    <h1 style='font-size:30px;'>You're In!</h1>\n\n    <p style='color:#555;'>Check your email for webinar details.</p>\n\n    <div data-gjs-type='coupon' data-code='WEBINAR25' style='font-size:18px; font-weight:bold; background:#6c4cf1; color:#fff; padding:12px 20px; border-radius:6px;'>\n      WEBINAR25\n    </div>\n\n  </form>\n\n</div>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-80",
      "category": "Yes/No",
      "image": "ReferralOffer.webp",
      "pages": [
        {
          "name": "Main Page",
          "frames": [
            {
              "component": "<style>\n  .popup-card {\n    width: 500px;\n    max-width: 90%;\n    margin: 60px auto; /* \u2705 CENTER FIX */\n    background: #f4efe4;\n    border-radius: 16px;\n    box-shadow: 0 8px 25px rgba(0,0,0,0.15);\n    padding: 32px 24px;\n    text-align: center;\n    position: relative;\n  }\n\n  @media (max-width: 768px) {\n    .popup-card {\n      margin: 30px auto !important;\n    }\n  }\n\n  .close-btn {\n    position: absolute;\n    top: 14px;\n    right: 14px;\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    border: 2px solid #2e7d32;\n    background: #f4efe4;\n    color: #2e7d32;\n    font-size: 16px;\n    cursor: pointer;\n  }\n\n  .popup-title {\n    font-size: 22px;\n    font-weight: bold;\n    color: #111;\n    margin-bottom: 16px;\n  }\n\n  .divider {\n    width: 60%;\n    height: 1px;\n    background: #cfc6b3;\n    margin: 16px auto;\n  }\n\n  .popup-text {\n    font-size: 18px;\n    color: #333;\n    margin-bottom: 24px;\n  }\n\n  .highlight {\n    color: #2e7d32;\n    font-weight: bold;\n  }\n\n  .popup-actions {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n    align-items: center;\n  }\n\n  .btn {\n    padding: 14px 28px;\n    border-radius: 30px;\n    font-size: 16px;\n    font-weight: bold;\n    cursor: pointer;\n    border: none;\n  }\n\n  .btn-primary {\n    background: #2e7d32;\n    color: #fff;\n  }\n\n  .btn-secondary {\n    background: #e0ddd5;\n    color: #555;\n    font-size: 14px;\n  }\n</style>\n\n<div class='popup-card yslg-page yslg-page-0'>\n\n  <button class='close-btn ysi-close-btn' data-gjs-type='close-button'>\u00d7</button>\n\n  <div class='popup-title'>\n    Would you suggest our website<br>to someone you know?\n  </div>\n\n  <div class='divider'></div>\n\n  <div class='popup-text'>\n    Invite & Enjoy <span class='highlight'>20% Off</span> Your Next Order\n  </div>\n\n  <div class='popup-actions'>\n\n    <button class='btn btn-primary yslg-next-page ysi-yes-btn' data-gjs-type='yes-button'>\n      Yes, I\u2019ll Share\n    </button>\n\n    <button class='btn btn-secondary ysi-no-btn' data-gjs-type='no-button'>\n      No, I\u2019ll Skip the Offer\n    </button>\n\n  </div>\n\n</div>"
            }
          ]
        },
        {
          "name": "Thank You Page",
          "frames": [
            {
              "component": "<style>\n  .popup-card {\n    width: 500px;\n    max-width: 90%;\n    margin: 60px auto;\n    background: #f4efe4;\n    border-radius: 16px;\n    box-shadow: 0 8px 25px rgba(0,0,0,0.15);\n    padding: 32px 24px;\n    text-align: center;\n    position: relative;\n  }\n\n  @media (max-width: 768px) {\n    .popup-card {\n      margin: 30px auto !important;\n    }\n  }\n\n  .close-btn {\n    position: absolute;\n    top: 14px;\n    right: 14px;\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    border: 2px solid #2e7d32;\n    background: #f4efe4;\n    color: #2e7d32;\n    font-size: 16px;\n    cursor: pointer;\n  }\n\n  .popup-title {\n    font-size: 22px;\n    font-weight: bold;\n    color: #111;\n    margin-bottom: 16px;\n  }\n\n  .popup-text {\n    font-size: 18px;\n    color: #333;\n    margin-bottom: 24px;\n  }\n</style>\n\n<form data-gjs-type='column' class='popup-card yslg-page yslg-page-1'>\n\n  <button class='close-btn ysi-close-btn' data-gjs-type='close-button'>\u00d7</button>\n\n  <div class='popup-title'>Thank You!</div>\n\n  <div class='popup-text'>\n    Your referral reward is ready. Use the code below on your next order.\n  </div>\n\n  <div data-gjs-type='coupon' data-code='REFER20' style='font-size:20px; font-weight:bold; border:2px dashed #2e7d32; padding:12px 20px; border-radius:8px; display:inline-block; color:#2e7d32;'>\n    REFER20\n  </div>\n\n</form>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-81",
      "category": "Sweepstakes",
      "image": "skincare_products.webp",
      "pages": [
        {
          "name": "Self Care Sweepstakes",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; position:relative; height:100vh; width:100vw; overflow-x:hidden; font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;'>\n  <style>\n    @media (max-width: 768px) {\n      .popup-wrapper {\n        flex-direction: column !important;\n        margin: 20px 10px !important;\n        max-width: calc(100% - 20px) !important;\n      }\n      .popup-left, .popup-right {\n        width: 100% !important;\n      }\n      .popup-right {\n        min-height: 250px !important;\n      }\n    }\n  </style>\n\n  <form data-gjs-type='column' class='popup-wrapper' method='post' style='background-color:#FAF5F0; border-radius:12px; max-width:800px; width:90%; margin:60px auto; display:flex; flex-direction:row; box-shadow:0 10px 30px rgba(0,0,0,0.15); overflow:hidden; position:relative;'>\n    \n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:12px !important; right:12px !important; font-size:24px !important; font-weight:bold !important; color:#888 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:36px !important; height:36px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <div data-gjs-type='column' class='popup-left' style='flex:1; padding:50px 40px; display:flex; flex-direction:column; justify-content:center; text-align:center;'>\n      \n      <div style='border-top: 2px solid #9E1A22; width: 100%; margin: 0 auto 20px auto;'></div>\n      \n      <h1 style='font-size:32px; color:#9E1A22; font-family:Georgia, serif; font-weight:bold; letter-spacing:1px; margin:0 0 10px 0; line-height:1.2; text-transform:uppercase;'>WIN A YEAR OF</h1>\n      <h1 style='font-size:42px; color:#9E1A22; font-family:Georgia, serif; font-weight:bold; letter-spacing:1px; margin:0 0 15px 0; line-height:1.2; text-transform:uppercase;'>SELF CARE</h1>\n\n      <div style='display:flex; align-items:center; justify-content:center; margin:0 auto 20px auto; width:60%;'>\n        <div style='flex:1; border-bottom:1px solid #9E1A22;'></div>\n        <span style='color:#9E1A22; margin:0 15px; font-size:18px;'>&hearts;</span>\n        <div style='flex:1; border-bottom:1px solid #9E1A22;'></div>\n      </div>\n\n      <p style='font-family:\"Brush Script MT\", \"Great Vibes\", cursive, Georgia, serif; font-size:32px; color:#555; margin-bottom:20px; font-style:italic;'>Glow beyond the ordinary</p>\n\n      <p style='font-size:16px; color:#9E1A22; margin-bottom:20px; line-height:1.5;'>Enter your email for a chance to receive exclusive products and beauty essentials.</p>\n\n      <p style='font-size:14px; font-weight:bold; color:#9E1A22; text-transform:uppercase; margin-bottom:20px; letter-spacing:0.5px;'>WINNERS CHOSEN MONTHLY</p>\n\n      <div style='width:100%; margin-bottom:15px;'>\n        <input type='email' placeholder='Email Address' style='width:100%; padding:14px; font-size:16px; border:1px solid #ddd; border-radius:4px; box-sizing:border-box;' required />\n      </div>\n\n      <button type='submit' style='width:100%; padding:16px; background-color:#9E1A22; color:#ffffff; font-size:16px; font-weight:bold; text-transform:uppercase; border:none; border-radius:4px; cursor:pointer; letter-spacing:1px; display:flex; align-items:center; justify-content:center;'>\n        CONTINUE <span style='margin-left:8px; font-size:20px;'>&rarr;</span>\n      </button>\n\n    </div>\n\n    <div data-gjs-type='column' class='popup-right' style='flex:1; background-image:url(\"https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/skincare_products.webp\"); background-size:cover; background-position:center; position:relative;'>\n      \n      <div style='position:absolute; top:40px; right:40px; background-color:#B87B7C; color:#ffffff; width:110px; height:110px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; box-shadow:0 4px 10px rgba(0,0,0,0.2); border: 2px solid rgba(255,255,255,0.4); padding: 10px; box-sizing:border-box;'>\n        <span style='font-size:16px; margin-bottom:4px;'>&#10022;</span>\n        <span style='font-size:11px; font-weight:bold; letter-spacing:0.5px; line-height:1.2; text-transform:uppercase;'>NEW PRIZES<br/>EVERY MONTH</span>\n        <span style='font-size:14px; margin-top:4px;'>&hearts;</span>\n      </div>\n\n    </div>\n\n  </form>\n\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation",
        "Sweepstakes"
      ],
      "industry": [
        "Beauty",
        "E-commerce"
      ]
    },
    {
      "id": "template-82",
      "category": "Giveaway",
      "image": "giveaway_left.webp",
      "pages": [
        {
          "name": "Exclusive Giveaway",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; position:relative; height:100vh; width:100vw; overflow-x:hidden; font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;'>\n  <style>\n    @media (max-width: 768px) {\n      .popup-wrapper {\n        flex-direction: column !important;\n        margin: 20px 10px !important;\n        max-width: calc(100% - 20px) !important;\n      }\n      .popup-left, .popup-right {\n        width: 100% !important;\n      }\n      .popup-left {\n        min-height: 300px !important;\n      }\n    }\n  </style>\n\n  <form data-gjs-type='column' class='popup-wrapper' method='post' style='background-color:#FCFBF9; border-radius:12px; max-width:850px; width:90%; margin:60px auto; display:flex; flex-direction:row; box-shadow:0 10px 30px rgba(0,0,0,0.15); overflow:hidden; position:relative;'>\n    \n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:12px !important; right:12px !important; font-size:20px !important; font-weight:bold !important; color:#888 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:36px !important; height:36px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important; box-shadow: 0 2px 5px rgba(0,0,0,0.1);' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <div data-gjs-type='column' class='popup-left' style='flex:1; background-color:#F5EBE1; display:flex; justify-content:center; align-items:stretch; padding:0; min-height:500px;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/giveaway_left.webp' alt='Giveaway' style='width:100%; height:100%; object-fit:cover; display:block;' onerror=\"this.style.display='none';\">\n    </div>\n\n    <div data-gjs-type='column' class='popup-right' style='flex:1.1; padding:40px 40px; display:flex; flex-direction:column; justify-content:center; text-align:center;'>\n      \n      <div style='margin-bottom:15px; display:flex; justify-content:center;'>\n        <svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"#5B131C\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M20 9H18.82C18.94 8.7 19 8.36 19 8C19 6.34 17.66 5 16 5C14.78 5 13.72 5.73 13.25 6.78L12 9.61L10.75 6.78C10.28 5.73 9.22 5 8 5C6.34 5 5 6.34 5 8C5 8.36 5.06 8.7 5.18 9H4C2.9 9 2 9.9 2 11V14H22V11C22 9.9 21.1 9 20 9ZM16 7C16.55 7 17 7.45 17 8C17 8.55 16.55 9 16 9H13.6L14.73 6.46C15.06 6.17 15.5 6 16 6V7ZM8 7C8.55 7 9 7.45 9 8C9 8.55 8.55 9 8 9H5.6L6.73 6.46C7.06 6.17 7.5 6 8 6V7ZM4 11H11V14H4V11ZM13 14V11H20V14H13ZM4 15H11V21H4V15ZM13 15H20V21H13V15Z\"/>\n        </svg>\n      </div>\n\n      <h2 style='font-size:28px; color:#5B131C; font-family:Georgia, serif; font-weight:bold; margin:0 0 5px 0; line-height:1.2;'>Enter Our Exclusive</h2>\n      <h1 style='font-size:42px; color:#C79A4B; font-family:Georgia, serif; font-weight:bold; margin:0 0 15px 0; line-height:1.1; letter-spacing:1px;'>Giveaway</h1>\n\n      <div style='border-bottom: 1px solid #D5C2A5; width: 80%; margin: 0 auto 20px auto;'></div>\n\n      <p style='font-size:15px; color:#4A2F32; margin-bottom:25px; line-height:1.5; font-family:Georgia, serif;'>Join our giveaway and get a chance to<br/>shop your favorites for free.</p>\n\n      <div style='text-align:left; display:inline-block; margin:0 auto 25px auto;'>\n        <div style='display:flex; align-items:center; margin-bottom:10px;'>\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"#5B131C\" style=\"margin-right:10px;\"><path d=\"M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z\"/></svg>\n          <span style='font-size:16px; color:#5B131C; font-weight:bold; font-family:\"Helvetica Neue\", sans-serif;'>\u20b95,000 Store Credit</span>\n        </div>\n        <div style='display:flex; align-items:center; margin-bottom:10px;'>\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"#5B131C\" style=\"margin-right:10px;\"><path d=\"M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z\"/></svg>\n          <span style='font-size:16px; color:#5B131C; font-weight:bold; font-family:\"Helvetica Neue\", sans-serif;'>Free Shipping for 1 Year</span>\n        </div>\n        <div style='display:flex; align-items:center; margin-bottom:10px;'>\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"#5B131C\" style=\"margin-right:10px;\"><path d=\"M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z\"/></svg>\n          <span style='font-size:16px; color:#5B131C; font-weight:bold; font-family:\"Helvetica Neue\", sans-serif;'>Surprise Gift Box</span>\n        </div>\n      </div>\n\n      <p style='font-family:\"Brush Script MT\", \"Great Vibes\", cursive, Georgia, serif; font-size:28px; color:#5B131C; margin-bottom:20px; font-style:italic;'>Drop your email to enter</p>\n\n      <div style='width:100%; margin-bottom:15px;'>\n        <input type='email' placeholder='Enter Your Email Address' style='width:100%; padding:14px; font-size:15px; border:1px solid #755558; border-radius:8px; box-sizing:border-box;' required />\n      </div>\n\n      <button type='submit' style='width:100%; padding:14px; background-color:#5B131C; color:#ffffff; font-size:16px; font-weight:bold; border:none; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-family:\"Helvetica Neue\", sans-serif;'>\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right:10px;\"><path d=\"M20 12v10H4V12\"/><path d=\"M2 7h20v5H2z\"/><path d=\"M12 22V7\"/><path d=\"M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z\"/><path d=\"M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z\"/></svg>\n        JOIN THE GIVE AWAY\n      </button>\n\n      <p style='font-size:12px; color:#666; margin-top:15px; font-style:italic;'>No purchase required.</p>\n\n    </div>\n\n  </form>\n\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation",
        "Giveaway"
      ],
      "industry": [
        "E-commerce",
        "Retail"
      ]
    },
    {
      "id": "template-83",
      "category": "Giveaway",
      "image": "earbuds_giveaway.webp",
      "pages": [
        {
          "name": "Tech Giveaway",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; position:relative; height:100vh; width:100vw; overflow-x:hidden; font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;'>\n  <style>\n    @media (max-width: 768px) {\n      .popup-wrapper {\n        flex-direction: column !important;\n        margin: 20px 10px !important;\n        max-width: calc(100% - 20px) !important;\n      }\n      .popup-left, .popup-right {\n        width: 100% !important;\n      }\n      .popup-right {\n        min-height: 250px !important;\n        order: -1 !important;\n      }\n    }\n  </style>\n\n  <form data-gjs-type='column' class='popup-wrapper' method='post' style='background-color:#F8F9FB; border-radius:16px; max-width:850px; width:90%; margin:60px auto; display:flex; flex-direction:row; box-shadow:0 15px 40px rgba(0,0,0,0.2); overflow:hidden; position:relative;'>\n    \n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:12px !important; right:12px !important; font-size:20px !important; font-weight:bold !important; color:#ffffff !important; background:#1A1D20 !important; border:1px solid #1A1D20 !important; cursor:pointer !important; z-index:9999 !important; width:32px !important; height:32px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important; box-shadow: 0 2px 5px rgba(0,0,0,0.3);' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <div data-gjs-type='column' class='popup-left' style='flex:1.2; padding:50px 40px; display:flex; flex-direction:column; justify-content:center; text-align:left;'>\n      \n      <h1 style='font-size:38px; color:#2A313C; font-family:\"Helvetica Neue\", sans-serif; font-weight:900; margin:0 0 5px 0; line-height:1.1; letter-spacing:0.5px;'>WANT TO WIN</h1>\n      <h1 style='font-size:36px; color:#184EE5; font-family:\"Helvetica Neue\", sans-serif; font-weight:900; margin:0 0 20px 0; line-height:1.1; letter-spacing:0.5px;'>PREMIUM EARBUDS ?</h1>\n\n      <div style='background-color:#184EE5; color:#ffffff; font-size:24px; font-weight:600; text-align:center; padding:10px 20px; border-radius:8px; margin-bottom:30px; display:inline-block; align-self:flex-start; width:100%; box-sizing:border-box;'>\n        Enter our giveaway !\n      </div>\n\n      <div style='display:flex; align-items:center; margin-bottom:30px;'>\n        <div style='background-color:#DCE4FA; border-radius:50%; width:50px; height:50px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-right:15px;'>\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#5382F6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <rect x=\"3\" y=\"8\" width=\"18\" height=\"14\" rx=\"2\" ry=\"2\"></rect>\n            <path d=\"M12 5H12.01\"></path>\n            <path d=\"M8 8V5c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2v3\"></path>\n            <path d=\"M3 13h18\"></path>\n          </svg>\n        </div>\n        <p style='font-size:15px; color:#2A313C; margin:0; line-height:1.4; font-weight:500;'>Enter your email below for a chance to take<br/>home our featured tech product of the month.</p>\n      </div>\n\n      <div style='width:100%; margin-bottom:20px;'>\n        <input type='email' placeholder='Email Address' style='width:100%; padding:16px 20px; font-size:16px; border:1px solid #D1D5DB; border-radius:8px; box-sizing:border-box; outline:none;' required />\n      </div>\n\n      <button type='submit' style='width:100%; padding:16px; background-color:#184EE5; color:#ffffff; font-size:18px; font-weight:bold; border:none; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; letter-spacing:0.5px;'>\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right:10px;\"><line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"></line><polygon points=\"22 2 15 22 11 13 2 9 22 2\"></polygon></svg>\n        JOIN NOW\n      </button>\n\n      <p style='font-size:14px; color:#6B7280; margin-top:20px; font-style:italic; text-align:center;'>Your information is protected</p>\n\n    </div>\n\n    <div data-gjs-type='column' class='popup-right' style='flex:1; background-color:#0B1425; display:flex; justify-content:center; align-items:stretch; padding:0; min-height:400px;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/earbuds_giveaway.webp' alt='Earbuds Giveaway' style='width:100%; height:100%; object-fit:cover; display:block;' onerror=\"this.style.display='none';\">\n    </div>\n\n  </form>\n\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation",
        "Giveaway"
      ],
      "industry": [
        "Electronics",
        "E-commerce"
      ]
    },
    {
      "id": "template-84",
      "category": "Giveaway",
      "image": "travel_giveaway.webp",
      "pages": [
        {
          "name": "Travel Getaway",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; position:relative; height:100vh; width:100vw; overflow-x:hidden; font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;'>\n  <style>\n    @import url('https://fonts.googleapis.com/css2?family=Story+Script&display=swap');\n    @media (max-width: 768px) {\n      .popup-wrapper {\n        flex-direction: column !important;\n        margin: 20px 10px !important;\n        max-width: calc(100% - 20px) !important;\n      }\n      .popup-left, .popup-right {\n        width: 100% !important;\n      }\n      .popup-right {\n        min-height: 250px !important;\n        order: -1 !important;\n      }\n    }\n  </style>\n\n  <form data-gjs-type='column' class='popup-wrapper' method='post' style='background-color:#F5F4EE; border-radius:12px; max-width:850px; width:90%; margin:60px auto; display:flex; flex-direction:row; box-shadow:0 15px 40px rgba(0,0,0,0.15); overflow:hidden; position:relative;'>\n    \n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:12px !important; right:12px !important; font-size:20px !important; font-weight:bold !important; color:#888 !important; background:#ffffff !important; border:1px solid #ddd !important; cursor:pointer !important; z-index:9999 !important; width:36px !important; height:36px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important; box-shadow: 0 2px 5px rgba(0,0,0,0.1);' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <div data-gjs-type='column' class='popup-left' style='flex:1; padding:50px 40px; display:flex; flex-direction:column; justify-content:center; text-align:center;'>\n      \n      <h1 style='font-size:42px; color:#1A1A1A; font-family:\"Story Script\", cursive; font-weight:bold; margin:0 0 5px 0; line-height:1.1; text-transform:uppercase; letter-spacing:1px;'>WIN YOUR NEXT</h1>\n      <h1 style='font-size:52px; color:#114271; font-family:\"Story Script\", cursive; font-style:italic; font-weight:bold; margin:0 0 15px 0; line-height:1.1; letter-spacing:1px;'>GETAWAY</h1>\n\n      <div style='display:flex; align-items:center; justify-content:center; margin:0 auto 25px auto; width:80%;'>\n        <div style='flex:1; border-bottom:1px solid #1A1A1A;'></div>\n        <span style='color:#1A1A1A; margin:0 15px; font-size:16px;'>&#10041;</span>\n        <div style='flex:1; border-bottom:1px solid #1A1A1A;'></div>\n      </div>\n\n      <p style='font-size:18px; color:#1A1A1A; margin-bottom:25px; line-height:1.5; font-family:\"Helvetica Neue\", sans-serif;'>Enter your email below for a chance to<br/>win a <strong style=\"color:#114271;\">&#8377;15,000 travel voucher.</strong></p>\n\n      <div style='width:100%; margin-bottom:15px;'>\n        <input type='email' placeholder='Email Address' style='width:100%; padding:16px; font-size:16px; border:1px solid #999; border-radius:6px; box-sizing:border-box; outline:none;' required />\n      </div>\n\n      <button type='submit' style='width:100%; padding:16px; background-color:#114271; color:#ffffff; font-size:16px; font-weight:bold; text-transform:uppercase; border:none; border-radius:6px; cursor:pointer; letter-spacing:1px; display:flex; align-items:center; justify-content:center;'>\n        ENTER TO WIN <span style='margin-left:8px; font-size:20px;'>&rarr;</span>\n      </button>\n\n    </div>\n\n    <div data-gjs-type='column' class='popup-right' style='flex:1; background-color:#E0E0E0; display:flex; justify-content:center; align-items:stretch; padding:0; min-height:400px;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/travel_giveaway.webp' alt='Travel Giveaway' style='width:100%; height:100%; object-fit:cover; display:block;' onerror=\"this.style.display='none';\">\n    </div>\n\n  </form>\n\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation",
        "Giveaway"
      ],
      "industry": [
        "Travel",
        "Hospitality"
      ]
    },
    {
      "id": "template-85",
      "category": "Abandoned Cart",
      "image": "setup_upgrade.webp",
      "pages": [
        {
          "name": "Upgrade Setup Checkout",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; position:relative; height:100vh; width:100vw; overflow-x:hidden; font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;'>\n  <style>\n    @media (max-width: 768px) {\n      .popup-wrapper {\n        flex-direction: column !important;\n        margin: 20px 10px !important;\n        max-width: calc(100% - 20px) !important;\n      }\n      .popup-left {\n        width: 100% !important;\n        clip-path: none !important;\n        padding-right: 40px !important;\n      }\n      .popup-right {\n        position: relative !important;\n        width: 100% !important;\n        min-height: 250px !important;\n        order: -1 !important;\n      }\n    }\n    .input-with-icon {\n      position: relative;\n    }\n    .input-with-icon svg {\n      position: absolute;\n      left: 15px;\n      top: 50%;\n      transform: translateY(-50%);\n      color: #9CA3AF;\n    }\n    .input-with-icon input {\n      width: 100%;\n      padding: 14px 14px 14px 45px;\n      font-size: 15px;\n      border: 1px solid #D1D5DB;\n      border-radius: 8px;\n      box-sizing: border-box;\n      outline: none;\n    }\n  </style>\n\n  <form data-gjs-type='column' class='popup-wrapper' method='post' style='background-color:#ffffff; border-radius:16px; max-width:850px; width:90%; margin:60px auto; display:flex; flex-direction:row; box-shadow:0 15px 40px rgba(0,0,0,0.25); overflow:hidden; position:relative; min-height:500px;'>\n    \n    <div data-gjs-type='column' class='popup-right' style='position:absolute; top:0; right:0; bottom:0; width:55%; background-color:#1A1A24; display:flex; justify-content:center; align-items:stretch; padding:0; z-index:1;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/setup_upgrade.webp' alt='Upgrade Setup' style='width:100%; height:100%; object-fit:cover; display:block;' onerror=\"this.style.display='none';\">\n    </div>\n\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:12px !important; right:12px !important; font-size:18px !important; font-weight:bold !important; color:#000 !important; background:#fff !important; border:none !important; cursor:pointer !important; z-index:9999 !important; width:30px !important; height:30px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important; box-shadow: 0 2px 5px rgba(0,0,0,0.2);' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <div data-gjs-type='column' class='popup-left' style='position:relative; z-index:2; width:60%; background-color:#ffffff; padding:50px 50px 40px 40px; display:flex; flex-direction:column; justify-content:center; text-align:left; clip-path:polygon(0 0, 100% 0, 85% 100%, 0 100%);'>\n      \n      <div style='position:relative; width:50px; height:50px; background-color:#F3F0FF; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:20px;'>\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"9\" cy=\"21\" r=\"1\"></circle><circle cx=\"20\" cy=\"21\" r=\"1\"></circle><path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"></path></svg>\n        <div style='position:absolute; top:-6px; right:-6px; background-color:#482CE9; color:#fff; font-size:12px; font-weight:bold; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center;'>1</div>\n      </div>\n\n      <h1 style='font-size:38px; color:#111827; font-family:\"Helvetica Neue\", sans-serif; font-weight:900; margin:0 0 15px 0; line-height:1.2; letter-spacing:0.5px;'>\n        Upgrade Your<br/>Setup <span style='color:#482CE9;'>Today</span>\n      </h1>\n\n      <p style='font-size:15px; color:#4B5563; margin-bottom:25px; line-height:1.5;'>The latest electronics you picked are almost yours. Checkout now before stock runs low.</p>\n\n      <div style='display:inline-flex; align-items:center; background-color:#F9FAFB; border:1px solid #E5E7EB; border-radius:30px; padding:6px 16px 6px 6px; margin-bottom:30px; align-self:flex-start;'>\n        <div style='background-color:#482CE9; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-right:10px;'>\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"1\" y=\"3\" width=\"15\" height=\"13\"></rect><polygon points=\"16 8 20 8 23 11 23 16 16 16 16 8\"></polygon><circle cx=\"5.5\" cy=\"18.5\" r=\"2.5\"></circle><circle cx=\"18.5\" cy=\"18.5\" r=\"2.5\"></circle></svg>\n        </div>\n        <span style='font-size:13px; font-weight:600; color:#1F2937;'>Free Shipping Available</span>\n      </div>\n\n      <label style='font-size:14px; font-weight:bold; color:#111827; margin-bottom:8px; display:block;'>Email Address</label>\n      <div class='input-with-icon' style='width:100%; margin-bottom:20px;'>\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"></path><polyline points=\"22,6 12,13 2,6\"></polyline></svg>\n        <input type='email' placeholder='Enter your email address' required />\n      </div>\n\n      <button type='submit' style='width:100%; padding:15px; background-color:#482CE9; color:#ffffff; font-size:16px; font-weight:bold; border:none; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.3s;'>\n        Continue Checkout\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-left:10px;\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line><polyline points=\"12 5 19 12 12 19\"></polyline></svg>\n      </button>\n\n      <p style='font-size:12px; color:#6B7280; margin-top:15px; text-align:center;'>Secure checkout with fast delivery on every order</p>\n\n    </div>\n\n  </form>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Abandoned Cart",
        "Lead Generation"
      ],
      "industry": [
        "Electronics",
        "E-commerce"
      ]
    },
    {
      "id": "template-86",
      "category": "Abandoned Cart",
      "image": "fashion_abandoned.webp",
      "pages": [
        {
          "name": "Fashion Checkout",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; position:relative; height:100vh; width:100vw; overflow-x:hidden; font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;'>\n  <style>\n    @media (max-width: 768px) {\n      .popup-wrapper {\n        flex-direction: column !important;\n        margin: 20px 10px !important;\n        max-width: calc(100% - 20px) !important;\n      }\n      .popup-left, .popup-right {\n        width: 100% !important;\n        min-height: 250px !important;\n      }\n      .popup-left {\n        border-radius: 16px 16px 0 0 !important;\n      }\n    }\n  </style>\n\n  <form data-gjs-type='column' class='popup-wrapper' method='post' style='background-color:#FFF8F2; border-radius:16px; max-width:850px; width:90%; margin:60px auto; display:flex; flex-direction:row; box-shadow:0 15px 40px rgba(0,0,0,0.25); overflow:hidden; position:relative; min-height:500px;'>\n    \n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:12px !important; right:12px !important; font-size:20px !important; font-weight:normal !important; color:#000 !important; background:#fff !important; border:1px solid #eee !important; cursor:pointer !important; z-index:9999 !important; width:36px !important; height:36px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important; box-shadow: 0 2px 5px rgba(0,0,0,0.1);' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <div data-gjs-type='column' class='popup-left' style='width:42%; background-color:#eaeaea; display:flex; justify-content:center; align-items:stretch; padding:0; border-top-right-radius:180px; overflow:hidden;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/fashion_abandoned.webp' alt='Style Awaits' style='width:100%; height:100%; object-fit:cover; display:block;' onerror=\"this.style.display='none';\">\n    </div>\n\n    <div data-gjs-type='column' class='popup-right' style='width:58%; padding:50px 40px; display:flex; flex-direction:column; justify-content:center; text-align:center;'>\n      \n      <h1 style='font-size:42px; color:#1A1A1A; font-family:\"Playfair Display\", Georgia, serif; font-weight:700; margin:0 0 5px 0; line-height:1.2; letter-spacing:0.5px;'>\n        Still Thinking<br/>It <span style='color:#BD2744;'>Over?</span>\n      </h1>\n\n      <div style='width:80%; height:1px; background-color:#888; margin:20px auto 25px auto;'></div>\n\n      <p style='font-size:18px; color:#1A1A1A; margin-bottom:25px; line-height:1.4; font-family:\"Helvetica Neue\", sans-serif; font-weight:500;'>\n        Your selected styles<br/>are waiting <span style='color:#BD2744;'>in the cart.</span>\n      </p>\n\n      <div style='background-color:#F5D4D9; border:1px dashed #BD2744; border-radius:4px; padding:20px; margin:0 auto 25px auto; width:80%; box-sizing:border-box;'>\n        <p style='margin:0 0 5px 0; color:#BD2744; font-size:16px; font-family:\"Playfair Display\", Georgia, serif;'>Get</p>\n        <h2 style='margin:0 0 5px 0; color:#BD2744; font-size:48px; font-family:\"Playfair Display\", Georgia, serif; font-weight:900;'>10% OFF</h2>\n        <p style='margin:0 0 15px 0; color:#BD2744; font-size:14px; font-family:\"Playfair Display\", Georgia, serif;'>If You Check out Now</p>\n        <div style='background-color:#000; color:#fff; display:inline-block; padding:6px 12px; font-size:14px; font-weight:bold; letter-spacing:1px; border-radius:2px;'>\n          Code : <span style='font-family:monospace; font-size:16px;'>STYLE10</span>\n        </div>\n      </div>\n\n      <button type='submit' style='width:80%; margin:0 auto; padding:16px; background-color:#BD2744; color:#ffffff; font-size:15px; font-weight:bold; text-transform:uppercase; border:none; border-radius:4px; cursor:pointer; letter-spacing:1px; display:flex; align-items:center; justify-content:center; font-family:\"Helvetica Neue\", sans-serif;'>\n        CLAIM MY DISCOUNT <span style='margin-left:8px; font-size:20px;'>&rarr;</span>\n      </button>\n\n      <p style='font-size:13px; color:#444; margin-top:20px; font-family:\"Helvetica Neue\", sans-serif; font-weight:500;'>\n        Offer valid for the next <span style='color:#BD2744;'>15 minutes</span>\n      </p>\n\n    </div>\n\n  </form>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Abandoned Cart",
        "Coupon Discount"
      ],
      "industry": [
        "Fashion",
        "E-commerce"
      ]
    },
    {
      "id": "template-87",
      "category": "Lead Generation",
      "image": "ai_productivity_book.webp",
      "pages": [
        {
          "name": "AI Guide Freebie",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; position:relative; height:100vh; width:100vw; overflow-x:hidden; font-family:\"Inter\", \"Helvetica Neue\", Helvetica, Arial, sans-serif; background:rgba(0,0,0,0.5);'>\n  <style>\n    @media (max-width: 768px) {\n      .popup-wrapper {\n        flex-direction: column !important;\n        margin: 20px 10px !important;\n        max-width: calc(100% - 20px) !important;\n      }\n      .popup-left, .popup-right {\n        width: 100% !important;\n        min-height: 250px !important;\n      }\n      .popup-right {\n        order: -1 !important;\n      }\n    }\n  </style>\n\n  <form data-gjs-type='column' class='popup-wrapper' method='post' style='background:linear-gradient(to right, #FFFFFF 40%, #EFEEFA 100%); border-radius:16px; max-width:850px; width:90%; margin:60px auto; display:flex; flex-direction:row; box-shadow:0 15px 40px rgba(0,0,0,0.2); overflow:hidden; position:relative; min-height:480px;'>\n    \n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:16px !important; right:16px !important; font-size:16px !important; font-weight:normal !important; color:#888 !important; background:#fff !important; border:1px solid #eaeaea !important; cursor:pointer !important; z-index:9999 !important; width:30px !important; height:30px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important; box-shadow: 0 2px 5px rgba(0,0,0,0.05);' data-gjs-type='close-button' title='Close'>&times;</button>\n\n    <div data-gjs-type='column' class='popup-left' style='flex:1.1; padding:50px 40px; display:flex; flex-direction:column; justify-content:center; text-align:left;'>\n      \n      <div style='display:inline-block; border:1px solid #7047EB; color:#7047EB; font-size:11px; font-weight:bold; letter-spacing:1px; text-transform:uppercase; padding:6px 12px; border-radius:20px; align-self:flex-start; margin-bottom:20px;'>\n        Free Guide\n      </div>\n\n      <h1 style='font-size:36px; color:#111827; font-family:\"Inter\", \"Helvetica Neue\", sans-serif; font-weight:800; margin:0 0 15px 0; line-height:1.2; letter-spacing:0px;'>\n        Boost Productivity<br/>With <span style='color:#7047EB;'>AI</span>\n      </h1>\n\n      <p style='font-size:15px; color:#374151; margin-bottom:30px; line-height:1.5;'>\n        Discover <strong style='color:#7047EB;'>25 practical AI workflows</strong> that can save hours every week.\n      </p>\n\n      <div style='width:100%; margin-bottom:15px;'>\n        <input type='text' placeholder='Name' style='width:100%; padding:14px 18px; font-size:15px; border:1px solid #E5E7EB; border-radius:8px; box-sizing:border-box; outline:none; background:#ffffff; box-shadow:inset 0 1px 3px rgba(0,0,0,0.02);' required />\n      </div>\n\n      <div style='width:100%; margin-bottom:25px;'>\n        <input type='email' placeholder='Email' style='width:100%; padding:14px 18px; font-size:15px; border:1px solid #E5E7EB; border-radius:8px; box-sizing:border-box; outline:none; background:#ffffff; box-shadow:inset 0 1px 3px rgba(0,0,0,0.02);' required />\n      </div>\n\n      <button type='submit' style='width:100%; padding:16px; background-color:#7047EB; color:#ffffff; font-size:15px; font-weight:bold; border:none; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; letter-spacing:0.5px; box-shadow:0 4px 12px rgba(112, 71, 235, 0.3);'>\n        SEND ME THE GUIDE <span style='margin-left:8px; font-size:18px;'>&rsaquo;</span>\n      </button>\n\n      <p style='font-size:11px; color:#9CA3AF; margin-top:20px; font-style:italic; text-align:center;'>\n        100% free. No spam. Unsubscribe anytime.\n      </p>\n\n    </div>\n\n    <div data-gjs-type='column' class='popup-right' style='flex:1; display:flex; justify-content:center; align-items:center; padding:20px; min-height:400px;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/ai_productivity_book.webp' alt='AI Productivity Guide' style='width:100%; max-width:320px; height:auto; object-fit:contain; display:block; filter: drop-shadow(0 20px 30px rgba(0,0,0,0.15));' onerror=\"this.style.display='none';\">\n    </div>\n\n  </form>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation",
        "Ebook"
      ],
      "industry": [
        "Technology",
        "Education"
      ]
    },
    {
      "id": "template-88",
      "category": "Lead Generation",
      "image": "save_money_guide.webp",
      "pages": [
        {
          "name": "Finance Guide",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; position:relative; height:100vh; width:100vw; overflow-x:hidden; font-family:\"Inter\", \"Helvetica Neue\", Helvetica, Arial, sans-serif; background:rgba(0,0,0,0.5);'>\n  <style>\n    @media (max-width: 768px) {\n      .popup-wrapper-88 { flex-direction: column !important; margin: 20px 10px !important; max-width: calc(100% - 20px) !important; }\n      .popup-left-88, .popup-right-88 { width: 100% !important; min-height: 250px !important; }\n    }\n  </style>\n  <form data-gjs-type='column' class='popup-wrapper-88' method='post' style='background-color:#ffffff; border-radius:12px; max-width:850px; width:90%; margin:60px auto; display:flex; flex-direction:row; box-shadow:0 15px 40px rgba(0,0,0,0.25); overflow:hidden; position:relative; min-height:480px;'>\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:16px !important; right:16px !important; font-size:16px !important; color:#888 !important; background:#fff !important; border:1px solid #eaeaea !important; cursor:pointer !important; z-index:9999 !important; width:30px !important; height:30px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n    <div data-gjs-type='column' class='popup-left-88' style='width:50%; background-color:#F1F8EE; display:flex; justify-content:center; align-items:center; padding:0;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/save_money_guide.webp' alt='Save Money Guide' style='width:100%; height:100%; object-fit:cover; display:block;' onerror=\"this.style.display='none';\">\n    </div>\n    <div data-gjs-type='column' class='popup-right-88' style='width:50%; padding:50px 40px; display:flex; flex-direction:column; justify-content:center; text-align:center;'>\n      <h1 style='font-size:32px; color:#2A6732; font-family:\"Inter\", sans-serif; font-weight:800; margin:0 0 5px 0; line-height:1.1;'>\n        <span style='font-size:54px;'>101</span> Ways to<br/>Save More Money\n      </h1>\n      <div style='display:inline-block; margin:0 auto 20px auto;'>\n        <h2 style='font-size:36px; color:#6F9D46; font-family:\"Caveat\", \"Brush Script MT\", cursive; font-weight:bold; margin:0;'>This Year</h2>\n        <div style='height:2px; width:100%; background-color:#B3D698; margin-top:2px;'></div>\n      </div>\n      <p style='font-size:14px; color:#4B5563; margin-bottom:25px; line-height:1.5;'>Learn practical strategies to build wealth<br/>and improve your financial future</p>\n      \n      <div style='position:relative; width:100%; margin-bottom:15px;'>\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#2A6732\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style='position:absolute; left:12px; top:50%; transform:translateY(-50%);'><path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"></path><circle cx=\"12\" cy=\"7\" r=\"4\"></circle></svg>\n        <input type='text' placeholder='First Name' style='width:100%; padding:12px 12px 12px 40px; font-size:14px; border:1px solid #E5E7EB; border-radius:6px; box-sizing:border-box; outline:none;' required />\n      </div>\n      <div style='position:relative; width:100%; margin-bottom:25px;'>\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#2A6732\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style='position:absolute; left:12px; top:50%; transform:translateY(-50%);'><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"></path><polyline points=\"22,6 12,13 2,6\"></polyline></svg>\n        <input type='email' placeholder='Your Email address' style='width:100%; padding:12px 12px 12px 40px; font-size:14px; border:1px solid #E5E7EB; border-radius:6px; box-sizing:border-box; outline:none;' required />\n      </div>\n      \n      <button type='submit' style='width:100%; padding:14px; background-color:#2A6732; color:#ffffff; font-size:15px; font-weight:bold; border:none; border-radius:6px; cursor:pointer; display:flex; align-items:center; justify-content:center; letter-spacing:0.5px;'>GET THE GUIDE</button>\n    </div>\n  </form>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation",
        "Ebook"
      ],
      "industry": [
        "Finance",
        "Education"
      ]
    },
    {
      "id": "template-89",
      "category": "Lead Generation",
      "image": "home_buyers_guide.webp",
      "pages": [
        {
          "name": "Real Estate Guide",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; position:relative; height:100vh; width:100vw; overflow-x:hidden; font-family:\"Inter\", \"Helvetica Neue\", Helvetica, Arial, sans-serif; background:rgba(0,0,0,0.5);'>\n  <style>\n    @media (max-width: 768px) {\n      .popup-wrapper-89 { flex-direction: column !important; margin: 20px 10px !important; max-width: calc(100% - 20px) !important; }\n      .popup-left-89, .popup-right-89 { width: 100% !important; min-height: 250px !important; border-radius:0 !important; }\n      .popup-right-89 { order: -1 !important; }\n    }\n  </style>\n  <form data-gjs-type='column' class='popup-wrapper-89' method='post' style='background-color:#ffffff; border-radius:12px; max-width:850px; width:90%; margin:60px auto; display:flex; flex-direction:row; box-shadow:0 15px 40px rgba(0,0,0,0.25); overflow:hidden; position:relative; min-height:480px;'>\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:16px !important; right:16px !important; font-size:16px !important; color:#888 !important; background:#fff !important; border:1px solid #eaeaea !important; cursor:pointer !important; z-index:9999 !important; width:30px !important; height:30px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n    \n    <div data-gjs-type='column' class='popup-left-89' style='width:50%; background-color:#ffffff; padding:50px 40px; display:flex; flex-direction:column; justify-content:center; text-align:left; position:relative; z-index:2; border-radius:0 100px 100px 0; box-shadow:10px 0 20px rgba(0,0,0,0.05);'>\n      <div style='display:flex; align-items:center; margin-bottom:20px;'>\n        <div style='background-color:#132F4C; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-right:-10px; z-index:2;'>\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path><polyline points=\"9 22 9 12 15 12 15 22\"></polyline></svg>\n        </div>\n        <div style='background-color:#D19E45; color:#fff; font-size:12px; font-weight:bold; padding:4px 12px 4px 18px; border-radius:4px;'>FREE GUIDE</div>\n      </div>\n      \n      <h1 style='font-size:36px; color:#132F4C; font-family:\"Playfair Display\", Georgia, serif; font-weight:900; margin:0 0 5px 0; line-height:1.1;'>Buy Your<br/>Dream Home</h1>\n      <h1 style='font-size:42px; color:#D19E45; font-family:\"Caveat\", \"Brush Script MT\", cursive; font-weight:normal; margin:0 0 20px 0; line-height:1.1;'>With Confidence</h1>\n      \n      <div style='width:100%; height:1px; background-color:#E5E7EB; margin-bottom:20px;'></div>\n      \n      <p style='font-size:14px; color:#4B5563; margin-bottom:25px; line-height:1.5;'>Learn the key steps, hidden costs, and<br/>expert tips every homebuyer should know.</p>\n      \n      <div style='position:relative; width:100%; margin-bottom:15px;'>\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#9CA3AF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style='position:absolute; left:12px; top:50%; transform:translateY(-50%);'><path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"></path><circle cx=\"12\" cy=\"7\" r=\"4\"></circle></svg>\n        <input type='text' placeholder='First Name' style='width:100%; padding:12px 12px 12px 40px; font-size:14px; border:1px solid #E5E7EB; border-radius:4px; box-sizing:border-box; outline:none;' required />\n      </div>\n      <div style='position:relative; width:100%; margin-bottom:25px;'>\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#9CA3AF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style='position:absolute; left:12px; top:50%; transform:translateY(-50%);'><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"></path><polyline points=\"22,6 12,13 2,6\"></polyline></svg>\n        <input type='email' placeholder='Email' style='width:100%; padding:12px 12px 12px 40px; font-size:14px; border:1px solid #E5E7EB; border-radius:4px; box-sizing:border-box; outline:none;' required />\n      </div>\n      \n      <button type='submit' style='width:100%; padding:14px; background-color:#132F4C; color:#ffffff; font-size:14px; font-weight:bold; text-transform:uppercase; border:none; border-radius:4px; cursor:pointer; display:flex; align-items:center; justify-content:center; letter-spacing:0.5px;'>\n        GET THE GUIDE <span style='margin-left:8px; font-size:16px;'>&rsaquo;</span>\n      </button>\n    </div>\n    \n    <div data-gjs-type='column' class='popup-right-89' style='position:absolute; top:0; right:0; bottom:0; width:60%; background-color:#eaeaea; display:flex; justify-content:center; align-items:stretch; padding:0; z-index:1;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/home_buyers_guide.webp' alt='Home Buyers Guide' style='width:100%; height:100%; object-fit:cover; display:block;' onerror=\"this.style.display='none';\">\n    </div>\n  </form>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation",
        "Ebook"
      ],
      "industry": [
        "Real Estate",
        "Education"
      ]
    },
    {
      "id": "template-90",
      "category": "Lead Generation",
      "image": "laptop_buying_guide.webp",
      "pages": [
        {
          "name": "Tech Buyer Guide",
          "frames": [
            {
              "component": "<body data-gjs-type='body' style='margin:0; padding:0; position:relative; height:100vh; width:100vw; overflow-x:hidden; font-family:\"Inter\", \"Helvetica Neue\", Helvetica, Arial, sans-serif; background:rgba(0,0,0,0.5);'>\n  <style>\n    @media (max-width: 768px) {\n      .popup-wrapper-90 { flex-direction: column !important; margin: 20px 10px !important; max-width: calc(100% - 20px) !important; }\n      .popup-left-90, .popup-right-90 { width: 100% !important; min-height: 250px !important; }\n    }\n  </style>\n  <form data-gjs-type='column' class='popup-wrapper-90' method='post' style='background-color:#F7F9FC; border-radius:12px; max-width:850px; width:90%; margin:60px auto; display:flex; flex-direction:row; box-shadow:0 15px 40px rgba(0,0,0,0.25); overflow:hidden; position:relative; min-height:480px;'>\n    <button class='close-btn ysi-close-btn' style='position:absolute !important; top:16px !important; right:16px !important; font-size:16px !important; color:#888 !important; background:#fff !important; border:1px solid #eaeaea !important; cursor:pointer !important; z-index:9999 !important; width:30px !important; height:30px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important;' data-gjs-type='close-button' title='Close'>&times;</button>\n    \n    <div data-gjs-type='column' class='popup-left-90' style='width:50%; background-color:#051838; display:flex; justify-content:center; align-items:stretch; padding:0;'>\n      <img src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/laptop_buying_guide.webp' alt='Laptop Buying Guide' style='width:100%; height:100%; object-fit:cover; display:block;' onerror=\"this.style.display='none';\">\n    </div>\n    \n    <div data-gjs-type='column' class='popup-right-90' style='width:50%; padding:50px 40px; display:flex; flex-direction:column; justify-content:center; text-align:center;'>\n      <h2 style='font-size:38px; color:#F0A619; font-family:\"Caveat\", \"Brush Script MT\", cursive; font-weight:normal; margin:0 0 -5px 0; line-height:1.1;'>Free</h2>\n      <h1 style='font-size:32px; color:#051838; font-family:\"Inter\", sans-serif; font-weight:900; margin:0 0 15px 0; line-height:1.1; text-transform:uppercase;'>BUYER'S GUIDE</h1>\n      \n      <div style='width:60%; height:2px; background-color:#E5E7EB; margin:0 auto 20px auto;'></div>\n      \n      <h3 style='font-size:20px; color:#111827; font-weight:normal; margin:0 0 5px 0;'>How To Choose The</h3>\n      <h3 style='font-size:24px; color:#005BFF; font-style:italic; font-weight:bold; margin:0 0 20px 0;'>Perfect Laptop</h3>\n      \n      <p style='font-size:14px; color:#4B5563; margin-bottom:25px; line-height:1.5;'>\n        Compare specifications, understand<br/>performances metrics, and<br/>\n        <strong style='color:#005BFF;'>avoid costly buying mistakes.</strong>\n      </p>\n      \n      <div style='position:relative; width:100%; margin-bottom:15px;'>\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#4B5563\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style='position:absolute; left:12px; top:50%; transform:translateY(-50%);'><path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"></path><circle cx=\"12\" cy=\"7\" r=\"4\"></circle></svg>\n        <input type='text' placeholder='First Name' style='width:100%; padding:12px 12px 12px 40px; font-size:14px; border:1px solid #E5E7EB; border-radius:8px; box-sizing:border-box; outline:none;' required />\n      </div>\n      <div style='position:relative; width:100%; margin-bottom:25px;'>\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#4B5563\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style='position:absolute; left:12px; top:50%; transform:translateY(-50%);'><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"></path><polyline points=\"22,6 12,13 2,6\"></polyline></svg>\n        <input type='email' placeholder='Email' style='width:100%; padding:12px 12px 12px 40px; font-size:14px; border:1px solid #E5E7EB; border-radius:8px; box-sizing:border-box; outline:none;' required />\n      </div>\n      \n      <button type='submit' style='width:100%; padding:14px; background-color:#005BFF; color:#ffffff; font-size:15px; font-weight:bold; border:none; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; letter-spacing:0.5px;'>\n        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right:8px;\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"></path><polyline points=\"7 10 12 15 17 10\"></polyline><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"></line></svg>\n        SEND ME THE GUIDE\n      </button>\n    </div>\n  </form>\n</body>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation",
        "Ebook"
      ],
      "industry": [
        "Technology",
        "E-commerce"
      ]
    },
    {
      "id": "template-91",
      "category": "Quiz",
      "image": "store-type-quiz.webp",
      "survey_engine": {
        "version": 1,
        "title": "Store Type Quiz",
        "questions": [
          {
            "id": "q1",
            "type": "single-choice",
            "text": "What type of store do you run?",
            "required": true,
            "options": [
              {
                "id": "fashion",
                "label": "Fashion & Apparel",
                "score": 10,
                "goto": "q2"
              },
              {
                "id": "electronics",
                "label": "Electronics & Tech",
                "score": 10,
                "goto": "q2"
              },
              {
                "id": "home",
                "label": "Home & Lifestyle",
                "score": 8,
                "goto": "q2"
              },
              {
                "id": "other",
                "label": "Other / General Store",
                "score": 5,
                "goto": "outcome_lead"
              }
            ]
          },
          {
            "id": "q2",
            "type": "single-choice",
            "text": "What's your biggest challenge right now?",
            "showIf": {
              "questionId": "q1",
              "answers": [
                "fashion",
                "electronics",
                "home"
              ]
            },
            "required": true,
            "options": [
              {
                "id": "traffic",
                "label": "Getting more website traffic",
                "score": 5
              },
              {
                "id": "conversion",
                "label": "Improving conversion rates",
                "score": 8
              },
              {
                "id": "retention",
                "label": "Customer retention & loyalty",
                "score": 6
              },
              {
                "id": "cart",
                "label": "Reducing cart abandonment",
                "score": 7
              }
            ]
          },
          {
            "id": "q3",
            "type": "scale",
            "text": "How would you rate your current marketing efforts?",
            "required": true,
            "min": 1,
            "max": 5,
            "labels": {
              "1": "Poor",
              "3": "Average",
              "5": "Excellent"
            },
            "scoreMultiplier": 2
          },
          {
            "id": "q4",
            "type": "single-choice",
            "text": "What's your monthly online revenue range?",
            "required": true,
            "options": [
              {
                "id": "starter",
                "label": "Under $5,000 / month",
                "score": 3
              },
              {
                "id": "growing",
                "label": "$5,000 – $25,000 / month",
                "score": 6
              },
              {
                "id": "established",
                "label": "$25,000 – $100,000 / month",
                "score": 9
              },
              {
                "id": "enterprise",
                "label": "Over $100,000 / month",
                "score": 10
              }
            ]
          }
        ],
        "branchRules": [
          {
            "when": {
              "q1": "fashion"
            },
            "outcome": "outcome_fashion"
          },
          {
            "when": {
              "q1": "electronics"
            },
            "outcome": "outcome_electronics"
          }
        ],
        "outcomes": [
          {
            "id": "outcome_fashion",
            "pageIndex": 1,
            "title": "Fashion Store Offers"
          },
          {
            "id": "outcome_electronics",
            "pageIndex": 2,
            "title": "Electronics & Gadget Offers"
          },
          {
            "id": "outcome_lead",
            "pageIndex": 3,
            "title": "Get Personalized Help",
            "showFollowUpForm": true,
            "default": true
          }
        ],
        "scoring": {
          "enabled": true,
          "useScoreForOutcome": false
        },
        "leadCapture": {
          "enabled": true,
          "headline": "Enter your email to see your quiz results",
          "placeholder": "your@email.com",
          "buttonText": "See My Results"
        },
        "styleTheme": "quiz-theme-vibrant"
      },
      "pages": [
        {
          "name": "Quiz",
          "frames": [
            {
              "component": "<div class='yslg-page yslg-page-0 survey-form-shell quiz-theme-vibrant' data-gjs-type='column'><button class='ysi-close-btn' data-gjs-type='close-button' style='position:absolute;top:12px;right:12px;border:none;background:#f3f4f6;width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;line-height:1;'>&times;</button><div class='survey-form-header'><span class='survey-form-badge quiz'>STORE TYPE QUIZ</span><h2 class='survey-form-title'>Find Your Perfect Offer</h2><p class='survey-form-meta'>4 questions · About 2 minutes</p></div><div class='survey-form-body'><div class='yslg-survey-container' data-gjs-type='survey-container'></div></div><div class='survey-form-footer'>Your answers help us personalize your results. We never share your data with third parties.</div></div>"
            }
          ]
        },
        {
          "name": "Fashion Offers",
          "frames": [
            {
              "component": "<div class='yslg-page yslg-page-1 survey-form-shell quiz-theme-vibrant' style='text-align:center;'><button class='ysi-close-btn' data-gjs-type='close-button' style='position:absolute;top:12px;right:12px;border:none;background:#f3f4f6;width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;'>&times;</button><div class='survey-form-header'><span class='survey-form-badge quiz'>YOUR RESULT</span><p class='yslg-survey-score-display'></p><h2 data-outcome-title class='survey-form-title' style='color:#be185d;'>Fashion Store Offers</h2><p class='survey-form-meta'>Exclusive deals curated for fashion retailers.</p></div><div class='survey-form-body'><div data-gjs-type='coupon' data-code='FASHION20' style='font-size:20px;font-weight:bold;border:2px dashed #be185d;padding:14px 28px;border-radius:12px;display:inline-block;color:#be185d;'>FASHION20</div><p style='font-size:14px;color:#888;margin-top:16px;'>20% off seasonal collections</p></div></div>"
            }
          ]
        },
        {
          "name": "Electronics Offers",
          "frames": [
            {
              "component": "<div class='yslg-page yslg-page-2 survey-form-shell quiz-theme-vibrant' style='text-align:center;'><button class='ysi-close-btn' data-gjs-type='close-button' style='position:absolute;top:12px;right:12px;border:none;background:#f3f4f6;width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;'>&times;</button><div class='survey-form-header'><span class='survey-form-badge quiz'>YOUR RESULT</span><p class='yslg-survey-score-display'></p><h2 data-outcome-title class='survey-form-title' style='color:#1d4ed8;'>Electronics & Gadget Offers</h2><p class='survey-form-meta'>Top tech deals for your electronics store.</p></div><div class='survey-form-body'><div data-gjs-type='coupon' data-code='TECH15' style='font-size:20px;font-weight:bold;border:2px dashed #1d4ed8;padding:14px 28px;border-radius:12px;display:inline-block;color:#1d4ed8;'>TECH15</div><p style='font-size:14px;color:#888;margin-top:16px;'>15% off latest gadgets & accessories</p></div></div>"
            }
          ]
        },
        {
          "name": "Lead Capture",
          "frames": [
            {
              "component": "<form method='post' class='yslg-page yslg-page-3 survey-popup yslg-survey-followup' style='max-width:520px;width:95%;margin:60px auto;background:#fff;border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,0.15);padding:36px 28px;position:relative;text-align:center;'>\n  <button type='button' class='ysi-close-btn' data-gjs-type='close-button' style='position:absolute;top:10px;right:10px;border:none;background:transparent;font-size:22px;cursor:pointer;'>&times;</button>\n  <h2 data-outcome-title style='font-size:26px;color:#111;margin:0 0 8px;'>Get Personalized Help</h2>\n  <p style='color:#555;margin-bottom:20px;'>Tell us your email and we'll send tailored recommendations.</p>\n  <input type='email' name='email' data-gjs-type='email-input' placeholder='your@email.com' required style='width:100%;padding:14px;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;font-size:15px;box-sizing:border-box;' />\n  <button type='submit' data-gjs-type='button' style='width:100%;padding:14px;background:#6366f1;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;'>Send My Results</button>\n</form>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "E-commerce",
        "Fashion",
        "Electronics"
      ]
    },
    {
      "id": "template-92",
      "category": "Quiz",
      "image": "shopping-style-quiz.webp",
      "survey_engine": {
        "version": 1,
        "title": "Shopping Style Quiz",
        "questions": [
          {
            "id": "q1",
            "type": "single-choice",
            "text": "How do you usually shop online?",
            "required": true,
            "options": [
              {
                "id": "bargain",
                "label": "I hunt for the best deals",
                "score": 5
              },
              {
                "id": "quality",
                "label": "I prioritize quality over price",
                "score": 8
              },
              {
                "id": "trendy",
                "label": "I follow trends and new arrivals",
                "score": 10
              },
              {
                "id": "practical",
                "label": "I buy only what I need",
                "score": 4
              }
            ]
          },
          {
            "id": "q2",
            "type": "single-choice",
            "text": "What's your typical budget per purchase?",
            "required": true,
            "options": [
              {
                "id": "low",
                "label": "Under $30",
                "score": 3
              },
              {
                "id": "mid",
                "label": "$30 – $100",
                "score": 6
              },
              {
                "id": "high",
                "label": "$100 – $300",
                "score": 9
              },
              {
                "id": "premium",
                "label": "Over $300",
                "score": 10
              }
            ]
          },
          {
            "id": "q3",
            "type": "scale",
            "text": "How important are product reviews to you?",
            "required": true,
            "min": 1,
            "max": 5,
            "labels": {
              "1": "Not at all",
              "5": "Essential"
            },
            "scoreMultiplier": 2
          },
          {
            "id": "q4",
            "type": "single-choice",
            "text": "Which style best describes you?",
            "required": true,
            "options": [
              {
                "id": "minimal",
                "label": "Minimalist & clean",
                "score": 6
              },
              {
                "id": "bold",
                "label": "Bold & expressive",
                "score": 10
              },
              {
                "id": "classic",
                "label": "Classic & timeless",
                "score": 8
              },
              {
                "id": "casual",
                "label": "Casual & comfortable",
                "score": 5
              }
            ]
          },
          {
            "id": "q5",
            "type": "single-choice",
            "text": "How often do you shop online?",
            "required": true,
            "options": [
              {
                "id": "weekly",
                "label": "Weekly or more",
                "score": 10
              },
              {
                "id": "monthly",
                "label": "A few times a month",
                "score": 7
              },
              {
                "id": "rarely",
                "label": "Once a month or less",
                "score": 4
              }
            ]
          }
        ],
        "branchRules": [
          {
            "when": {
              "q4": "bold"
            },
            "outcome": "outcome_bold"
          },
          {
            "when": {
              "q4": "classic"
            },
            "outcome": "outcome_classic"
          }
        ],
        "outcomes": [
          {
            "id": "outcome_bold",
            "pageIndex": 1,
            "title": "The Trendsetter"
          },
          {
            "id": "outcome_classic",
            "pageIndex": 2,
            "title": "The Classic Shopper"
          },
          {
            "id": "outcome_default",
            "pageIndex": 3,
            "title": "Your Personalized Picks",
            "default": true
          }
        ],
        "scoring": {
          "enabled": true,
          "useScoreForOutcome": false
        },
        "leadCapture": {
          "enabled": true,
          "headline": "Enter your email to unlock your shopping style results",
          "placeholder": "your@email.com",
          "buttonText": "Get My Results"
        },
        "styleTheme": "quiz-theme-playful"
      },
      "pages": [
        {
          "name": "Quiz",
          "frames": [
            {
              "component": "<div class='yslg-page yslg-page-0 survey-form-shell quiz-theme-playful' data-gjs-type='column'><button class='ysi-close-btn' data-gjs-type='close-button' style='position:absolute;top:12px;right:12px;border:none;background:#f3f4f6;width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;line-height:1;'>&times;</button><div class='survey-form-header'><span class='survey-form-badge quiz'>SHOPPING STYLE QUIZ</span><h2 class='survey-form-title'>Discover Your Shopping Style</h2><p class='survey-form-meta'>5 questions · About 2 minutes</p></div><div class='survey-form-body'><div class='yslg-survey-container' data-gjs-type='survey-container'></div></div><div class='survey-form-footer'>Your answers help us personalize your results. We never share your data with third parties.</div></div>"
            }
          ]
        },
        {
          "name": "Trendsetter",
          "frames": [
            {
              "component": "<div class='yslg-page yslg-page-1 survey-form-shell quiz-theme-playful' style='text-align:center;'><button class='ysi-close-btn' data-gjs-type='close-button' style='position:absolute;top:12px;right:12px;border:none;background:#f3f4f6;width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;'>&times;</button><div class='survey-form-header'><span class='survey-form-badge quiz'>YOUR RESULT</span><p class='yslg-survey-score-display'></p><h2 data-outcome-title class='survey-form-title' style='color:#7c3aed;'>You're a Trendsetter!</h2><p class='survey-form-meta'>Bold choices, fresh picks curated just for you.</p></div><div class='survey-form-body'><div data-gjs-type='coupon' data-code='STYLE25' style='font-size:20px;font-weight:bold;border:2px dashed #7c3aed;padding:14px 28px;border-radius:12px;display:inline-block;color:#7c3aed;'>STYLE25</div><p style='font-size:14px;color:#888;margin-top:16px;'>25% off our new arrivals collection</p></div></div>"
            }
          ]
        },
        {
          "name": "Classic Shopper",
          "frames": [
            {
              "component": "<div class='yslg-page yslg-page-2 survey-form-shell quiz-theme-playful' style='text-align:center;'><button class='ysi-close-btn' data-gjs-type='close-button' style='position:absolute;top:12px;right:12px;border:none;background:#f3f4f6;width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;'>&times;</button><div class='survey-form-header'><span class='survey-form-badge quiz'>YOUR RESULT</span><p class='yslg-survey-score-display'></p><h2 data-outcome-title class='survey-form-title' style='color:#1d4ed8;'>The Classic Shopper</h2><p class='survey-form-meta'>Timeless pieces that never go out of style.</p></div><div class='survey-form-body'><div data-gjs-type='coupon' data-code='CLASSIC15' style='font-size:20px;font-weight:bold;border:2px dashed #1d4ed8;padding:14px 28px;border-radius:12px;display:inline-block;color:#1d4ed8;'>CLASSIC15</div><p style='font-size:14px;color:#888;margin-top:16px;'>15% off our essentials collection</p></div></div>"
            }
          ]
        },
        {
          "name": "Your Picks",
          "frames": [
            {
              "component": "<form method='post' class='yslg-page yslg-page-3 survey-form-shell quiz-theme-playful yslg-survey-followup'><button type='button' class='ysi-close-btn' data-gjs-type='close-button' style='position:absolute;top:12px;right:12px;border:none;background:#f3f4f6;width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;'>&times;</button><div class='survey-form-header'><h2 data-outcome-title class='survey-form-title'>Your Personalized Picks</h2><p class='survey-form-meta'>Enter your email and we'll send hand-picked recommendations.</p></div><div class='survey-form-body'><input type='email' name='email' data-gjs-type='email-input' placeholder='your@email.com' required style='width:100%;padding:14px;border:2px solid #e5e7eb;border-radius:12px;margin-bottom:12px;font-size:15px;box-sizing:border-box;' /><button type='submit' data-gjs-type='button' style='width:100%;padding:14px;background:#6366f1;color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;'>Submit</button></div></form>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "E-commerce",
        "Fashion"
      ]
    },
    {
      "id": "template-93",
      "category": "Quiz",
      "image": "product-match-quiz.webp",
      "survey_engine": {
        "version": 1,
        "title": "Product Match Quiz",
        "questions": [
          {
            "id": "q1",
            "type": "single-choice",
            "text": "What are you shopping for today?",
            "required": true,
            "options": [
              {
                "id": "skincare",
                "label": "Skincare & beauty",
                "score": 10,
                "goto": "q2"
              },
              {
                "id": "fitness",
                "label": "Fitness & wellness",
                "score": 10,
                "goto": "q3"
              },
              {
                "id": "tech",
                "label": "Tech & gadgets",
                "score": 10,
                "goto": "q4"
              },
              {
                "id": "unsure",
                "label": "I'm not sure yet",
                "score": 3,
                "goto": "outcome_help"
              }
            ]
          },
          {
            "id": "q2",
            "type": "single-choice",
            "text": "What's your primary skin concern?",
            "showIf": {
              "questionId": "q1",
              "answers": [
                "skincare"
              ]
            },
            "required": true,
            "options": [
              {
                "id": "dry",
                "label": "Dryness & hydration",
                "score": 5
              },
              {
                "id": "acne",
                "label": "Acne & blemishes",
                "score": 7
              },
              {
                "id": "aging",
                "label": "Anti-aging & fine lines",
                "score": 8
              },
              {
                "id": "sensitive",
                "label": "Sensitive skin",
                "score": 6
              }
            ]
          },
          {
            "id": "q3",
            "type": "single-choice",
            "text": "What's your fitness goal?",
            "showIf": {
              "questionId": "q1",
              "answers": [
                "fitness"
              ]
            },
            "required": true,
            "options": [
              {
                "id": "weight",
                "label": "Weight management",
                "score": 6
              },
              {
                "id": "muscle",
                "label": "Build muscle",
                "score": 8
              },
              {
                "id": "energy",
                "label": "More energy",
                "score": 7
              },
              {
                "id": "flexibility",
                "label": "Flexibility & recovery",
                "score": 5
              }
            ]
          },
          {
            "id": "q4",
            "type": "single-choice",
            "text": "What matters most in a gadget?",
            "showIf": {
              "questionId": "q1",
              "answers": [
                "tech"
              ]
            },
            "required": true,
            "options": [
              {
                "id": "battery",
                "label": "Battery life",
                "score": 6
              },
              {
                "id": "performance",
                "label": "Performance & speed",
                "score": 9
              },
              {
                "id": "design",
                "label": "Design & portability",
                "score": 7
              },
              {
                "id": "price",
                "label": "Best value for money",
                "score": 5
              }
            ]
          },
          {
            "id": "q5",
            "type": "scale",
            "text": "How experienced are you with this product category?",
            "required": true,
            "min": 1,
            "max": 5,
            "labels": {
              "1": "Beginner",
              "5": "Expert"
            },
            "scoreMultiplier": 2
          }
        ],
        "branchRules": [
          {
            "when": {
              "q1": "skincare"
            },
            "outcome": "outcome_skincare"
          },
          {
            "when": {
              "q1": "fitness"
            },
            "outcome": "outcome_fitness"
          },
          {
            "when": {
              "q1": "tech"
            },
            "outcome": "outcome_tech"
          }
        ],
        "outcomes": [
          {
            "id": "outcome_skincare",
            "pageIndex": 1,
            "title": "Your Skincare Match"
          },
          {
            "id": "outcome_fitness",
            "pageIndex": 2,
            "title": "Your Fitness Match"
          },
          {
            "id": "outcome_tech",
            "pageIndex": 3,
            "title": "Your Tech Match"
          },
          {
            "id": "outcome_help",
            "pageIndex": 4,
            "title": "Let Us Help You Choose",
            "showFollowUpForm": true,
            "default": true
          }
        ],
        "scoring": {
          "enabled": true,
          "useScoreForOutcome": false
        },
        "leadCapture": {
          "enabled": true,
          "headline": "Enter your email to see your product matches",
          "placeholder": "your@email.com",
          "buttonText": "Show My Matches"
        },
        "styleTheme": "quiz-theme-bold"
      },
      "pages": [
        {
          "name": "Quiz",
          "frames": [
            {
              "component": "<div class='yslg-page yslg-page-0 survey-form-shell quiz-theme-bold' data-gjs-type='column'><button class='ysi-close-btn' data-gjs-type='close-button' style='position:absolute;top:12px;right:12px;border:none;background:#f3f4f6;width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;line-height:1;'>&times;</button><div class='survey-form-header'><span class='survey-form-badge quiz'>PRODUCT MATCH QUIZ</span><h2 class='survey-form-title'>Find Your Perfect Product</h2><p class='survey-form-meta'>5 questions · Personalized results</p></div><div class='survey-form-body'><div class='yslg-survey-container' data-gjs-type='survey-container'></div></div><div class='survey-form-footer'>Your answers help us personalize your results. We never share your data with third parties.</div></div>"
            }
          ]
        },
        {
          "name": "Skincare Match",
          "frames": [
            {
              "component": "<div class='yslg-page yslg-page-1 survey-form-shell quiz-theme-bold' style='text-align:center;'><button class='ysi-close-btn' data-gjs-type='close-button' style='position:absolute;top:12px;right:12px;border:none;background:#f3f4f6;width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;'>&times;</button><div class='survey-form-header'><span class='survey-form-badge quiz'>YOUR RESULT</span><p class='yslg-survey-score-display'></p><h2 data-outcome-title class='survey-form-title' style='color:#be185d;'>Your Skincare Match</h2><p class='survey-form-meta'>Products tailored to your skin type and concerns.</p></div><div class='survey-form-body'><div data-gjs-type='coupon' data-code='GLOW20' style='font-size:20px;font-weight:bold;border:2px dashed #be185d;padding:14px 28px;border-radius:12px;display:inline-block;color:#be185d;'>GLOW20</div><p style='font-size:14px;color:#888;margin-top:16px;'>20% off your first skincare order</p></div></div>"
            }
          ]
        },
        {
          "name": "Fitness Match",
          "frames": [
            {
              "component": "<div class='yslg-page yslg-page-2 survey-form-shell quiz-theme-bold' style='text-align:center;'><button class='ysi-close-btn' data-gjs-type='close-button' style='position:absolute;top:12px;right:12px;border:none;background:#f3f4f6;width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;'>&times;</button><div class='survey-form-header'><span class='survey-form-badge quiz'>YOUR RESULT</span><p class='yslg-survey-score-display'></p><h2 data-outcome-title class='survey-form-title' style='color:#059669;'>Your Fitness Match</h2><p class='survey-form-meta'>Gear and supplements for your goals.</p></div><div class='survey-form-body'><div data-gjs-type='coupon' data-code='FIT15' style='font-size:20px;font-weight:bold;border:2px dashed #059669;padding:14px 28px;border-radius:12px;display:inline-block;color:#059669;'>FIT15</div><p style='font-size:14px;color:#888;margin-top:16px;'>15% off fitness essentials</p></div></div>"
            }
          ]
        },
        {
          "name": "Tech Match",
          "frames": [
            {
              "component": "<div class='yslg-page yslg-page-3 survey-form-shell quiz-theme-bold' style='text-align:center;'><button class='ysi-close-btn' data-gjs-type='close-button' style='position:absolute;top:12px;right:12px;border:none;background:#f3f4f6;width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;'>&times;</button><div class='survey-form-header'><span class='survey-form-badge quiz'>YOUR RESULT</span><p class='yslg-survey-score-display'></p><h2 data-outcome-title class='survey-form-title' style='color:#1d4ed8;'>Your Tech Match</h2><p class='survey-form-meta'>Gadgets picked for your lifestyle.</p></div><div class='survey-form-body'><div data-gjs-type='coupon' data-code='TECH10' style='font-size:20px;font-weight:bold;border:2px dashed #1d4ed8;padding:14px 28px;border-radius:12px;display:inline-block;color:#1d4ed8;'>TECH10</div><p style='font-size:14px;color:#888;margin-top:16px;'>10% off recommended tech</p></div></div>"
            }
          ]
        },
        {
          "name": "Help Me Choose",
          "frames": [
            {
              "component": "<form method='post' class='yslg-page yslg-page-4 survey-form-shell quiz-theme-bold yslg-survey-followup'><button type='button' class='ysi-close-btn' data-gjs-type='close-button' style='position:absolute;top:12px;right:12px;border:none;background:#f3f4f6;width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;'>&times;</button><div class='survey-form-header'><h2 data-outcome-title class='survey-form-title'>Let Us Help You Choose</h2><p class='survey-form-meta'>Share your email and our team will recommend the perfect product.</p></div><div class='survey-form-body'><input type='email' name='email' data-gjs-type='email-input' placeholder='your@email.com' required style='width:100%;padding:14px;border:2px solid #e5e7eb;border-radius:12px;margin-bottom:12px;font-size:15px;box-sizing:border-box;' /><button type='submit' data-gjs-type='button' style='width:100%;padding:14px;background:#6366f1;color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;'>Submit</button></div></form>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "E-commerce",
        "Beauty",
        "Electronics"
      ]
    },
    {
      "id": "template-94",
      "category": "Survey",
      "image": "customer-survey.webp",
      "survey_engine": {
        "version": 1,
        "title": "Customer Satisfaction Survey",
        "questions": [
          {
            "id": "q1",
            "type": "scale",
            "text": "How satisfied are you with your overall experience?",
            "required": true,
            "min": 1,
            "max": 5,
            "labels": {
              "1": "Very dissatisfied",
              "3": "Neutral",
              "5": "Very satisfied"
            }
          },
          {
            "id": "q2",
            "type": "single-choice",
            "text": "How easy was it to find what you were looking for?",
            "required": true,
            "options": [
              {
                "id": "very_easy",
                "label": "Very easy"
              },
              {
                "id": "easy",
                "label": "Somewhat easy"
              },
              {
                "id": "neutral",
                "label": "Neutral"
              },
              {
                "id": "difficult",
                "label": "Difficult"
              },
              {
                "id": "very_difficult",
                "label": "Very difficult"
              }
            ]
          },
          {
            "id": "q3",
            "type": "scale",
            "text": "How likely are you to recommend us to a friend or colleague?",
            "required": true,
            "min": 0,
            "max": 10,
            "labels": {
              "0": "Not at all likely",
              "10": "Extremely likely"
            }
          },
          {
            "id": "q4",
            "type": "single-choice",
            "text": "How would you rate our customer support?",
            "required": true,
            "options": [
              {
                "id": "excellent",
                "label": "Excellent"
              },
              {
                "id": "good",
                "label": "Good"
              },
              {
                "id": "average",
                "label": "Average"
              },
              {
                "id": "poor",
                "label": "Poor"
              },
              {
                "id": "na",
                "label": "Haven't contacted support"
              }
            ]
          },
          {
            "id": "q5",
            "type": "single-choice",
            "text": "What could we improve the most?",
            "required": false,
            "options": [
              {
                "id": "speed",
                "label": "Website speed & performance"
              },
              {
                "id": "products",
                "label": "Product selection & variety"
              },
              {
                "id": "pricing",
                "label": "Pricing & value"
              },
              {
                "id": "shipping",
                "label": "Shipping & delivery"
              },
              {
                "id": "support",
                "label": "Customer support"
              },
              {
                "id": "nothing",
                "label": "Nothing — I'm happy!"
              }
            ]
          }
        ],
        "outcomes": [
          {
            "id": "outcome_thanks",
            "pageIndex": 1,
            "title": "Thank You for Your Feedback",
            "default": true
          }
        ],
        "scoring": {
          "enabled": false
        },
        "leadCapture": {
          "enabled": true,
          "headline": "Enter your email to submit your feedback",
          "placeholder": "your@email.com",
          "buttonText": "Submit Survey"
        },
        "styleTheme": "survey-theme-classic"
      },
      "pages": [
        {
          "name": "Survey",
          "frames": [
            {
              "component": "<div class='yslg-page yslg-page-0 survey-form-shell survey-theme-classic' data-gjs-type='column'><button class='ysi-close-btn' data-gjs-type='close-button' style='position:absolute;top:12px;right:12px;border:none;background:#f3f4f6;width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;line-height:1;'>&times;</button><div class='survey-form-header'><span class='survey-form-badge survey'>CUSTOMER SURVEY</span><h2 class='survey-form-title'>How Are We Doing?</h2><p class='survey-form-meta'>5 questions · Your feedback matters</p></div><div class='survey-form-body'><div class='yslg-survey-container' data-gjs-type='survey-container'></div></div><div class='survey-form-footer'>Your responses are confidential and help us improve our service.</div></div>"
            }
          ]
        },
        {
          "name": "Thank You",
          "frames": [
            {
              "component": "<div class='yslg-page yslg-page-1 survey-form-shell survey-theme-classic' style='text-align:center;'><button class='ysi-close-btn' data-gjs-type='close-button' style='position:absolute;top:12px;right:12px;border:none;background:#f3f4f6;width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;'>&times;</button><div class='survey-form-header'><span class='survey-form-badge survey'>THANK YOU</span><h2 class='survey-form-title'>Thank You!</h2><p class='survey-form-meta'>Your feedback has been recorded and helps us serve you better.</p></div><div class='survey-form-body'><p style='font-size:48px;margin:0;'>✓</p><p style='color:#6b7280;font-size:15px;margin-top:12px;'>We appreciate you taking the time to share your thoughts.</p></div></div>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-95",
      "category": "Survey",
      "image": "post-purchase-survey.webp",
      "survey_engine": {
        "version": 1,
        "title": "Post-Purchase Feedback",
        "questions": [
          {
            "id": "q1",
            "type": "scale",
            "text": "How satisfied are you with your recent order?",
            "required": true,
            "min": 1,
            "max": 5,
            "labels": {
              "1": "Very unhappy",
              "5": "Very happy"
            }
          },
          {
            "id": "q2",
            "type": "single-choice",
            "text": "Did the product meet your expectations?",
            "required": true,
            "options": [
              {
                "id": "exceeded",
                "label": "Exceeded expectations"
              },
              {
                "id": "met",
                "label": "Met expectations"
              },
              {
                "id": "below",
                "label": "Below expectations"
              },
              {
                "id": "unsure",
                "label": "Too early to tell"
              }
            ]
          },
          {
            "id": "q3",
            "type": "single-choice",
            "text": "How was the delivery experience?",
            "required": true,
            "options": [
              {
                "id": "fast",
                "label": "Fast and on time"
              },
              {
                "id": "ok",
                "label": "Acceptable"
              },
              {
                "id": "slow",
                "label": "Slower than expected"
              },
              {
                "id": "issues",
                "label": "Had delivery issues"
              }
            ]
          },
          {
            "id": "q4",
            "type": "single-choice",
            "text": "Would you purchase from us again?",
            "required": true,
            "options": [
              {
                "id": "definitely",
                "label": "Definitely yes"
              },
              {
                "id": "probably",
                "label": "Probably yes"
              },
              {
                "id": "maybe",
                "label": "Maybe"
              },
              {
                "id": "no",
                "label": "Probably not"
              }
            ]
          }
        ],
        "outcomes": [
          {
            "id": "outcome_thanks",
            "pageIndex": 1,
            "title": "Thanks for Your Review",
            "default": true
          }
        ],
        "scoring": {
          "enabled": false
        },
        "leadCapture": {
          "enabled": false
        },
        "styleTheme": "survey-theme-minimal"
      },
      "pages": [
        {
          "name": "Survey",
          "frames": [
            {
              "component": "<div class='yslg-page yslg-page-0 survey-form-shell survey-theme-minimal' data-gjs-type='column'><button class='ysi-close-btn' data-gjs-type='close-button' style='position:absolute;top:12px;right:12px;border:none;background:#f3f4f6;width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;line-height:1;'>&times;</button><div class='survey-form-header'><span class='survey-form-badge survey'>POST-PURCHASE SURVEY</span><h2 class='survey-form-title'>How Was Your Order?</h2><p class='survey-form-meta'>4 quick questions · Takes 1 minute</p></div><div class='survey-form-body'><div class='yslg-survey-container' data-gjs-type='survey-container'></div></div><div class='survey-form-footer'>Your responses are confidential and help us improve our service.</div></div>"
            }
          ]
        },
        {
          "name": "Thank You",
          "frames": [
            {
              "component": "<div class='yslg-page yslg-page-1 survey-form-shell survey-theme-minimal' style='text-align:center;'><button class='ysi-close-btn' data-gjs-type='close-button' style='position:absolute;top:12px;right:12px;border:none;background:#f3f4f6;width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;'>&times;</button><div class='survey-form-header'><span class='survey-form-badge survey'>THANK YOU</span><h2 class='survey-form-title'>Thanks for Your Review!</h2><p class='survey-form-meta'>Your input helps us deliver a better shopping experience.</p></div><div class='survey-form-body'><p style='font-size:48px;margin:0;'>✓</p><p style='color:#6b7280;font-size:15px;margin-top:12px;'>We appreciate you taking the time to share your thoughts.</p></div></div>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "E-commerce",
        "Fashion"
      ]
    },
    {
      "id": "template-96",
      "category": "Survey",
      "image": "website-survey.webp",
      "survey_engine": {
        "version": 1,
        "title": "Website Experience Survey",
        "questions": [
          {
            "id": "q1",
            "type": "single-choice",
            "text": "What was the main reason for your visit today?",
            "required": true,
            "options": [
              {
                "id": "browse",
                "label": "Browsing products"
              },
              {
                "id": "buy",
                "label": "Making a purchase"
              },
              {
                "id": "support",
                "label": "Getting support"
              },
              {
                "id": "info",
                "label": "Looking for information"
              }
            ]
          },
          {
            "id": "q2",
            "type": "scale",
            "text": "How easy was it to navigate our website?",
            "required": true,
            "min": 1,
            "max": 5,
            "labels": {
              "1": "Very difficult",
              "5": "Very easy"
            }
          },
          {
            "id": "q3",
            "type": "single-choice",
            "text": "How did you find our website?",
            "required": true,
            "options": [
              {
                "id": "search",
                "label": "Search engine (Google, etc.)"
              },
              {
                "id": "social",
                "label": "Social media"
              },
              {
                "id": "friend",
                "label": "Friend or family referral"
              },
              {
                "id": "ad",
                "label": "Online advertisement"
              },
              {
                "id": "other",
                "label": "Other"
              }
            ]
          },
          {
            "id": "q4",
            "type": "scale",
            "text": "How would you rate the visual design of our site?",
            "required": true,
            "min": 1,
            "max": 5,
            "labels": {
              "1": "Poor",
              "5": "Excellent"
            }
          },
          {
            "id": "q5",
            "type": "single-choice",
            "text": "Is there anything that frustrated you during your visit?",
            "required": false,
            "options": [
              {
                "id": "slow",
                "label": "Slow loading pages"
              },
              {
                "id": "search",
                "label": "Hard to find products"
              },
              {
                "id": "checkout",
                "label": "Complicated checkout"
              },
              {
                "id": "mobile",
                "label": "Poor mobile experience"
              },
              {
                "id": "none",
                "label": "No frustrations"
              }
            ]
          }
        ],
        "outcomes": [
          {
            "id": "outcome_thanks",
            "pageIndex": 1,
            "title": "Thank You",
            "default": true
          }
        ],
        "scoring": {
          "enabled": false
        },
        "leadCapture": {
          "enabled": true,
          "headline": "Optional: leave your email for a follow-up",
          "placeholder": "your@email.com",
          "buttonText": "Submit Feedback"
        },
        "styleTheme": "survey-theme-warm"
      },
      "pages": [
        {
          "name": "Survey",
          "frames": [
            {
              "component": "<div class='yslg-page yslg-page-0 survey-form-shell survey-theme-warm' data-gjs-type='column'><button class='ysi-close-btn' data-gjs-type='close-button' style='position:absolute;top:12px;right:12px;border:none;background:#f3f4f6;width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;line-height:1;'>&times;</button><div class='survey-form-header'><span class='survey-form-badge survey'>WEBSITE SURVEY</span><h2 class='survey-form-title'>Help Us Improve Your Experience</h2><p class='survey-form-meta'>5 questions · Anonymous feedback welcome</p></div><div class='survey-form-body'><div class='yslg-survey-container' data-gjs-type='survey-container'></div></div><div class='survey-form-footer'>Your responses are confidential and help us improve our service.</div></div>"
            }
          ]
        },
        {
          "name": "Thank You",
          "frames": [
            {
              "component": "<div class='yslg-page yslg-page-1 survey-form-shell survey-theme-warm' style='text-align:center;'><button class='ysi-close-btn' data-gjs-type='close-button' style='position:absolute;top:12px;right:12px;border:none;background:#f3f4f6;width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;'>&times;</button><div class='survey-form-header'><span class='survey-form-badge survey'>THANK YOU</span><h2 class='survey-form-title'>Thank You!</h2><p class='survey-form-meta'>Your feedback directly shapes how we improve our website.</p></div><div class='survey-form-body'><p style='font-size:48px;margin:0;'>✓</p><p style='color:#6b7280;font-size:15px;margin-top:12px;'>We appreciate you taking the time to share your thoughts.</p></div></div>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-97",
      "category": "Social Proof",
      "image": "Social.webp",
      "social_proof_engine": {
        "version": 1,
        "notificationTypes": {
          "sales": true,
          "signups": true,
          "visitors": true,
          "reviews": true
        },
        "templates": {
          "sale": "{name} from {location} purchased {product}",
          "signup": "{name} from {location} signed up",
          "visitor": "{count} people are viewing this page",
          "review": "{name} left a {rating}-star review for {product}"
        },
        "timing": {
          "initialDelay": 3,
          "minInterval": 8,
          "maxInterval": 15,
          "displayDuration": 5,
          "randomize": true
        },
        "position": "bottom-left",
        "queueSize": 15,
        "visitorBaseCount": 12,
        "anonymization": {
          "firstNameOnly": true,
          "hideFullLocation": false,
          "useInitials": false
        },
        "fallback": {
          "useDemoData": true
        },
        "demoData": [
          {
            "type": "sale",
            "name": "Rahul",
            "location": "Chennai",
            "product": "Wireless Headphones",
            "timeAgo": "5 minutes ago"
          },
          {
            "type": "sale",
            "name": "Priya",
            "location": "Mumbai",
            "product": "Leather Backpack",
            "timeAgo": "12 minutes ago"
          },
          {
            "type": "signup",
            "name": "Arjun",
            "location": "Bangalore",
            "timeAgo": "8 minutes ago"
          },
          {
            "type": "visitor",
            "count": 24,
            "timeAgo": "right now"
          },
          {
            "type": "review",
            "name": "Sneha",
            "location": "Delhi",
            "product": "Smart Watch",
            "rating": 5,
            "timeAgo": "20 minutes ago"
          }
        ]
      },
      "pages": [
        {
          "name": "Social Proof",
          "frames": [
            {
              "component": "<style>\n  .sp-editor-wrap {\n    position: fixed !important;\n    bottom: 20px !important;\n    left: 20px !important;\n    top: auto !important;\n    right: auto !important;\n    margin: 0 !important;\n    z-index: 9999;\n    max-width: 400px;\n    width: calc(100% - 40px);\n  }\n  .ysleadgen-popup .sp-editor-wrap,\n  .ysi-popup .sp-editor-wrap {\n    position: relative !important;\n    bottom: auto !important;\n    left: auto !important;\n    top: auto !important;\n    right: auto !important;\n    margin: 0 !important;\n    max-width: none;\n    width: auto;\n  }\n</style>\n<div class='yslg-page yslg-page-0 sp-editor-wrap yslg-social-proof-wrapper' data-gjs-type='column'>\n  <div class='yslg-social-proof-container' data-gjs-type='social-proof-container'>\n    <div class='yslg-sp-toast yslg-sp-toast-visible'>\n      <div class='yslg-sp-body'>\n        <span class='yslg-sp-icon'>🛒</span>\n        <div class='yslg-sp-text'><p class='yslg-sp-message'>Rahul from Chennai purchased Wireless Headphones 5 minutes ago</p></div>\n      </div>\n    </div>\n  </div>\n</div>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "E-commerce",
        "Fashion"
      ]
    },
    {
      "id": "template-98",
      "category": "Age Gate",
      "image": "safety-check-age-gate.webp",
      "pages": [
        {
          "name": "Safety Check",
          "frames": [
            {
              "component": "<style>\n  .ysleadgen-root.ysleadgen-fullscreen {\n    position: fixed !important;\n    top: 0 !important;\n    left: 0 !important;\n    width: 100vw !important;\n    height: 100vh !important;\n    max-width: none !important;\n    max-height: none !important;\n    transform: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    z-index: 2147483647 !important;\n  }\n\n  .yslg-page {\n    width: 100%;\n    height: 100%;\n  }\n\n  .ag-container-99 {\n    width: 100%;\n    height: 100%;\n    min-height: 100vh;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: rgba(0, 0, 0, 0.7);\n    font-family: 'Inter', Arial, sans-serif;\n  }\n\n  .ag-box-99 {\n    text-align: center;\n    max-width: 500px;\n    width: 90%;\n    background: #ffffff;\n    border-radius: 12px;\n    padding: 48px 40px;\n    box-shadow: 0 20px 60px rgba(0,0,0,0.1);\n  }\n\n  .ag-icon-99 {\n    margin-bottom: 24px;\n    display: flex;\n    justify-content: center;\n  }\n\n  .ag-title-99 {\n    font-size: 32px;\n    font-weight: 800;\n    color: #000;\n    margin-bottom: 24px;\n    letter-spacing: -0.5px;\n  }\n\n  .ag-title-99 span {\n    color: #16a34a;\n  }\n\n  .ag-divider-99 {\n    width: 100%;\n    height: 2px;\n    background: #16a34a;\n    margin: 0 auto 24px auto;\n  }\n\n  .ag-desc-99 {\n    font-size: 16px;\n    color: #333;\n    line-height: 1.6;\n    margin-bottom: 32px;\n  }\n\n  .ag-btn-group-99 {\n    display: flex;\n    gap: 16px;\n    justify-content: center;\n    margin-bottom: 24px;\n  }\n\n  .ag-yes-btn-99 {\n    flex: 1;\n    padding: 16px;\n    background: #16a34a;\n    color: #fff;\n    border: none;\n    border-radius: 8px;\n    font-size: 16px;\n    font-weight: 700;\n    cursor: pointer;\n    transition: background 0.2s;\n  }\n\n  .ag-yes-btn-99:hover {\n    background: #15803d;\n  }\n\n  .ag-no-btn-99 {\n    flex: 1;\n    padding: 16px;\n    background: #fff;\n    color: #000;\n    border: 2px solid #000;\n    border-radius: 8px;\n    font-size: 16px;\n    font-weight: 700;\n    cursor: pointer;\n    transition: background 0.2s;\n  }\n\n  .ag-no-btn-99:hover {\n    background: #f3f4f6;\n  }\n  \n  .ag-footer-99 {\n    font-size: 14px;\n    color: #666;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n  }\n</style>\n\n<div data-gjs-type='column' class=\"ag-container-99 fs-container yslg-page yslg-page-0\">\n  <div class=\"ag-box-99\">\n    <div class=\"ag-icon-99\">\n      <svg width=\"120\" height=\"120\" viewBox=\"0 0 120 120\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M60 10L10 30V60C10 85.5 31.5 108.5 60 115C88.5 108.5 110 85.5 110 60V30L60 10Z\" stroke=\"#16a34a\" stroke-width=\"6\" stroke-linejoin=\"round\"/>\n        <text x=\"60\" y=\"75\" font-family=\"Arial\" font-size=\"42\" font-weight=\"bold\" fill=\"#000\" text-anchor=\"middle\">18+</text>\n        <circle cx=\"85\" cy=\"85\" r=\"20\" fill=\"#16a34a\"/>\n        <path d=\"M75 85L82 92L95 78\" stroke=\"white\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </div>\n    <h1 class=\"ag-title-99\">SAFETY <span>CHECK</span></h1>\n    <div class=\"ag-divider-99\"></div>\n    <p class=\"ag-desc-99\">Some products available on this website are restricted to adults. Please verify that you meet the minimum age requirement.</p>\n    <div class=\"ag-btn-group-99\">\n      <button class=\"ysi-yes-btn ag-yes-btn-99\" data-gjs-type=\"yes-button\" data-action=\"agegate_approve\">ENTER</button>\n      <button class=\"ysi-no-btn ag-no-btn-99\" data-gjs-type=\"no-button\" data-action=\"agegate_reject\">EXIT</button>\n    </div>\n    <div class=\"ag-footer-99\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"></path><polyline points=\"9 12 11 14 15 10\"></polyline></svg>\n      Your safety and trust are our priority.\n    </div>\n  </div>\n</div>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "E-commerce"
      ]
    },
    {
      "id": "template-99",
      "category": "Age Gate",
      "image": "responsible-gaming-age-gate.webp",
      "pages": [
        {
          "name": "Responsible Gaming",
          "frames": [
            {
              "component": "<style>\n  .ysleadgen-root.ysleadgen-fullscreen {\n    position: fixed !important;\n    top: 0 !important;\n    left: 0 !important;\n    width: 100vw !important;\n    height: 100vh !important;\n    max-width: none !important;\n    max-height: none !important;\n    transform: none !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    z-index: 2147483647 !important;\n  }\n\n  .yslg-page {\n    width: 100%;\n    height: 100%;\n  }\n\n  .ag-container-100 {\n    width: 100%;\n    height: 100%;\n    min-height: 100vh;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: rgba(0, 0, 0, 0.85);\n    font-family: 'Inter', Arial, sans-serif;\n  }\n\n  .ag-box-100 {\n    text-align: center;\n    max-width: 500px;\n    width: 90%;\n    background: #111115;\n    border-radius: 20px;\n    padding: 50px 40px;\n    box-shadow: 0 20px 60px rgba(0,0,0,0.5);\n    border: 1px solid #222;\n  }\n\n  .ag-icon-100 {\n    margin-bottom: 30px;\n    display: flex;\n    justify-content: center;\n  }\n  \n  .ag-icon-100-inner {\n    width: 100px;\n    height: 100px;\n    border-radius: 50%;\n    border: 3px solid #dc2626;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #fff;\n    font-size: 42px;\n    font-weight: 800;\n    box-shadow: 0 0 30px rgba(220, 38, 38, 0.5), inset 0 0 20px rgba(220, 38, 38, 0.3);\n  }\n\n  .ag-title-100 {\n    font-size: 28px;\n    font-weight: 800;\n    color: #fff;\n    margin-bottom: 20px;\n    letter-spacing: 0.5px;\n  }\n\n  .ag-title-100 span {\n    color: #ef4444;\n  }\n\n  .ag-divider-100 {\n    width: 80%;\n    height: 2px;\n    background: #ef4444;\n    margin: 0 auto 30px auto;\n  }\n\n  .ag-desc-100 {\n    font-size: 17px;\n    color: #e5e7eb;\n    line-height: 1.6;\n    margin-bottom: 40px;\n  }\n\n  .ag-btn-group-100 {\n    display: flex;\n    gap: 20px;\n    justify-content: center;\n  }\n\n  .ag-yes-btn-100 {\n    flex: 1;\n    padding: 16px;\n    background: #dc2626;\n    color: #fff;\n    border: none;\n    border-radius: 12px;\n    font-size: 16px;\n    font-weight: 700;\n    cursor: pointer;\n    transition: background 0.2s;\n  }\n\n  .ag-yes-btn-100:hover {\n    background: #b91c1c;\n  }\n\n  .ag-no-btn-100 {\n    flex: 1;\n    padding: 16px;\n    background: #1f2937;\n    color: #fff;\n    border: 1px solid #374151;\n    border-radius: 12px;\n    font-size: 16px;\n    font-weight: 700;\n    cursor: pointer;\n    transition: background 0.2s;\n  }\n\n  .ag-no-btn-100:hover {\n    background: #374151;\n  }\n</style>\n\n<div data-gjs-type='column' class=\"ag-container-100 fs-container yslg-page yslg-page-0\">\n  <div class=\"ag-box-100\">\n    <div class=\"ag-icon-100\">\n      <div class=\"ag-icon-100-inner\">18+</div>\n    </div>\n    <h1 class=\"ag-title-100\">RESPONSIBLE <span>GAMING</span></h1>\n    <div class=\"ag-divider-100\"></div>\n    <p class=\"ag-desc-100\">Access is restricted to users aged 18 or older.<br/>Please confirm your age to continue.</p>\n    <div class=\"ag-btn-group-100\">\n      <button class=\"ysi-yes-btn ag-yes-btn-100\" data-gjs-type=\"yes-button\" data-action=\"agegate_approve\">CONTINUE</button>\n      <button class=\"ysi-no-btn ag-no-btn-100\" data-gjs-type=\"no-button\" data-action=\"agegate_reject\">EXIT</button>\n    </div>\n  </div>\n</div>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "Gaming",
        "E-commerce"
      ]
    },
    {
      "id": "template-100",
      "category": "Cookie Consent",
      "image": "cookie-work-easier.webp",
      "pages": [
        {
          "name": "Cookie Banner",
          "frames": [
            {
              "component": "<style>\n  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');\n\n  .cc-work-wrap {\n    font-family: 'Inter', Arial, sans-serif;\n    background: #ffffff;\n    border-radius: 20px;\n    max-width: 420px;\n    width: 95%;\n    margin: 60px auto;\n    padding: 36px 32px 28px;\n    box-shadow: 0 12px 40px rgba(0,0,0,0.12);\n    text-align: center;\n    position: relative;\n  }\n\n  .cc-work-illustration {\n    width: 100%;\n    max-width: 260px;\n    height: 180px;\n    object-fit: contain;\n    margin: 0 auto 20px;\n    display: block;\n  }\n\n  .cc-work-title {\n    font-size: 22px;\n    font-weight: 800;\n    color: #111827;\n    margin: 0 0 12px;\n    line-height: 1.3;\n  }\n\n  .cc-work-desc {\n    font-size: 15px;\n    color: #4b5563;\n    line-height: 1.6;\n    margin: 0 0 24px;\n  }\n\n  .cc-work-btn-primary {\n    display: block;\n    width: 100%;\n    padding: 14px;\n    background: #2563eb;\n    color: #ffffff;\n    font-size: 15px;\n    font-weight: 700;\n    letter-spacing: 1px;\n    border: none;\n    border-radius: 10px;\n    cursor: pointer;\n    margin-bottom: 14px;\n  }\n\n  .cc-work-policy-link {\n    display: inline-block;\n    font-size: 14px;\n    color: #2563eb;\n    text-decoration: underline;\n    cursor: pointer;\n    background: none;\n    border: none;\n    font-family: inherit;\n  }\n\n  @media (max-width: 480px) {\n    .cc-work-wrap {\n      margin: 30px 12px;\n      padding: 28px 20px 22px;\n    }\n    .cc-work-title {\n      font-size: 19px;\n    }\n  }\n</style>\n\n<div data-gjs-type='column' class='cc-work-wrap'>\n\n  <!-- Illustration -->\n  <img\n    src='https://media.docs.ysleadgen.com/wp-content/uploads/popup-images/cookie-security.webp'\n    alt='Cookie Consent Illustration'\n    class='cc-work-illustration'\n    onerror=\"this.style.display='none';\"\n  />\n\n  <!-- Title -->\n  <h2 class='cc-work-title'>Let&rsquo;s Make Work Easier &#x1F680;</h2>\n\n  <!-- Description -->\n  <p class='cc-work-desc'>We use cookies to keep your account secure, remember your preferences, and improve your experience.</p>\n\n  <!-- Accept Button -->\n  <button\n    class='cc-work-btn-primary yslg-consent-btn'\n    data-gjs-type='button'\n    data-action='cookie_accept_all'\n  >GOT IT!</button>\n\n  <!-- Policy Link -->\n  <button\n    class='cc-work-policy-link yslg-consent-btn'\n    data-gjs-type='button'\n    data-action='cookie_policy'\n  >Our Cookie Policy</button>\n\n</div>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "E-commerce",
        "General"
      ]
    },
    {
      "id": "template-101",
      "category": "Cookie Consent",
      "image": "cookie-your-style.webp",
      "pages": [
        {
          "name": "Cookie Banner",
          "frames": [
            {
              "component": "<style>\n  @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&family=Inter:wght@400;500&display=swap');\n\n  .cc-style-wrap {\n    font-family: 'Inter', Arial, sans-serif;\n    background: #f5ede4;\n    border-radius: 20px;\n    max-width: 420px;\n    width: 95%;\n    margin: 60px auto;\n    padding: 36px 32px 32px;\n    box-shadow: 0 8px 32px rgba(0,0,0,0.08);\n    text-align: center;\n    position: relative;\n  }\n\n  .cc-style-icon-wrap {\n    width: 80px;\n    height: 80px;\n    border-radius: 50%;\n    background: #ecddd0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0 auto 20px;\n    font-size: 36px;\n    line-height: 1;\n  }\n\n  .cc-style-title {\n    font-family: 'Playfair Display', Georgia, serif;\n    font-size: 30px;\n    font-weight: 800;\n    color: #1a0d05;\n    margin: 0 0 6px;\n    line-height: 1.25;\n  }\n\n  .cc-style-title-accent {\n    color: #7b3f1e;\n  }\n\n  .cc-style-divider {\n    width: 60px;\n    height: 1px;\n    background: #c9a98a;\n    margin: 16px auto;\n  }\n\n  .cc-style-desc {\n    font-size: 15px;\n    color: #5c3d2a;\n    line-height: 1.65;\n    margin: 0 0 28px;\n  }\n\n  .cc-style-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 10px;\n    width: 100%;\n    padding: 15px 24px;\n    background: #5c2e0a;\n    color: #ffffff;\n    font-size: 14px;\n    font-weight: 700;\n    letter-spacing: 1.5px;\n    border: none;\n    border-radius: 10px;\n    cursor: pointer;\n  }\n\n  .cc-style-btn:hover {\n    background: #3e1d06;\n  }\n\n  @media (max-width: 480px) {\n    .cc-style-wrap {\n      margin: 30px 12px;\n      padding: 28px 20px 24px;\n    }\n    .cc-style-title {\n      font-size: 26px;\n    }\n  }\n</style>\n\n<div data-gjs-type='column' class='cc-style-wrap'>\n\n  <!-- Cookie Icon -->\n  <div class='cc-style-icon-wrap'>&#x1F36A;</div>\n\n  <!-- Title -->\n  <h2 class='cc-style-title'>\n    Your Style,<br>\n    <span class='cc-style-title-accent'>Your Experience</span>\n  </h2>\n\n  <!-- Divider -->\n  <div class='cc-style-divider'></div>\n\n  <!-- Description -->\n  <p class='cc-style-desc'>We use cookies to remember your preferences, recommend products you&rsquo;ll love, and improve your shopping experience.</p>\n\n  <!-- Accept Button -->\n  <button\n    class='cc-style-btn yslg-consent-btn'\n    data-gjs-type='button'\n    data-action='cookie_accept_all'\n  >ACCEPT &amp; CONTINUE &#x2192;</button>\n\n</div>"
            }
          ]
        }
      ],
      "type": [
        "Lead Generation"
      ],
      "industry": [
        "E-commerce",
        "General"
      ]
    }
  ]
}