Skip to content

Smart Banners - Drive Mobile Web Users to your App

Overview

Smart Banners are fully customizable widgets intended to drive traffic to mobile apps from mobile websites.

Smart Banner preview

Getting Started

Creating a Smart Banner is very easy. Simply log in to the Developer Dashboard and navigate to Smart Banners.

Here, you can customize the content and appearance of your banner:

Smart Banner customization

When you are done customizing, follow these steps to place the banner on your website:

  • Click Generate Smart Banner code. The banner code will be copied to your clipboard.
  • Create an empty div with the id smart-banner-container and place it right before </body>:

    1
    <div id="smart-banner-container"></div>
    
  • If you would like to use a different ID, make sure to update target parameter in the smartBanner.create() call as well.

  • Paste the code right before the </body> section of your website, after the div you’ve just created.

That’s it! Open your website on an Android or iOS device and check out your new Smart Banner!

Advanced Settings

In addition to the visual editor on the Developer Dashboard, there are various options you can pass to the SDK during banner initialization.

These values can be passed to smartBanner.create() as an object (see example).

Field Type Value
description string Custom app description. Won’t be shown if not specified.
icon string URL for a custom icon.
rating string App rating between 0 and 5, in 0.5 increments. 4 by default.
reviews string Number of reviews. Won’t be shown if not specified.
position string Position of the banner, top or bottom (default).
bgColor string Background color.
txtColor string Text color.
closeBtnColor string Close button color.
reviewsColor string “Number of reviews” color.
btnBgColor string “Get” button color.
btnTxtColor string “Get” button text color.
btnTxt string Custom text for the “Get” button.

Custom Data

You can pass a key/value object (strings only) using the customData parameter (see example). These values will be passed to the SDK as referral data (Android / iOS, Unity and Web).

Callbacks

You can define callbacks for 2 events: onShow and onHide that are called when the banner is displayed and hidden, respectively (see API Reference and example below).

1
2
3
4
5
6
7
8
var params = {
    onShow: function() {
        console.log("banner visible");
    },
    onHide: function () {
        console.log("banner hidden");
    },
};

Example

Here’s an example with all custom fields defined:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script src="https://websdk.getsocial.im/sdk.min.js"></script>
<script type="text/javascript">
  var getSocial = new GetSocialSDK({appId: "your-app-id"});

  getSocial.smartBanner.create({
    target: "smart-banner-container",
    options: {
      "reviews": "23234",
      "rating": "2.5",
      "bgColor": "#42ceed",
      "txtColor": "#41c97e",
      "reviewsColor": "#c07878",
      "closeBtnColor": "#06100e",
      "btnBgColor": "#191e1f",
      "btnTxtColor": "#7b96af",
      "btnTxt": "asdGET"
    },
    customData: {
      "key": "value",
    },
    onShow: function() {
      console.log("banner visible");
    },
    onHide: function() {
      console.log("banner hidden");
    },
  });
</script>

Next Steps

Give us your feedback! Was this article helpful?

😀 🙁