Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save AustinHay/c9b371c3b3b4715407d7cc6d9139a355 to your computer and use it in GitHub Desktop.
Save AustinHay/c9b371c3b3b4715407d7cc6d9139a355 to your computer and use it in GitHub Desktop.
An example of how to use the Web SDK to grab referring parameter data and apply it to other branch calls, like branch.banner()
<html>
<head>
<script type="text/javascript">
// Grab pathname from URL and parse into the URI for Vevo
var url = window.location.href;
var channel = 'Mobile Web';
var feature = 'App Banner';
var campaign = null;
var referring_data = null;
console.log(channel);
(function(b,r,a,n,c,h,_,s,d,k){if(!b[n]||!b[n]._q){for(;s<_.length;)c(h,_[s++]);d=r.createElement(a);d.async=1;d.src="https://cdn.branch.io/branch-latest.min.js";k=r.getElementsByTagName(a)[0];k.parentNode.insertBefore(d,k);b[n]=h}})(window,document,"script","branch",function(b,r){b[r]=function(){b._q.push([r,arguments])}},{_q:[],_v:1},"addListener applyCode banner closeBanner creditHistory credits data deepview deepviewCta first getCode init link logout redeem referrals removeListener sendSMS setIdentity track validateCode".split(" "), 0);
branch.init('Your-Branch-KEy', function(err, data) {
referring_data = data.data_parsed;
console.log(referring_data);
channel = referring_data['~channel'];
feature = referring_data['~feature'];
});
branch.data(function(err,data) {
console.log(data)
});
branch.banner({
icon: 'http://a2.mzstatic.com/us/r30/Purple49/v4/67/54/69/67546922-ebc1-dee6-8454-85b93a101dbd/icon175x175.png', // You should replace this with your own CDN static asset.
title: 'Foursquare',
description: 'Foursquare is your ultimate city guide, in your pocket. Find the best places to eat, drink, shop, or visit — in any city in the world. Access over 60 million short reviews from local experts. ',
openAppButtonText: 'Get', // Text to show on button if the user has the app installed
downloadAppButtonText: 'Get', // Text to show on button if the user does not have the app installed
sendLinkText: 'Download Foursquare', // Text to show on desktop button to allow users to text themselves the app
phonePreviewText: '1 800 867 5309', // The default phone placeholder is a US format number, localize the placeholder number with a custom placeholder with this option
showiOS: true, // Should the banner be shown on iOS devices?
showAndroid: true, // Should the banner be shown on Android devices?
showDesktop: true, // Should the banner be shown on desktop devices?
iframe: true, // Show banner in an iframe, recomended to isolate Branch banner CSS
disableHide: false, // Should the user have the ability to hide the banner? (show's X on left side)
forgetHide: 7, // Should we show the banner after the user closes it? Can be set to true, or an integer to show again after X days
position: 'bottom', // Sets the position of the banner, options are: 'top' or 'bottom', and the default is 'top'
mobileSticky: true, // Determines whether the mobile banner will be set `position: fixed;` (sticky) or `position: absolute;`, defaults to false *this property only applies when the banner position is 'top'
desktopSticky: true, // Determines whether the desktop banner will be set `position: fixed;` (sticky) or `position: absolute;`, defaults to true *this property only applies when the banner position is 'top'
// customCSS: '.title { color: #F00; }', // Add your own custom styles to the banner that load last, and are gauranteed to take precedence, even if you leave the banner in an iframe
make_new_link: false, // Should the banner create a new link, even if a link already exists?
rating: 4, // Number of stars (should be your store rating)
reviewCount: 93370, // Number of reviews that generate the rating (should be your store reviews)
theme: 'dark', // Uses Branch's predetermined color scheme for the banner { 'light' || 'dark' }, default: 'light'
// buttonBackgroundColor: css color, // Overrides the theme's default colors
// buttonFontColor: css color,
// buttonBorderColorHover: css color,
// buttonBackgroundColorHover: css color,
// buttonFontColorHover: css color
}, {
channel: channel,
campaign: campaign,
feature: feature,
data:{
'$after_click_url': 'https://www.foursquare.com',
'$deeplink_path': url // Make sure to modify this so that you're grabbing the path needed to deeplink the user accordingly. IE if you wanted to take people from foursquare.com/signup to foursquare://signup then $deeplink_path should be 'signup'
}
});
</script>
</head>
<body></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment