GatsbyJS and dotenv
December 30th, 2019
- Link to the GatsbyJS and dotenv podcast on anchorfm
Last note: what Crisp says is true, your Crisp website ID is always there on the final rendered HTML, so it likely won’t matter much to hide it behind .env file.
This means in Gatsby speak that trying to use environment variables with Crisp whose real values would render client-side anyway in the final analysis, would not work!
Original Podcast Transcript
Friday I added a Crisp chat box to my site. I was happy to find such a great widget to enhance my website experience.
But today I realized that I had forgotten to add the
package to my site so that I could avoid sharing my Crisp
the world on Github.
However, it was not a travesty. If the widget had been something I had built
myself and included some kind of API key, it would have been somewhat of a
travesty. I would have had to remove the whole repository from Github and then
pushed it to remote again after adding the
dotenv npm package, including
websiteId environment variable to the
.env file and
.env file to my
With Crisp, all you need to do is delete your existing website
configuration and re-add it. This way you receive a new
websiteId which you
can add to your
and then add it to your
However, I had problems
environment variable into
GatsbyJS docs were very confusing. In addition,
different sources cited different ways of configuring environment variables.
In the end, however, the Crisp widget only appeared if I placed the actual
websiteId string as a value of the
websiteId option in the
gatsby-config.js. Just as shown in the
docs. I tried all the other solutions provided in the links I include in the
post transcript of this podcast
but none worked for me.
Using environment variables only resulted in an
configuration, no matter which way I configured them.
The working configuration is demonstrated in my post Crisp Chat Box now on interglobalmedianetwork.com.
What’s interesting, however, is that my new websiteId string in the html does
not match the string in
gatsby-config.js. Nor does it match the previous
websiteId I had. Go figure.
According to Crisp, it is not a security risk to add the actual website id
gatsby-config.js. It still would be nice to have the option of using
a package like
I will continue to research this issue, and I have actually created an issue regarding this problem on the gatsby-plugin-crisp-chat Github repository.
I will be embedding this episode of Plugging in The Holes along with a transcript in the form of a post on interglobalmedianetwork.com for your hearing and reading pleasure. I will be including the related resource links mentioned in the podcast of course. Always do. Bye for now!
Created by Maria D. Campbell who lives and works in New York City building and teaching useful things. You should follow her on Twitter.