Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>FB / WhatsApp Signup</title>

  
  <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
</head>
<body>
  
  <div style="display:flex; gap:12px; align-items:center; margin:12px 0; flex-wrap:wrap;">
    <label for="companyName" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px;">
      Company name
    </label>
    <input
      id="companyName"
      type="text"
      placeholder="Enter your company"
      style="height:36px; padding:0 10px; border:1px solid #ccc; border-radius:4px; font-size:14px;"
    />

    <label for="adminEmail" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px;">
      Admin email
    </label>
    <input
      id="adminEmail"
      type="email"
      placeholder="admin@company.com"
      style="height:36px; padding:0 10px; border:1px solid #ccc; border-radius:4px; font-size:14px;"
    />

    <button
      id="fbLoginBtn"
      disabled
      style="background-color:#1877f2; border:0; border-radius:4px; color:#fff; cursor:not-allowed; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; height:40px; padding:0 24px;"
    >
      Login with Facebook
    </button>
  </div>

  <script>
    let signupData = {};
    let fbIsReady = false;

    const isValidEmail = (email) =>
      /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);

    const sendCombinedData = () => {
      if (
        signupData.company_name &&
        signupData.client_admin_email &&
        signupData.user_code &&
        signupData.waba_id
      ) {
        console.log("All data ready, sending to Lambda:", signupData);
        callLambdaFunction({ "Received User Data": signupData });
        signupData = {};
      } else {
        console.log("Not all data available yet:", signupData);
      }
    };

    const callLambdaFunction = async (payload) => {
      try {
        const response = await fetch(
          "https://qbieaywrbvrhg62hew5e2xzvue0bcdgt.lambda-url.eu-central-1.on.aws/",
          {
            method: "POST",
            mode: "cors",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(payload),
          }
        );
        const responseData = await response.json();
        console.log("Lambda response:", responseData);
      } catch (error) {
        console.error("Error calling Lambda function:", error);
      }
    };

    window.fbAsyncInit = function () {
      FB.init({
        appId: "1069132304565541",
        autoLogAppEvents: true,
        xfbml: true,
        version: "v22.0",
      });
      fbIsReady = true;
    };

    window.addEventListener("message", (event) => {
  // 1. Log the raw event origin to ensure we aren't filtering out valid messages
  // (You can comment this out later, but keep it for debugging)
  // console.log("Message received from:", event.origin);
      if (!event.origin.endsWith("facebook.com")) return;

      try {
        // 2. ROBUST DATA HANDLING: Check if data is already an object
        let data = event.data;
        if (typeof data === 'string') {
          data = JSON.parse(data);
        }

        // 3. Log the parsed data so you verify 'type' and 'event'
        console.log("FB Message Data:", data);

        if (data.type === "WA_EMBEDDED_SIGNUP") {
          if (data.event === "FINISH") {
            const wabaID = data.data.waba_id;
            console.log("Captured WABA ID:", wabaID);
            
            signupData.waba_id = wabaID;
            sendCombinedData();
          } else if (data.event === "CANCEL") {
            console.log("User cancelled the signup flow.");
          }
        }
      } catch (e) {
        // 4. STOP SWALLOWING ERRORS: Log them!
        console.error("Error processing FB message:", e);
      }
    });
    
    
    const fbLoginCallback = (response) => {
      console.log("FB.login response:", response);

      const code =
        response?.authResponse?.code ||
        response?.code; // sometimes appears here

      if (code) {
        signupData.user_code = code;
        sendCombinedData();
      } else {
        console.warn("No code returned from FB.login");
      }
    };


    function launchWhatsAppSignup() {
      if (!window.FB || !fbIsReady) return;

      FB.login(fbLoginCallback, {
        config_id: "1553001509264102",
        response_type: "code",
        override_default_response_type: true,
        extras: {
          setup: {},
          sessionInfoVersion: "3",
        },
      });
    }

    function setupUI() {
      const companyInput = document.getElementById("companyName");
      const emailInput = document.getElementById("adminEmail");
      const loginBtn = document.getElementById("fbLoginBtn");

      const toggleBtn = () => {
        const company = companyInput.value.trim();
        const email = emailInput.value.trim();

        const isValid =
          company.length > 0 && isValidEmail(email);

        loginBtn.disabled = !isValid;
        loginBtn.style.cursor = isValid ? "pointer" : "not-allowed";

        if (isValid) {
          signupData.company_name = company;
          signupData.client_admin_email = email;
        }        
      };

      companyInput.addEventListener("input", toggleBtn);
      emailInput.addEventListener("input", toggleBtn);
      toggleBtn();

      loginBtn.addEventListener("click", (e) => {
        e.preventDefault();
        if (!loginBtn.disabled) {
          launchWhatsAppSignup();
        }
      });
    }

    if (document.readyState === "loading") {
      document.addEventListener("DOMContentLoaded", setupUI);
    } else {
      setupUI();
    }
  </script>
</body>
</html>

Call to action

Twains

Twains ambitionne de révolutionner le marketing d'influence. Nous créons des jumeaux digitaux d'influenceurs pilotés par IA, capables de reproduire leur style, voix et image, pour échanger avec leur audience en 1-to-1 sur WhatsApp, mener un marketing d'influence interactif, naturel et innovant, et maximiser l'engagement. Imaginez discuter avec votre influenceur préféré en temps réel, et ce, dans la langue de votre choix. Notre technologie ouvre des horizons d'engagement inédits pour les marques et offre de nouvelles possibilités de monétisation pour les influenceurs. Par ailleurs, nous offrons également l'alternative de créer un bot de marque, une extension digitale de la marque, maîtrisant son univers, ses produits et ses valeurs.... Comme un conseiller en magasin !