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.

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:

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>:

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

Banner Options

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

var params = {
    onShow: function() {
        console.log("banner visible");
    },
    onHide: function () {
        console.log("banner hidden");
    },
};

Example

Here’s an example with all custom fields defined:

<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

• Setup mobile app to receive custom data on Android, iOS and Unity.
• Setup webhooks to receive app install and app open events on your backend.

Give us your feedback! Was this article helpful?

😀 🙁