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.
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:
<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:
<div id="smart-widget-container"></div>
Congratulations, 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):
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".
Using Smart Widgets with Smart Links¶
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:
getSocial.smartWidget.create("mywidget", {
target: "smart-widget-container",
token: "existing-token",
});
You can also copy a prefilled embed code from the Developer Dashboard:
Analytics¶
Smart Widgets are powered by Smart Links, therefore you will see all analytics related to the Smart Widget on the GetSocial Dashboard → Analytics section → Smart Links tab.
Next Steps¶
- Setup mobile app to receive Smart Links on Android, iOS and Unity.
- Setup webhooks to receive app install and app open events on your backend.