Bannerly docs

Appearance

Bannerly Integration Documentation ​

This guide provides step-by-step instructions to integrate Bannerly into your website.

Introduction ​

Bannerly is a flexible banner system built with Vue.js, designed for easy integration into your website. With Bannerly, you can dynamically load banners into your web pages using a configurable and customizable setup.

Installation ​

Step 1: Add the Script ​

Add the bannerly library file to your site. This file is the core script for the Bannerly system.

html
<script type="module" src="https://www.unpkg.com/lazybannerjs@latest/dist/bannerly.umd.js"></script>

Place this script tag at the beginning of your <body> tag.

Step 2: Add Banner Elements ​

In your HTML, add elements with the bannerly class and a project-id attribute. These elements act as placeholders for your banners.

html
<div class="bannerly" project-id="<project-id>"></div>

Using Default Configuration ​

By default, Bannerly automatically initializes when the page loads. No additional JavaScript is required if you are satisfied with the default settings.

Example ​

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bannerly Example</title>
    <script type="module" src="https://www.unpkg.com/lazybannerjs@latest/dist/bannerly.umd.js"></script>
  </head>
  <body>
    <div class="bannerly" project-id="<project-id>"></div>
  </body>
</html>

Custom Configuration ​

If you need to customize Bannerly's behavior, you can use the window.Bannerly.init() method.

Custom Options ​

  • serverUrl (string): Sets the API server URL.

Example ​

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bannerly Custom Example</title>
    <script type="module" src="https://www.unpkg.com/lazybannerjs@latest/dist/bannerly.umd.js"></script>
  </head>
  <body>
    <div class="bannerly" project-id="<project-id>"></div>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', () => {
            window.Bannerly.init({
                serverUrl: 'https://myserver.com/api'
            });
        });
    </script>
  </body>
</html>

Global Configuration ​

If you prefer a simpler setup for custom configurations, you can define a global configuration object before loading the script.

Example ​

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bannerly Global Config Example</title>
    <script type="module" src="https://www.unpkg.com/lazybannerjs@latest/dist/bannerly.umd.js"></script>
  </head>
  <body>
    <div class="bannerly" project-id="<project-id>"></div>
    <script>
        window.Bannerly = {
            config: {
                serverUrl: 'https://myserver.com/api'
            }
        };
    </script>
  </body>
</html>

API Reference ​

window.Bannerly.init(config) ​

Initializes the Bannerly system.

Parameters: ​

  • config (object): Optional configuration object.
    • serverUrl (string): API server URL.

Example: ​

javascript
window.Bannerly.init({
    serverUrl: 'https://myserver.com/api'
});

window.Bannerly.setServer(url) ​

Sets the API server URL.

Parameters: ​

  • url (string): The base URL of the API server.

Example: ​

javascript
window.Bannerly.setServer('https://myserver.com/api');

Examples ​

Simple Integration ​

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Simple Bannerly Integration</title>
    <script type="module" src="https://www.unpkg.com/lazybannerjs@latest/dist/bannerly.umd.js"></script>
  </head>
  <body>
    <div class="bannerly" project-id="<project-id>"></div>
    <div class="bannerly" project-id="<project-id-2>"></div>
  </body>
</html>

Advanced Integration with Custom Configurations ​

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Advanced Bannerly Integration</title>
    <script type="module" src="https://www.unpkg.com/lazybannerjs@latest/dist/bannerly.umd.js"></script>
  </head>
  <body>
    <div class="bannerly" project-id="<project-id>"></div>
    <div class="bannerly" project-id="<project-id-2>"></div>
    <script>
        window.Bannerly = {
            config: {
                serverUrl: 'https://myapi.example.com'
            }
        };
    </script>
  </body>
</html>

Notes ​

  • Default Initialization: If no configuration is provided, Bannerly automatically initializes using default settings.
  • Custom Selectors: Ensure your custom selector matches the elements you want Bannerly to manage.
  • Error Handling: Make sure the serverUrl is correct to avoid API errors.

For additional help, contact support or refer to the API documentation.