Is there a compatibility issue with Static Web Apps and Live-Chat embed services? Service works on localhost but not when deployed as Static Web App

Question

We are embedding Birdseed.io, a live chat type customer care service, into our application. The Birdseed embed is implemented in Google Tag Manager, and Google Tag Manager is integrated into our app through some embed code the public/index.html file of our React app.

When running the React app on localhost, the Birdseed icon displays properly as an overlay on the bottom right corner of the page. However when the app is deployed as a Static Web App, the Birdseed icon no longer renders. The Birdseed widget elements are visible in the DOM on both localhost and our SWA.

We have contacted Birdseed tech support and we believe it is an issue of compatibility between Birdseed and Azure's SWA. Does the Static Web App service have any known compatibility issues with embed code or embed live chat like services?

Working locally

Not working in deployment

Answer 1

Update: This issue is resolved.

Resolution: It was observed that the staticwebapp.config.json was missing from the following code:

"globalHeaders": {
"referrer-policy": "strict-origin-when-cross-origin"
}

The complete file should look like this:

{
"navigationFallback": {
"rewrite": "/index.html"
},
"globalHeaders": {
"referrer-policy": "strict-origin-when-cross-origin"
}
}

This might be caused by a combination of a spec of BirdSeed API and the default Referrer-Policy of Static Web Apps.

BirdSeed API seems to require the Referer header in a request as its spec. If the API is invoked without the Referer header, the API doesn't respond properly. This behavior of the API can be confirmed by curl or something easily.

The default Referrer-Policy of Static Web Apps is same-origin. This means that Referer header is not sent to other origin.