skip to Main Content

I develop a page with login for Whatsapp API Cloud following those steps:

https://developers.facebook.com/docs/whatsapp/embedded-signup/pre-filled-data

<script>
  window.fbAsyncInit = function () {
    FB.init({
      appId: "XXXXXXX",
      cookie:   true, // enable cookies
      autoLogAppEvents: true,
      xfbml: true,
      version: "v15.0",
    });
  };

  // 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() {
    // Launch Facebook login
    FB.login(
      function (response) {
        if (response.authResponse) {
          const accessToken = response.authResponse.accessToken;
          console.log(accessToken);
          //Use this token to call the debug_token API and get the shared WABA's ID
          fetch(
            `https://graph.facebook.com/v15.0/debug_token?input_token=${accessToken}&access_token=EAARzkHctTewBABQoSZA3gDI36fFBO1ZCW1DV4uW3eUMZClzbZBB8wvmpFNhrShuZA2ej4oZAxxXD0md0vZAkr4NQ6ZBzOzNsK9QMjz0bz3xEzSKQ0BDQU9qD2DoZA3XwGDGyAyAssqgEkGM9iUSmj6CspwPUWwIVuByJdOxtKV4dSNG1Fm44hTWgQ`
          )
            .then((response) => response.json())
            .then((data) => console.log(data));
        } else {
          console.log("User cancelled login or did not fully authorize.");
        }
      },
      {
        scope: "business_management,whatsapp_business_management",
        extras: {
          feature: "whatsapp_embedded_signup",
          setup: {
            // ... // Prefilled data can go here
          },
        },
      }
    );
  }
</script>
<script async  crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>

<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>

But the problem is whatsapp shows in pop-up:
You don’t have any WhatsApp Business Accounts.

enter image description here

and tell me to create an WhatsApp Business Accounts, that i already have in my bussiness account linked with my whatsapp bussiness number.

2

Answers


  1. Found the answer. When you pass the scope to the FB.login function, you need to also add the standard scopes. This worked for me:

    {
        scope: 'email,whatsapp_business_messaging,public_profile,business_management,whatsapp_business_management',
        return_scopes: true,
        extras: {
            feature: 'whatsapp_embedded_signup',
            setup: {
            }
        }
    
    Login or Signup to reply.
  2. To clarify @paezand answer, in the newer Facebook API graph versions you need to add whatsapp_business_messaging in your scopes; this is currently not documented.

    so the scopes should be scope: 'whatsapp_business_messaging,business_management,whatsapp_business_management'

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search