WhatsApp Business Embedded Signup in Bubble

Need help APIs
1

Hi everyone,

I’m stuck on the very last step of the WhatsApp Business Embedded Signup flow inside a Bubble app and would really appreciate some guidance.

:world_map: Overall flow

:gear: My implementation in Bubble

  1. Load Facebook SDK in the page header

    <script>
  window.fbAsyncInit = function () {
    FB.init({
      appId: '167150665*******',
      autoLogAppEvents: true,
      xfbml: true,
      version: 'v23.0'
    });
  };
</script>
<script async defer crossorigin="anonymous"
  src="https://connect.facebook.net/en_US/sdk.js"></script>

  2. Listener for Embedded Signup events

    <script>
  window.addEventListener('message', e => {
    if (!['https://www.facebook.com', 'https://web.facebook.com'].includes(e.origin)) return;
    let data; try { data = JSON.parse(e.data); } catch { return; }
    if (data.type !== 'WA_EMBEDDED_SIGNUP') return;

    if (['FINISH', 'FINISH_WHATSAPP_BUSINESS_APP_ONBOARDING'].includes(data.event)) {
      bubble_fn_waEmbeddedSignup({
        output1: null,                     // code comes via FB.login
        output2: data.data?.waba_id,
        output3: data.data?.phone_number_id,
        output4: data.data?.business_id
      });
    }
  });
</script>

  3. Trigger the flow in a “Run JavaScript” action

    function fbLoginCallback(res) {
  if (res.authResponse?.code) {
    bubble_fn_waEmbeddedSignup({ output1: res.authResponse.code });
  }
}

FB.login(fbLoginCallback, {
  config_id: '4069075906679749',
  response_type: 'code',
  override_default_response_type: true,
  extras: {
    version: 'v3',
    featureType: 'whatsapp_business_app_onboarding'
  }
});

  4. Exchange code for access_token (Bubble API Connector)

    POST https://graph.facebook.com/v23.0/oauth/access_token
{
  "client_id": "<client_id>",
  "client_secret": "<client_secret>",
  "code": "<code>",
  "grant_type": "authorization_code",
  "redirect_uri": "<redirect_uri>"
}

:triangular_flag: Error returned

HTTP 400 {
  "error": {
    "message": "Can't Load URL: The domain of this URL isn't included in the app's domains. To be able to load this URL, add all domains and subdomains of your app to the App Domains field in your app settings.",
    "type": "OAuthException",
    "code": 191,
    "fbtrace_id": "AHmw-Xgttbirwh050y6E79I"
  }
}
  • Both App Domains and Valid OAuth Redirect URIs already include:
    https://app.bubble.io (editor)
    https://my-app.bubbleapps.io (dev & live)

:magnifying_glass_tilted_left: What I’ve verified / tried

  1. Exact match: redirect_uri in the /access_token POST is identical to the one used in FB.login (protocol, path, trailing slash).
  2. Added both dev and live sub‑domains in App Domains.
  3. Confirmed the code hasn’t expired (tested instantly).
  4. Checked docs and examples for Graph v22.0 vs v23.0 – no change.

Any insight, workaround, or sample config would be incredibly helpful. I’ve combed through docs and examples but can’t get past this 400.

Thanks a lot in advance! :folded_hands:

1 Like
2

Hey @carlovsk.edits hope you are doing great.

Wanted to know if you got any success in this issue. I am trying to integrate the same flow in my app.

Let me know if you can guide me on this.
Thank You,

3

Hey bro!

Unfortunately, I couldn’t make that call on Bubble, but we were also using n8n in the project, so I had the idea of trying to make the call through n8n, and it worked perfectly because I was sure that the domain making that call was the same one.

I believe that behind the scenes, Bubble must run the API workflows on another domain, probably one from AWS, so that’s how I got it to work, through n8n. If you’re not using n8n, you can try contacting Bubble support to see if they provide that supposed domain. I haven’t tried that option, but it might work lol.

4

Great. Thanks for the guidance. No, i am not using n8n. Will surely contact support if i can get any help from their side.

1 Like