Vue School banner

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.

Installation

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.

Query String Parameters

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.

What happens when the script is loaded?

This script performs the following actions:

  • It renders the banner as a <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.
  • It adds a <style> tag to properly style the banner.
  • And it adds two classes to the 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.

What happens when a user clicks the banner?

When a user clicks the banner, the Vue School's promotional site related with the current campaign opens in a new tab.

Can a user close the banner?

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).

Closing up

Let us know if you have comments or questions, we are here to help.

Thanks,

The Vue School Team