How to get the Accept Headers of the client-side user?

Hello all!

I need to get the Accept Header of the browser’s user (client side) and I don’t know how to do it within Bubble.

The accept header is a string that looks like this
“AcceptHeader”: “text/html, application/xhtml+xml, application/xml;q=0.9, /;q=0.8”

Anyone knows how to do it ?
It is a necessary info to process a card payment.

Thanks :pray:

there are probably different ways to do this.
a quick solution is to set up a backend workflow whit detected inputs and include headers on, and return the header value you want. then call it from the frontend with a request set up with the api connector.

Thank you @dorilama for your quick response,
I setup the call including the headers and called it from the frontend,
Here’s the list of the basic detected info,

I don’t find the “accept” in the headers, am I missing something? Or is there a way to manually get it in the goal?

Thank you for your kind help,

{
“body”: {},
“headers”: {
“host”: “xxx.bubbleapps.io”,
“connection”: “close”,
“accept-encoding”: “gzip”,
“x-forwarded-for”: “xxx,::ffff:xxx”,
“cf-ray”: “xxx”,
“content-length”: “0”,
“x-forwarded-proto”: “https,https”,
“cf-visitor”: “{"scheme":"https"}”,
“user-agent”: “Bubble”,
“x-bubble-depth”: “1”,
“traceparent”: “xxx”,
“baggage”: “bubblegroup.workload.tags.http.route=xxx”,
“cf-connecting-ip”: “xxx”,
“cdn-loop”: “cloudflare”,
“cf-ipcountry”: “US”,
“x-forwarded-port”: “xxx”,
“x-forwarded-host”: “xxx.bubbleapps.io
}
}

you need to call the detect endpoint feom a browser and you should be able to see all the available headers. when you set up the api connector for use in a workflow you need to add the option to make the call from the frontend (only get requests as data are allowed to do that if I recall correctly)
if you still can’t see it you may need to set an endpoint with an external service
what do you have to do with it anyway. that’s something you need in a server to see what format it needs to return. in the frontend you usually use feature detection with code if you want to know if something is supported

Thank you @dorilama

With your help I managed to get the accept header,

  1. I created a backend API workflow, exposed as a public API workflow, toggled the “include headers in the detected data”
    I pressed the Detect Data button to get the url to initialize the call.

  2. I setup the api call in the api connector with this settings:
    use as : Data, Data type JSON, POST
    by doing so, a new setting appears: “attempt to make call from the browser”

  3. Instead of initializing the call within the API Connector button “Initialize the call” (it won’t work this way), I initialized it using Postman. By default, Postman adds the accept header in all its default api calls.

  4. Bubble received the api call BUT a warning message still appears in the API call, mentioning that the call still need to be initialized. The trick is simply to “manually enter API response” with
    {
    “status”: “SUCCESS”,
    }

  5. Now, it is possible to add an input field on the frontend (client side) within bubble and use the dynamic expression “get data from external api”, here the newly created api call in the API connector plugin will be listed in the available calls.

  6. Loading the page in the browser will fire the api call and be received in the backend. You can add a workflow within the back API workflow to save the accept header data and all necessary info.

Hope this helps everyone with this issue.