Guía de integración

<!--
  Campaign leads integration example.
  This is a starting point, not a drop-in script: replace the form fields, labels and
  consent copy below with your own. Keep the existing field ids, or update the matching selectors. The API fields and
  reCAPTCHA action remain the values from your generated configuration.
  What this does: collects a phone number (and optionally a name), mints a reCAPTCHA v3
  token, and POSTs the lead to the campaign-leads endpoint. A 202 response means the lead
  was accepted and queued -- a separate service sends the first WhatsApp message later, so
  do not tell the visitor "message sent"; something like "we'll message you shortly" is
  accurate.
-->
<script>
  window.__CAMPAIGN_LEADS__ = {"workspaceId":"YOUR_WORKSPACE_ID","captureKey":"YOUR_CAPTURE_KEY","endpoint":"https://integrations-us.app.bridge.new/api/v1/leadscout/campaign-leads","brandId":null,"recaptchaSiteKey":"YOUR_RECAPTCHA_SITE_KEY","recaptchaAction":"submit_campaign_lead","trackedParams":[]};
</script>
<!-- ============================================================
     EXAMPLE FORM -- replace with your own markup and consent copy.
     Keep the element ids (or update the selectors in the script below to match yours).
     ============================================================ -->
<form id="lead-form" novalidate>
  <label>
    <span>Name (optional)</span>
    <input id="lead-name" type="text" autocomplete="name" />
  </label>
  <label>
    <span>WhatsApp number</span>
    <input id="lead-phone" type="tel" autocomplete="tel" required />
  </label>
  <!-- The wording of this consent statement is yours to write: it is what the visitor is
       agreeing to, and only you know what you will message them and why. -->
  <label>
    <input id="lead-consent" type="checkbox" required />
    <span>I agree to receive WhatsApp messages from Acme Motors about the quote I just requested.</span>
  </label>
  <button type="submit">Submit</button>
  <p id="lead-result" role="status" aria-live="polite"></p>
</form>
<script>
  (function (config) {
    "use strict";
    var form = document.getElementById("lead-form");
    var consentBox = document.getElementById("lead-consent");
    var submitButton = form.querySelector("button[type=submit]");
    var result = document.getElementById("lead-result");
    var consentCapturedAt = null;
    var inFlight = false;
    var accepted = false;
    var submissionStarted = false;
    var responseReceived = false;
    consentBox.addEventListener("change", function () {
      consentCapturedAt = consentBox.checked ? new Date().toISOString() : null;
    });
    function showResult(message) {
      result.textContent = message;
    }
    function loadRecaptcha() {
      return new Promise(function (resolve, reject) {
        if (window.grecaptcha) {
          resolve();
          return;
        }
        var tag = document.createElement("script");
        tag.src = "https://www.google.com/recaptcha/api.js?render=" + config.recaptchaSiteKey;
        tag.onload = function () {
          resolve();
        };
        tag.onerror = function () {
          reject(new Error("Could not load reCAPTCHA. Check the site key and the network."));
        };
        document.head.appendChild(tag);
      });
    }
    // Mint the token on submit, not on page load: a reCAPTCHA v3 token is only valid for
    // ~2 minutes, so minting it earlier means it can already be expired by the time the
    // visitor actually submits the form.
    function mintToken() {
      return loadRecaptcha().then(function () {
        return new Promise(function (resolve, reject) {
          window.grecaptcha.ready(function () {
            window.grecaptcha
              .execute(config.recaptchaSiteKey, { action: config.recaptchaAction })
              .then(resolve, reject);
          });
        });
      });
    }
    // Allowlist, not a denylist: only utm_* params and the names you seeded in
    // trackedParams are collected. The rest of the query string can carry ad-network
    // click ids or session tokens that were never meant to be stored -- over-collection
    // here is irreversible, so when in doubt leave a param out.
    function readCampaignParams() {
      var params = new URLSearchParams(window.location.search);
      var collected = {};
      params.forEach(function (value, key) {
        if (key.indexOf("utm_") === 0 || config.trackedParams.indexOf(key) !== -1) {
          collected[key] = value;
        }
      });
      return collected;
    }
    function buildPayload(token) {
      return {
        workspaceId: config.workspaceId,
        captureKey: config.captureKey,
        cellphone: document.getElementById("lead-phone").value.trim(),
        name: document.getElementById("lead-name").value.trim() || null,
        brandId: config.brandId,
        // origin + pathname only, never the full URL: the query string can carry
        // click ids or session tokens, and UTMs already travel separately in "utm" above.
        landingUri: window.location.origin + window.location.pathname,
        utm: readCampaignParams(),
        consent: { status: "GRANTED", capturedAt: consentCapturedAt },
        recaptchaToken: token,
      };
    }
    form.addEventListener("submit", function (event) {
      event.preventDefault();
      if (inFlight || accepted || !form.reportValidity()) return;
      if (!consentBox.checked || !consentCapturedAt) {
        // A browser can restore a previously checked control without firing change.
        // Ask for a new explicit action instead of inventing its consent timestamp.
        consentBox.checked = false;
        showResult("Please select the WhatsApp consent checkbox before submitting.");
        consentBox.focus();
        return;
      }
      inFlight = true;
      submissionStarted = false;
      responseReceived = false;
      submitButton.disabled = true;
      showResult("Submitting your request...");
      // A token verifies once. Every manual attempt, including a retry after a
      // rejected request, obtains a new token. This example never retries a POST.
      mintToken()
        .then(function (token) {
          var payload = buildPayload(token);
          // The URL must identify the workspace for the browser's CORS preflight.
          var url = config.endpoint + "?workspaceId=" + encodeURIComponent(config.workspaceId);
          submissionStarted = true;
          return fetch(url, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(payload),
          });
        })
        .then(function (response) {
          responseReceived = true;
          return response.json().catch(function () { return null; }).then(function (body) {
            if (response.status === 202) {
              accepted = true;
              var reference = body && typeof body.requestId === "string"
                ? " Reference: " + body.requestId
                : "";
              showResult("Request accepted. The business will process your request." + reference);
              return;
            }
            var code = body && body.type ? body.type : "HTTP " + response.status;
            if (response.status === 422 && code === "BRIDGE.CAMPAIGN_LEADS.CAPTCHA_PROVIDER_UNAVAILABLE") {
              throw new Error("Verification is temporarily unavailable. You can try again; a new CAPTCHA token will be created.");
            }
            if (response.status === 403 && code === "BRIDGE.CAMPAIGN_LEADS.CAPTCHA_REJECTED") {
              throw new Error("The verification was rejected. You can try again with a new CAPTCHA token.");
            }
            var detail = body && (body.detail || body.title);
            throw new Error(code + (detail ? ": " + detail : ". Check the form configuration."));
          });
        })
        .catch(function (error) {
          if (submissionStarted && !responseReceived) {
            showResult("We could not confirm whether your request was accepted. Check with the business before submitting it again.");
            return;
          }
          showResult(error.message || "The request could not be completed.");
        })
        .finally(function () {
          inFlight = false;
          submitButton.disabled = accepted;
        });
    });
  })(window.__CAMPAIGN_LEADS__);
</script>