od8n_homepage/public/widget-signup/widget.js

(function() {
  // Locate the script tag
  const currentScript = document.currentScript;
  const affiliateFromAttr = currentScript.getAttribute("data-affiliate");

  // Allow ?affiliate=... from URL
  const params = new URLSearchParams(window.location.search);
  const affiliateFromURL = params.get("affiliate");

  const affiliateCode = affiliateFromURL || affiliateFromAttr || "None";

  // Container element
  const container = document.getElementById("my-signup-widget");
  if (!container) return;

  // Attach shadow DOM
  const shadow = container.attachShadow({ mode: "open" });

  // CSS for the widget (isolated)
  const styles = `
    :host {
      all: initial;
      font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,Arial,sans-serif;
      display: block;
      max-width: 420px;
      margin: 0 auto;
    }

    .card {
      background: linear-gradient(135deg,#ffffff 0%,#f7fafc 60%);
      border: 1px solid #e6e8eb;
      border-radius: 16px;
      box-shadow: 0 6px 20px rgba(16,24,40,.08);
      padding: 20px;
    }

    .header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
    }
    .icon {
      width: 36px;
      height: 36px;
      border-radius: 12px;
      background: linear-gradient(135deg,#6ee7b7,#3b82f6);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      color: #fff;
    }
    .title {
      font-size: 18px;
      line-height: 1.2;
      font-weight: 800;
      color: #0f172a;
    }
    .subtitle {
      font-size: 13px;
      color: #475569;
    }

    label,
    .label {
      display: block;
      font-size: 12px;
      color: #334155;
      font-weight: 600;
      margin: 12px 0 6px;
    }

    .options {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 6px;
    }

    .option {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 8px;
      border: 1px solid #cbd5e1;
      border-radius: 10px;
      padding: 10px 12px;
      cursor: pointer;
      background: #fff;
    }

    input[type="radio"] {
      accent-color: #3b82f6;
      margin: 0;
    }

    select, input[type="email"], affiliate-display {
      width: 100%;
      background: #fff;
      border: 1px solid #cbd5e1;
      border-radius: 10px;
      padding: 10px 12px;
      font-size: 14px;
      color: #0f172a;
      outline: none;
      box-sizing: border-box;
    }

    .affiliate-display {
      background: #f8fafc;
    }

    button {
      margin-top: 16px;
      width: 100%;
      border: none;
      border-radius: 12px;
      padding: 12px 14px;
      font-size: 15px;
      font-weight: 800;
      background: linear-gradient(135deg,#22c55e,#3b82f6);
      color: #fff;
      cursor: pointer;
      box-shadow: 0 8px 18px rgba(37,99,235,.25);
    }

    .footnote {
      margin-top: 10px;
      font-size: 11px;
      color: #64748b;
      text-align: center;
    }
  `;

  // HTML structure
  const html = `
    <form action="https://001-001-123e4567-e89b-12d3-a456-426614174000.od8n.com/webhook-test/28c30b58-7786-4c63-b662-2a840014e472" method="post" class="card">
      <div class="header">
        <div class="icon">★</div>
        <div>
          <div class="title">Try Managed Odoo or n8n — Free</div>
          <div class="subtitle">Full-featured 4-week trial. No credit card required.</div>
        </div>
      </div>

      <div class="label">Product</div>
      <div class="options">
        <label class="option">
          <input type="radio" name="product" value="ODOO" required checked>
          <span>ODOO</span>
        </label>
        <label class="option">
          <input type="radio" name="product" value="N8N" required>
          <span>N8N</span>
        </label>
      </div>

      <label for="location">Location</label>
      <select id="location" name="location" required>
        <option value="" disabled>Select a region</option>
        <option value="amsterdam">Amsterdam</option>
        <option value="mumbai" selected>Mumbai</option>
        <option value="saopaulo">São Paulo</option>
      </select>

      <label for="email">Work Email</label>
      <input id="email" name="email" type="email" required placeholder="you@company.com">

      <input type="hidden" name="affiliate_code" value="${affiliateCode}">

      <button type="submit">Start 4-Week Free Trial</button>

      <div class="footnote">
        By submitting, you agree to be contacted about your trial and our T&Cs.
      </div>
    </form>
  `;

  // Append everything into shadow DOM
  shadow.innerHTML = `
    <style>${styles}</style>
    ${html}
  `;
})();