Digital Climate Strike
This September, millions of us will walk out of our workplaces and homes to join young climate strikers on the streets and demand an end to the age of fossil fuels.
This is the source code for the Digital Climate Strike's widget, that will allow anyone with a website to join the digital climate strike in solidarity. Click here to learn more.
This project was inspired by the Fight for the Future Red Alert widget.
How to install the widget on your site
<script src="https://assets.digitalclimatestrike.net/widget.js" async></script>
Option 2 (Self-Hosted):
1. Clone the repo with command `git clone https://github.com/fightforthefuture/digital-climate-strike.git`. 2. Inside the project's folder, run 'npm install && npm run build'. A folder named 'dist' will be generated. 3. Copy the files index.html and widget.js from dist into your site's folder. 4. Configure the 'iframeHost' option, as described in the section about `DIGITAL_CLIMATE_STRIKE_OPTIONS`. 5. Include the widget anywhere on your site with <script src="widget.js" async></script>
You can change the user experience and do some customization via the
DIGITAL_CLIMATE_STRIKE_OPTIONS described below. Before adding the widget make sure you have also read the section below about Google Analytics tracking.
If you have any problems or questions regarding the widget, please submit an issue.
How it works & Demo
Then at midnight on September 20th for 24 hours, the banner will expand to be full screen (demo), showing an unavoidable message that your site is joining the Global #ClimateStrike for the day, directing them to join the Global Climate Strike movement:
For those who cannot shut down their website for the day, a closable overlay option can also be configured (demo):
You can demo the widget in different languages by adding a 'language' parameter to the URL. (Example)
The widget is designed to appear once per user, per device, per day, but can be configured to display at a different interval. If you'd like to force it to show up on your page for testing, reload the page with
#ALWAYS_SHOW_DIGITAL_CLIMATE_STRIKE at the end of the URL.
Please take a look at widget.js if you want to see exactly what you're embedding on your page.
The widget is compatible with Firefox, Chrome (desktop and mobile), Safari (desktop and mobile), Microsoft Edge, and Internet Explorer 11.
If you define an object called
DIGITAL_CLIMATE_STRIKE_OPTIONS before including the widget code, you can pass some properties in to customize the default behavior.
Important note regarding Google Analytics tracking
As you can see in the
DIGITAL_CLIMATE_STRIKE_OPTIONS above, Google Analytics is configured by default to post events when the widget is shown and when any of the buttons are clicked. See index.js for more details. The reasons for this are outlined in Issue #76. If you would like to disable this please add the widget to your site with the following configuration: