Smart Widget for Websites

Use the GetSocial JavaScript SDK to quickly embed a widget with App Store / Google Play buttons to your mobile website with full attribution tracking. For visitors on desktops, show a one-click SMS form to send an install link.

Live Demo

Try opening sample page on mobile and desktop to see a demo of the widget. You can customize widget colors to match your website style.

Smart Widget on desktop, iOS and Android

Getting Started

Smart Widgets are integrated into your website via our SDK. Simply put the following into the head section (or right before the </body> tag) of your website:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">
window.getSocialAsyncInit = function() {
    // Use the app ID from the GetSocial dashboard
    var gs = new GetSocial("<appid>");

    // Call widget() with the ID of the div where the widget should be shown
    // and a unique token of your choice (e.g "mywebsite")
    gs.widget("mywidget", "<token>");
};

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

Finally, create the <div> you’d like the widget to be shown in and you are done!

Customization

You can customize the color scheme of your widget to fit your website. Simply pass your preferred colors to the widget function as shown below:

1
2
3
4
5
6
 gs.widget("mywidget", "<token>", {
    bgColor: "#564423", // Background color for the widget.
    sendBgColor: "#468966", // Background color for the "SEND" button
    sendTxtColor: "#FFFFFF", // Text color for the "SEND" button
    smsTxtColor: "#FFFFFF", // Text color for the SMS description
});

Note

You can make the widget background transparent by setting bgColor to "transparent".

Behind the scenes, Smart Widgets are implemented by automatically creating a campaign and a Smart Link for you in the Developer Dashboard. This makes it very easy for you to use the widget with an existing Smart Link. To do this, simply use the token of an existing Smart Link for widget initialization:

1
2
3
4
window.getSocialAsyncInit = function() {
    var gs = new GetSocial("<appid>");
    gs.widget("mywidget", "<existing-token>");
}

You can also copy a prefilled embed code from the Developer Dashboard:

Smart Widget Embed Button

Smart Widget Embed Code

Give us your feedback! Was this article helpful?

😀 🙁