How to change the position of branch smart banner?

To set up the banner, I put the code below into the head:

<script type="text/javascript">
(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');

branch.banner({
    icon: 'http://icons.iconarchive.com/icons/wineass/ios7-redesign/512/Appstore-icon.png',
    title: 'Branch Demo App',
    description: 'The Branch demo app!',
    position: 'top'
}, {});
</script>

So it would display the banner on the top of each page. But I want to some pages display this banner on the bottom. I try to call banner in the specific page to overwrite it:

branch.banner({
   position: 'bottom'
}, {});

But it doesn't work. So how to do it? Thanks!

Solution

Alex with Branch.io here:

If I understand correctly, you are putting the main Smart Banner snippet in the <head> section for your entire site, and then also adding calling it a second time with position: 'bottom' on certain pages. Unfortunately this isn't going to work as you want, because the same function is getting triggered twice and the first one (in the <head> section) takes precedence.

The ideal solution would be to set position: 'bottom' or position: 'top' dynamically in the <head> section for each page. The method for actually implementing that would depend on how your site is set up.

Alternatively, you could also call the Smart Banner individually for each page (for example, right before </body>). That's probably manageable only if only you have a fairly small number of pages.