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_comto the html
- The
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:
- Go to https://vuetifyjs.com
- Open the developer toolbar
- Run the following:
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!