Hello, partner! This is the documentation for the Vue School banner script for affiliates. It provides an overview of the banner, installation instructions, and its functionalities.
To show the Vue School banner in your website, include the following script tag in the <head>
:
<script>
const script = document.createElement('script')
script.async = true
script.src = 'https://vueschool.io/banner.js?affiliate=YOUR_AFFILIATE_KEY&type=BANNER_TYPE'
document.head.appendChild(script)
</script>
As you can see, this adds an async
script tag to the head of your website.
The script URL accepts a query string with the following values:
affiliate
, your affiliate key. Please replace YOUR_AFFILIATE_KEY
with the correct value in the code above. For example, vuejs
.type
, the type of banner to display. Please replace BANNER_TYPE
with the chosen value in the code above. You have three options:
top
to display a banner fixed at the top of the page. Please be aware that the script may cause a minor layout shift when the banner is displayed, as it adds 72px of vertical space at the top of the page. However, the script includes custom CSS that can handle fixed elements like navbars and sidebars. Check the demo here.bottom
to display a banner fixed at the bottom of the page. This doesn't cause layout shift because the banner is floating at the bottom of the page. Check the demo here.inline
to display a banner inline. You must include a element in the DOM with the id bb-banner-container
, the script will render the banner inside. Check the demo here.This script performs the following actions:
<a>
element injected to the body
(or to #bb-banner-container
if the type is inline
), with a href
to the current campaign and query parameters to identify you as referrer.<style>
tag to properly style the banner.html
:
has-bb-banner
, which is removed if the banner is closed.bb-YOUR_AFFILIATE_KEY
, a class name derived of your affiliate key, that enables per-affiliate CSS customization.When a user clicks the banner, the Vue School's promotional site related with the current campaign opens in a new tab.
If you use the fixed top
or bottom
banner, a close button will be rendered. If a user clicks that close button, the banner hides and it does not reappear on refresh (to achieve this, we store a key on localStorage
).
Let us know if you have comments or questions, we are here to help.
Thanks,
The Vue School Team