User Guide

For any questions or support, please email us at support@mail.smartsalebanner.com

Getting Started

After purchasing SmartSaleBanner, you now have unlimited access to the wide amount of features available that allow you to convert more visitors into customers. Once you are logged in, you will be first greeted with a dialog to enter your domain for your website.

Your First Domain

Domain: your domain should be the root of your website, without the protocol. Like google.com

Your domain will hold all the SmartSaleBanners that you wish to create, and within those any amount of variants to customize and show your visitors.

If you own multiple websites, feel free to add as many domains as you’d like using the dropdown menu at the top left of the site, or by navigating to https://smartsalebanner.com/domains (opens in a new tab) and clicking on the “Add New Domain” button.

Installation

After you are satisfied with your banner(s) and configuration, install the banner by pasting the code snippet within the <head> element of your website. This unique snippet can be found on the page of the list of your banners, or here (be sure to change [domain] to your domain with no brackets):

<script
  defer
  data-domain="[domain]"
  src="https://smartsalebanner.com/js/banner.js"
></script>

SmartSaleBanners

Your banner is what visitors will see when they view your website. Each banner can have unlimited variants, but only one variant will be visible at a time, and only one banner will be displayed on your website at a time.

Banners & Configuration

You may only have one active banner at a time. This is indicated by the Active badge when viewing your banners for a particular domain, as well as the Active toggle switch when editing a single banner’s configuration. To delete a banner, click the Trash icon on the list of banners, or the Trash icon at the top right when editing a single banner’s configuration. To rename a banner (the banner name is not visible to visitors), click the pencil icon at the top of the page when editing a single banner’s configuration.

Display Mode

Banners have 3 display modes:

  • Optimized: (Default) For the specified training duration, a random variant will be displayed to your visitors. Each visitor has a single variant they will see, so when they refresh the page they will not see a new variant unless they clear their browsing data. This is intentional so that the visitor will not be confused by the changing variants during page refresh and site navigation. Visitor interactions are tracked and analyzed (impressions, clicks, and view time) to determine which variant will yield the greatest conversion rate. After the training duration has ended, only the best performing variant will be displayed until this is manually changed.
  • Manual: When selecting manual display mode, you must also select a specific variant to be displayed to all visitors. Other variants are ignored during this display mode.
  • Random: A random variant will be displayed to all visitors.

Pages

You may specify the pages where your banner will be displayed on your site by selecting one of three options:

  • All pages: (Default) The banner will be displayed to your visitors on every page of your domain.
  • Homepage only: The banner will only be displayed to your visitors on the homepage of your domain. This is equivalent to an empty path after your domain, or a trailing forward slash “/” (I.E.: google.com or google.com/)
  • Specific pages: You may specify individual pages where the banner will be displayed to your visitors. The pathing structure follows typical file routing. If you specify /blog, every subpath will also be selected to show the banner (/blog/post1, /blog/post2, etc). If you only want a single page, you should specify the exact route (/blog/post2/comments). A single forward slash should be used to denote your homepage “/”.

Duration

You may specify a date/time range during which the banner should be displayed. Not doing so will default to the banner being displayed constantly and forever. You should use this functionality if you are running a limited sale only valid during some days. All times in this configuration are using your local time in your browser.

  • Start Date: The day and time your banner should begin to display to visitors. If the duration feature is toggled on and the start date is left empty, the banner will be displayed as soon as it is activated until the specified End Date.
  • End Date: The day and time your banner should stop displaying to visitors. If the duration feature is toggled on and the end date is left empty, the banner will be displayed only after the Start Date, but with no end.

Variants

Variants of the banner are typically visually unique versions of your banner. This is the core of SmartSaleBanner. You may add as many or as few variants as you’d like (minimum 1). Click the “Add Variant” button to add a new variant. Click on the variant’s text to edit a single variant. When editing you will see a live preview of your banner.

Please note that you will need to save all changes using the save button at the top of the page for changes to take effect. They will be effective immediately for all visitors.

Variant Settings

  • Banner Text: This is the text that will be displayed to your visitors (“Launch Sale $100 Off”)
  • Redirect Url: (optional) This is the url that you may enter to redirect your users when they click the banner. This could be a checkout page or a section on your homepage like https://smartsalebanner.com#pricing (opens in a new tab)
  • Clipboard Text: (optional) This is the text that you may enter that will be copied to the visitors clipboard when they click the banner. This could be a coupon code like LAUNCH100
  • Sticky Header: This is a toggle option to either have it enabled so the banner stick to the top of the page when the user scrolls so it remains in view, or disabled so that it only lives at the top of the page and is not visible when scrolling beyond view.
  • Opens In New Tab: This is a toggle option that only relates to the Redirect Url. When enabled it will open the redirect url in a new tab of the visitor’s browser.

Variant Style

  • Banner Height: This is the height in pixels of the banner, a good number would be somewhere between 20 and 40.
  • Banner Color: This is the background color of the banner. You may enter a specific color hex code like 00FF00
  • Text Size: This is the font size of the text on the banner.
  • Text Color: This is the color of the font of the text on the banner. Use the preview to determine readability between the options you’ve selected for the banner and text colors.
  • Font: SmartSaleBanner uses your website’s font to create a unified branding impression for your visitors. You may not select a specific font during this configuration.

A Note For Advanced Users

You may continue to customize the banner further with custom CSS if you’d like. Simply apply any styling rules to the following css classes:

  • .ssb-banner-container this class is applied to a <div> element that contains the banner
  • .ssb-banner-text this class is applied to a <p> element that contains the Banner Text

Analytics

View analytics for all your domains and banners by navigating to: https://smartsalebanner.com/analytics (opens in a new tab). Here you can see the accumulative statistics for each domain, or you can click Analytics Breakdown to view more information about a specific domain. You can also navigate here by using the Analytics button at the top of the page.

  • Visits: the number of times the banner was displayed to a visitor
  • Clicks: the number of times the banner was clicked by a visitor and the number of times a custom conversion click was recorded. See the advanced section below for more information.
  • Click Ratio: Clicks divided by Visits
  • View Time: the amount of time the banner was viewed on a single page before navigation. This does not count the time accumulated when the browser tab is inactive.

Advanced

This section is geared towards those who wish to optimize their experience with SmartSaleBanner.com and contains materials and configuration options that are more technical.

Advanced Styling Customization

You may continue to customize the banner further with custom CSS if you’d like. Simply apply any styling rules to the following css classes:

  • .ssb-banner-container this class is applied to a <div> element that contains the banner
  • .ssb-banner-text this class is applied to a <p> element that contains the Banner Text

Advanced Conversion Metrics

You may specify additional elements on your website that you wish to track for conversions. These specified elements will have their button clicks tracked to better track the optimized banner variant, and to track in the analytics page. A common use case for this feature is to track when a user visits your page and clicks a button such as a checkout button or a button to sign up for your newsletter. You can add as many or as few of these elements as you’d like.

Specifying A Custom Conversion Click Element

To specific which element should be used to track additional conversions, simply add the data attribute data-ssb-click.

Examples:

<button data-ssb-click>Buy</button>
<a data-ssb-click href="#">Link</a>
Getting Started