Climatestrike

🌍 Let´s also strike in the web 🌍

Popup

Also in the web!

Take only 5 minutes to create and add a timed and customized website strike-banner to also create awareness online.

Show Live-Example

The banner is also fully mobile optimized! (works for all timezones)

Dates on which the Banner should appear

Select a time period in which the banner should appear. The banner will automatically be activated based on the selected time period and disappear the day after.

Start Date

End Date

Banner Header

To give the text a background color, simply use the symbol * before and after the word. Example: *Words*

Banner Content

To make a word STRONG simply use the symbols ** before and after the word. Example: **Words**

Call to Action Button

Button Text

Button Link

Background Image (Optional)

Please only use images-urls which are hosted by yourself or where you have the permission to do so.

Image Link

Set a strike-time

A countdown until the banner will be close automatically. Use the preview button to test it.

Let the website visitor close the banner anytime by a close icon

Make the banner only appear once.

This means that the banner wont be reloaded even when you close the browser or restart your computer as long as you visit the site with the same browser. The standard behavior is, that the banner wont be reloaded when navigation or refreshing the site but when opening a new tab or restarting the browser/computer.

Color 1

Color 2

Header

Marked Text

Text

Button Text

Strike banner design preview below

We strike for our Planet

Today, 23.09.2023, is the day of the global climate strike. We also want to raise awareness by striking online. Please consider using our strike time to make some notes on how you could become active to help save our planet for coming generations. Thank you!

More infos

Share your design and all settings via link with a colleque

Copy link to clipboard

General info: Once the script has been added to your website, the strike-banner will automatically be activated and deactivated according to the selected time-period (Its always based on your local time)

Your Script-Tag

Holds all the needed HTML, JavaScript and Style assets. That's the reason why the code snippet is so long. No externals scripts will be loaded, unless you add the Style Script via the checkbox below or when adding a background image link (source).

Slightly shorten the script by loading the needed css styles via an official external script
Will be loaded from: https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css

Make sure to generate the script again after changing the design or text. Generate Script again

Test your scripts

After you have added the script to your site, you can test it by adding #test_strike_banner at the end of the url. Once the countdown is up, you need to open a new tab to test it again. The checkbox "only show once" wont affect the testing environment to make testing easier. (Otherwise you would have to delete your browser storage all the time)

EXAMPLE: https://deineurl.de#test_strike_banner

Add the script to your site

You just need to copy the code snippet and paste it in between your Html HEAD-Tags.

<head> CODE SNIPPET </head>

How to do it in Wordpress? Here is a guide.

How to do it in WIX? Here is a video on Youtube.

This is a open source project. (Github Repo)

Questions, inspiration ect. Contact: julian[ät]happyinbox[dot].io