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

coder-902 201 Reputation points
2021-06-23T13:27:52+00:00

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
Azure Static Web Apps
An Azure service that provides streamlined full-stack web app development.
968 questions

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. SnehaAgrawal-MSFT 21,766 Reputation points
    2021-06-30T16:37:03.227+00:00

    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.

    0 comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.