WhatsApp Integration

Login with Facebook

// Handle WhatsApp Embedded Signup
function launchEmbeddedSignup() {
// Launch Facebook login
FB.login(
function (response) {
// Since you are using Twilio's APIs, you do not need to do anything with the response here.
},
{
config_id: "

514048658272327

",
auth_type: "rerequest", // Avoids "user is already logged" in errors if users click the button again before refreshing the page
response_type: "code",
override_default_response_type: true,
extras: {
sessionInfoVersion: 2, // Required to get WABA ID
// Leave below commented for now, you will need to replace this once your app is approved by Meta
// setup: {
// solutionID: "KEEP_IN_QUOTES_BUT_REPLACE_WITH_YOUR_SOLUTION_ID",
// }
}
}
);
}

// Define session handler
const embeddedSignupInfoListener = (event) => {
if (!event.origin.endsWith("facebook.com")) return;
try {
const data = JSON.parse(event.data);
if (data.type === "WA_EMBEDDED_SIGNUP") {
// if user finishes the Embedded Signup flow and the popup window closes
if (data.event === "FINISH"|| data.event === "FINISH_ONLY_WABA") {
const { phone_number_id, waba_id } = data.data;
console.log({ phone_number_id, waba_id });
// For now, you do not need to do anything here. Once App Review has been completed, then you
// will pass the WABA ID to your backend service to use the Twilio Senders API to register the WhatsApp Sender.
// Not that Meta only returns their phone_number_id, not the full phone number. Make sure to collect the
// full phone number in your own user interface before the user clicks on this button.
}
else {
// Otherwise the user canceled the Embedded Signup flow by closing the popup window before the last step.
// We recommend you show an error to the user here.
const { current_step } = data.data;
console.log(`User did not finish ESU. Last step: ${current_step}`);
}
}
} catch {
return;
}
};

// Listen for Embedded Signup events
window.addEventListener("message", embeddedSignupInfoListener);

// When the user navigates away from the page, remove the event listener
window.addEventListener ("beforeunload" , () =>
window.removeEventListener ("message", embeddedSignupInfoListener);
);