Developer Integration & Custom Styling Documentation

1

Core Form Embedding Setup

To load a dynamic questionnaire onto an external landing page, copy the HTML scaffold below. The core module runs safely within a self-checking async loop to prevent race conditions caused by delayed third-party window resource definitions.

landing-page.html

<!-- Target DOM Slot layout wrapper -->
<div id="gatekeeper-form-container"></div>

<!-- Gatekeeper Asynchronous Core Engine Library -->
<script src="https://nextbranch.com.ng/embeding.js" id="gk-embed-script"></script>

<script>
  function bootGatekeeper() {
    if (window.GatekeeperForm) {
      window.GatekeeperForm.init("gatekeeper-form-container", {
        formId: "YOUR_FORM_ID",
        embedKey: "YOUR_EMBED_KEY"
      });
    } else {
      setTimeout(bootGatekeeper, 20); // Fallback loop polling check execution
    }
  }
  document.getElementById('gk-embed-script').onload = bootGatekeeper;
  if (document.readyState === 'complete' || window.GatekeeperForm) { bootGatekeeper(); }
</script>

2

CSS Theming & Custom Layout Overrides

The embedded module injects un-scoped native elements directly into your webpage's document tree. You can override colors, borders, and input fields globally without wrestling with iframe constraints.

gatekeeper-theme.css

/* Target Parent Wrapper Layer */
#gatekeeper-form-container form {
    max-width: 480px !important;
    background: #ffffff !important;
    padding: 32px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
}

/* Primary Section Headings */
#gatekeeper-form-container form h2 {
    color: #0f172a !important;
    font-size: 22px !important;
    font-weight: 700 !important;
}

/* Questionnaire Label Fields */
#gatekeeper-form-container form label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #475569 !important;
}

/* Unified Text Inputs Framework */
#gatekeeper-form-container form input[type="text"],
#gatekeeper-form-container form input[type="email"] {
    width: 100% !important;
    padding: 12px 14px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
}

/* Core Form Action Call-To-Action Control Button */
#gatekeeper-form-container form button[type="submit"] {
    background: #0f172a !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 14px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
}

#gatekeeper-form-container form button[type="submit"]:hover {
    background: #1e293b !important;
}

3

Custom Thank-You Page Token Verification

When a subscriber completes a registration form using Custom Website Redirect (Mode B), the Gatekeeper engine forwards them to your custom URL page with an appended secure reference token appended to the query parameters string: https://mysite.com/thank-you?reference=gk_8f29d...

You must place the following verification handshake block on that destination redirect page. This snippet pulls the reference token via search parameter configurations, dispatches a validation callback payload to the backend server, and dynamically extracts structural results like the coordinator's WhatsApp link.

thank-you.html

<!-- Destination interface placeholder target for callback assets -->
<div id="gatekeeper-thank-you-container"></div>

<script>
  (async function() {
    // Extract query tokens from url properties tracking parameter paths
    const urlParams = new URLSearchParams(window.location.search);
    const reference = urlParams.get('reference');
    if (!reference) return;

    const container = document.getElementById('gatekeeper-thank-you-container');
    container.innerHTML = `<p style="color:#64748b; font-family:sans-serif;">Verifying registration credentials...</p>`;

    try {
      // Execute security handshake against the Edge function
      const res = await fetch("https://nugxkqclzusgibyqemou.supabase.co/functions/v1/embed-callback-test", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ reference, embedKey: "YOUR_EMBED_KEY" })
      });

      const data = await res.json();
      if (!res.ok) throw new Error(data.error || "Handshake verification failed.");

      // Render custom success dashboard assets upon payload clearance
      if (data.whatsapp_link) {
        container.innerHTML = `
          <div style="font-family:sans-serif; padding:24px; border:1px solid #e2e8f0; border-radius:12px; background:#fff; max-width:400px; text-align:center;">
            <h3 style="color:#0f172a; margin:0 0 4px 0; font-size:18px;">Registration Confirmed!</h3>
            <p style="color:#64748b; font-size:13px; margin:0 0 16px 0;">Your payment parameters cleared successfully. Access your community link below:</p>
            <a href="\${data.whatsapp_link}" target="_blank" style="display:inline-block; background:#22c55e; color:#fff; font-weight:600; padding:12px 24px; text-decoration:none; border-radius:8px; font-size:14px;">Join Corporate WhatsApp Group</a>
          </div>`;
      }
    } catch (err) {
      container.innerHTML = `
        <div style="font-family:sans-serif; padding:16px; border:1px solid #fca5a5; background:#fef2f2; color:#991b1b; border-radius:8px; font-size:13px;">
          <strong>Verification Error:</strong> \${err.message}
        </div>`;
    }
  })();
</script>

4

Platform Security Framework Rules

The Gatekeeper pipeline architecture enforces deep backend cross-origin validation logic. If an integration meets any of the conditions below, execution is aborted at the edge to protect against malicious script cloning:

Security Metric Check	Trigger Condition	System Behavior
Origin Whitelist Mismatch	Form script loads on an unregistered domain.	403 Forbidden Response
Stale Key Verification	The integration token key passed has been regenerated.	401 Unauthorized Block
Toggle State Block	Creator disables external embedding inside their admin dashboard panel.	Form ingestion rendering drops instantly