After implementing the smartbanner on your website using this article it will work right out of the box using a set of default configuration options. However if you would like to change some of these options we provide a simple method to do so.


The configuration object

When the page is loaded the smartbanner will read it's configuration from the Javascript object window.highstreetBanner.config. Therefore creating an object with the exact same name will result in your configuration values being used instead of the default values. 


Note: please make sure that you have initialised this configuration object before our Javascript is loaded, by placing it higher in the DOM for instance.


Example:

<body>
<script type="text/javascript">
    window.highstreetBanner = {
        config: {
            // Your custom configuration values here
        }
    };
</script>

.. webpage contents

<script type="text/javascript" src="...highstreet smartbanner url here"></script>
</body>


Configurable options

Click here to download PDF file describing all possible configuration values.


Example configuration object

Below you will find an example configuration object with most of the configuration options set.


window.highstreetBanner = {

  config: {

    // Give the banner a custom HTML id
    elementId: 'my-smart-banner',

    // Insert the banner html at the top of the page
    insert: (html, done) => {

      $('body').prepend(html)
      done()
    },

    // Set a custom name for the banner's cookie
    cookieName: 'my-smart-banner-cookie'

    // Let the cookie expire after 1 day
    cookieExpiration: 1,

    // Blacklist the Highstreet user agent
    blacklistedUserAgents: ['Highstreet'],

    // Supply deeplinkcontent for when no deeplink is found on the page
    deeplinkContent: {
      category: 'sale',
      product: 'shirt-123'
    }

  }

};


Hiding and showing the smartbanner programatically

Sometimes you might want to show the smartbanner in the first place, but hide it later when some other UI element becomes more important (a modal for instance). In that case you can simply call a method on the window.highstreetBanner object to hide the smartbanner and show it again later.


window.highstreetBanner.show(); // Showing the banner

window.highstreetBanner.hide(); // Hiding the banner