Skip to content

Smart Widget - Drive Web Users to the Mobile App

Overview

Use the GetSocial Web 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 the live demo on mobile or desktop to see a demo of the widget.

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
<div id="smart-widget-container"></div>
<script src="https://websdk.getsocial.im/sdk.min.js"></script>
<script type="text/javascript">
  var getSocial = new GetSocialSDK({appId: "your-app-id"});

  // Call create with the ID of the div where the widget should be shown
  // and a unique token of your choice (e.g "mywebsite")
  getSocial.smartWidget.create({
    target: "smart-widget-container",
    token: "mywebsite"
  });
</script>

Finally, create the <div> you would 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 in the options parameter as shown below (see API Reference):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
 getSocial.smartWidget.create("mywidget", {
   target: "smart-widget-container",
   token: "mywebsite",
   options: {
     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 marketing 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
getSocial.smartWidget.create("mywidget", {
  target: "smart-widget-container",
  token: "existing-token",
});

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

Smart Widget Embed Button

Analytics

Smart Widgets are powered by Smart Links, therefore you will see all analytics related to the Smart Widget on the GetSocial DashboardAnalytics section → Smart Links tab.

Next Steps

Give us your feedback! Was this article helpful?

😀 🙁