#StandWithUkraine

Out of the box, we support a few different variables that have built in classes, we have not added every varient to keep the size down, however you are able to modify each part using the class selectors to make it your own.

Please ensure that the all the code is added before the ending body tag in your website.

Loading the JavaScript

Loading the JavaScript is simple, all you need to do is load our hosted JavaScript file, below is an example on how to do this:

<script src="https://ukraine.wavey.group/banner.min.js"></script>

You also have the option to host the file yourself, click here to download the needed JavaScript file and CSS file to allow the banner to work.

Creating the banner

Once you have loaded the JavaScript file, you can now create the banner. Below is a sample on how to achieve this.

<script type="text/javascript">
UKRAINE.init(["dark", "small", "bottom-right"]);
UKRAINE.createBanner();
</script>

As you can see, all you need to do is add 4 lines into your website below the script we added above, simple! However, if you want to modify the design, there is a few changes you can make.

Changing the theme

By default, we have included two themes, Dark & Light. You can switch these by editing the first argument inside the UKRAINE.init function. Below is how to achieve this.

UKRAINE.init(["dark", "small", "bottom-right"]);
UKRAINE.init(["light", "small", "bottom-right"]);

Changing the size

Out of the box, we support a few different size variants. The options are Emoji, Hashtag, Small & Large, below are examples of these.

// Emoji: ❤️ 🇺🇦
UKRAINE.init(["dark", "emoji", "bottom-right"]);
 
// Hashtag: #StandWithUkraine
UKRAINE.init(["dark", "hashtag", "bottom-right"]);
 
// Small: We stand with 🇺🇦 Ukraine #StandWithUkraine
UKRAINE.init(["dark", "small", "bottom-right"]);
 
// Large: Russia's war against 🇺🇦 Ukraine is real and raw. Our hearts are with those who suffer.
UKRAINE.init(["dark", "large", "bottom-right"]);

Changing the position

You can also change the position using a handy parameter, below are the examples of these.

UKRAINE.init(["dark", "small", "bottom-right"]);
 
UKRAINE.init(["dark", "small", "bottom-left"]);
 
UKRAINE.init(["dark", "small", "top-right"]);
 
UKRAINE.init(["dark", "small", "top-left"]);

Override the styles

However, if you want to full override the styles, you can target the classes used, below is the main class lists for the banners.

.ukb {};
.ukb-light {};
.ukb-dark {};
.ukb-bottom-left {};
.ukb-bottom-right {};
.ukb-top-right {};
.ukb-top-left {};

Please ensure to add !important after any overrides to ensure the styles are changed from your custom stylesheet. Here is an example of changing the font size over the banner.

.ukb {
font-size: 20px !important;
};

Not sure how to use this? Send us an email and ask for help, we will update your website for free to anyone who wants to show support.

Made with ❤️ by Wavey in Glasgow, Scotland. #StandWithUkraine

Code highlighting provided by Torchlight