question

coder-902 avatar image
0 Votes"
coder-902 asked SnehaAgrawal-MSFT answered

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

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

108520-birdseedworkingcensored.png
Not working in deployment
108617-birdseednotworkingcensored.png


azure-static-web-apps
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Apologize for inconvenience with this issue! Thanks for reaching here. I realized you have created support ticket for this and an support engineer is working closely with you. Will make sure to update this thread once we resolve this, so that it is helpful for the community.

1 Vote 1 ·

1 Answer

SnehaAgrawal-MSFT avatar image
0 Votes"
SnehaAgrawal-MSFT answered

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.

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.