Smart Banners - Drive Mobile Web Users to the App

Overview

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

Smart Banner preview

Live Demo

Try opening the sample page on a mobile browser to see a demo with the default configuration.

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.
  • Paste the code into the <head> section of your website.
  • 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 it in the gs.banner() call as well.

That is 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 as the second parameter to gs.banner() as an object (see example).

Field Type Value
bgColor string Background color.
txtColor string Text color.
closeBtnColor string Close button color.
btnBgColor string “Get” button color.
btnTxtColor string “Get” button text color.
btnTxt string Custom text for the “Get” button.
icon string URL for a custom icon.

Custom Data

You can pass a key/value object (strings only) as the third parameter to gs.banner() (see example). These values will be passed to the mobile SDK as referral data (Android / iOS).

Callbacks

You can define callbacks for 2 events: onShow and onHide that is called when the banner is displayed and hidden, respectively.
As the fourth parameter to gs.banner(), pass an object with onShow and onHide keys, i.e:

1
2
3
4
5
6
7
8
var callbacks = {
    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
29
30
31
32
33
<script type="text/javascript">
var callbacks = {
    onShow: function() {
        console.log("banner visible");
    },
    onHide: function () {
        console.log("banner hidden");
    },
};

var options = {
    "btnTxt": "OPEN",
};

var customData = {
    "page": window.location.href,
};

window.getSocialAsyncInit = function() {
    // Use the app ID from the GetSocial dashboard
    var gs = new GetSocial("<appid>");
    // Call banner() with the ID of the element where the Smart Banner should be shown
    gs.banner("smart-banner-container", options, customData, callbacks);
};

(function(d, s, id){
    var js, sdkjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "https://sdk.getsocial.im/sdk.js";
    sdkjs.parentNode.insertBefore(js, sdkjs);
}(document, 'script', 'getsocial-jssdk'));
</script>

Next Steps

Give us your feedback! Was this article helpful?

😀 🙁