Skip to content

Instantly share code, notes, and snippets.

@nicodevs
Created November 18, 2022 19:39
Show Gist options
  • Save nicodevs/92098629837eaaeda2e4ceed1cd8d1c2 to your computer and use it in GitHub Desktop.
Save nicodevs/92098629837eaaeda2e4ceed1cd8d1c2 to your computer and use it in GitHub Desktop.
Black Friday Banner for Vuetify

Installation

To show the Vue School banner in your website, please include the following script tag in the <head>:

<script async type="text/javascript" src="https://vueschool.io/banners/main.js"></script>

This external script does the following:

  • Adds a fixed top <a> to the body and renders the banner inside
  • Adds a <style> tag to properly style it
  • Adds two classes to the html
    • The .has-bb-banner
    • Plus a class name derived of your website host replacing dots by underscores. If your host is example.com, then it adds the class .example_com to the html

Those classes are necesary to push down the content of the website to leave space for the banner. The class .has-bb-banner is removed when the banner is closed.

When a user clicks the banner, the Vue School's site opens in a new tab. The banner is closeable and will not reappear if a user has closed it (key stored in localStorage).

Preview

To preview the banner on the production website, you can follow these steps:

const script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://vueschool.io/banners/main.js';
document.head.appendChild(script);

That will add the script to the head and give you a live preview of how it will look on production. Please note that the script applies logic based on the domain of the website, meaning the expected style will be visible only in vuetifyjs.com (and not in localhost or similar previews). That's why we recommend, for testing purposes, to run the script following the steps described above.

Contact us if you have comments or questions. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment