Reputation: 11
I have 2 problems with the code Meta gave for the Business Whatsapp API / embedded flow integration
I'm getting two errors:
Uncaught ReferenceError: fbq
is not defined
launchWhatsAppSignup
The call inside FB.login
is not being waited - the I click the login, the dialog opens and immediately the code inside the fail callback is executed. This is the main problem since I can just comment the fbq
line, but I need to read the login dialog response in order to access the token.
How to resolve the issue so that WhatsApp embedded signup can be implemented?.
The fbq
should work since the SDK is being loaded, and the callback should be waited.
This is the HTML code of the button
<button onclick="launchWhatsAppSignup()" style="background-color: #1877f2; border: 0; border-radius: 4px; color: #fff; cursor: pointer; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: bold; height: 40px; padding: 0 24px;">Login with Facebook</button>
And the JavaScript for that is as follows:
window.fbAsyncInit = function () {
// JavaScript SDK configuration and setup
console.log(facebookMetaData.metaAPPID);
FB.init({
appId: facebookMetaData.metaAPPID, // Meta App ID
cookie: true, // enable cookies
xfbml: true, // parse social plugins on this page
version: "v19.0", //Graph API version
});
};
// Load the JavaScript SDK asynchronously
(function (d, s, id) {
var js,
fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
})(document, "script", "facebook-jssdk");
// Facebook Login with JavaScript SDK
function launchWhatsAppSignup() {
// Conversion tracking code
fbq &&
fbq("trackCustom", "WhatsAppOnboardingStart", {
appId: facebookMetaData.metaAPPID,
feature: "whatsapp_embedded_signup",
});
// Launch Facebook login
FB.login(
function (response) {
if (response.authResponse) {
const code = response.authResponse.code;
// The returned code must be transmitted to your backend,
// which will perform a server-to-server call from there to our servers for an access token
} else {
console.log("User cancelled login or did not fully authorize.");
}
},
{
config_id: facebookMetaData.configurationID, // configuration ID goes here
response_type: "code", // must be set to 'code' for System User access token
override_default_response_type: true, // when true, any response types passed in the "response_type" will take precedence over the default types
// extras: {
// setup: {
// ... // Prefilled data can go here
// }
// }
},
);
}
Upvotes: 1
Views: 100