Looking for a Way to Use Bubble Image URLs in WhatsApp Template Messages (via Twilio)

Need help APIs
1

Hi all,

I’m trying to send WhatsApp template messages through Twilio that include dynamic images, specifically, images uploaded in my Bubble app via the Dropzone Multi File Uploader and stored as File fields on Things.

The issue: Twilio and WhatsApp require that the media URL used in a message template has a fixed domain and path, with only the filename or ID as a variable. So for example:

https://media.mysite.com/swarm-images/{{1}}

And then at send time, you replace {{1}} with something like swarm-abc123.jpg.

But Bubble generates image URLs like:

https://9f06fbe4f8425b8f89621d6176308e0b.cdn.bubble.io/f1748637141842x540034782988601200/IMG_0463.jpg

These are public (great), but:

  • The domain is randomized
  • The path includes unpredictable IDs
  • There’s no way to “extract” just the filename or use a structured folder
  • I can’t use them in Twilio templates unless I can restructure them

I’d like to avoid any external paid storage, and session messages aren’t an option because the user hasn’t messaged first so I have to use WhatsApp templates.

Is there any way, using native Bubble features:

  • To get more control over the structure of the image URL?
  • Or to serve Bubble images through a predictable public path (like a subdomain)?
  • Or to rewrite image URLs in a way compatible with Twilio templates?

Thanks!

2

The “weird” Bubble CDN domain is random-looking, but it’s fixed for your app!
Once you realise that, you can leave the domain + first slash hard-coded in the WhatsApp template and pass the rest of the path as the variable.

1 · Find the constant part once

Take any file URL your app generated, e.g.

https://9f06fbe4f8425b8f89621d6176308e0b.cdn.bubble.io/f1748637141842x540034782988601200/IMG_0463.jpg

Everything up to the first single “/” after the domain will never change for this app:

https://9f06fbe4f8425b8f89621d6176308e0b.cdn.bubble.io/

Copy that — that’s what goes in the template.

2 · Create the WhatsApp media-URL template in Twilio

https://9f06fbe4f8425b8f89621d6176308e0b.cdn.bubble.io/{{1}}

Twilio/WhatsApp are happy because:

  • Domain and first path segment are fixed
  • Only {{1}} is variable

3 · At send-time, give Twilio just the variable part

When you send the template via the API Connector / Twilio plugin, set {{1}} to:

File's URL  
  :find & replace  
      Find = https://9f06fbe4f8425b8f89621d6176308e0b.cdn.bubble.io/  
      Replace with = (leave blank)

That strips the constant prefix and leaves:

f1748637141842x540034782988601200/IMG_0463.jpg

Exactly what the template expects.

3

Thank you very much!

1 Like