How to add a StandWithUkraine banner to your website

We have all seen the horrific situation in Ukraine, from people's homes being destroyed, to many men woman and children losing their life's. Everyone is trying to show their support in their own way, but no everyone has the option to donate their money. This is where we have made Ukraine Banners.

As makers and creators, we wanted to make free service that will allow anyone with a website to show their support. For example, on our website, we have the following banner:

The issue with this, was that we needed to add a new element into our website, add the CSS and then compile the assets to have this working, and internally we talked about how we can make this easy for people to add a similar banner to their website, without the need to do a lot of work, this is when we decided to make Ukraine Banners.

How it works?

It is a very simple solution, you simply include our provided JavaScript file inside your website, and then initialise the banner with a a few lines of code and then in the background, our solution will add the banner into your website. Use the following code will result in the same banner shown on the current page:

<script src="https://ukraine.wavey.group/banner.min.js"></script>
<script type="text/javascript">
    UKRAINE.init(["light", "hashtag", "bottom-right"]);
    UKRAINE.createBanner();
</script>

Laravel Package

We have also made a simple Laravel Package that allows anyone with a laravel application to include these banners. Firstly, install the package using the following command:

composer require wavey/ukraine-banners

Once you have done this, you will need to run the following install command:

php artisan ukraine-banners:install

This will publish the config alongside the views to /resources/views/vendor/wavey. You will now have the ability to include <x-ukraine-banner></x-ukraine-banner> into your views. For example, inside your app.blade.php layout, add this before the </body> tag and now every page will have the banner shown.

You can also modify the config file at config/ukraine-banners.php, however the better solution is to add the following to your .env file:

UKRAINE_BANNER_ENABLED=true
UKRAINE_BANNER_THEME="dark"
UKRAINE_BANNER_SIZE="small"
UKRAINE_BANNER_POSITION="bottom-right"

You can modify these settings as you need, for example, you can make a large, dark theme banner that shows at the top left of your site with the following settings:

UKRAINE_BANNER_ENABLED=true
UKRAINE_BANNER_THEME="dark"
UKRAINE_BANNER_SIZE="large"
UKRAINE_BANNER_POSITION="top-left"

Simple!

So what is next?

We are currently working on launching a Cloudflare application that will add this to your website, alongisde making a WordPress plugin to do the same. We are also calling all developers & designers, if you want to help out by adding new functionality, new styles or even just improve the project, you can check out the GitHub repos here. Feel free to submit some pull requests.

👍 Like our content? Check out our Twitter @waveygroup