Search code examples
androidcsswordpressbranch.iosmartbanner

How to customize smart app banner for android in branch.io?


I used the code provided by branch metrics in wordpress to create a smart banner, but I am unable to change the color, height and position of the banner. I also need an arrow on the banner!! Is there a plugin for this purpose in wordpress!


Solution

  • Alex from Branch.io here: we don't currently have a WordPress plugin for the smart banner, but this is a great idea!

    In the meantime, we have a number of customization options you can use, and you can also apply your own custom CSS styles to the banner.

    EDIT

    To simply adjust the height of the banner is a bit of a hack that you'll have to feel through for yourself, but you can use this code as a starting point (increases height from 76px to 90px as an example):

        <style>
            #branch-banner-iframe {
                height: 90px !important;
            }
        </style>
    
        <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('key_live_xxxxxxxxxxxxxxxxxxxxx');
            branch.banner({
                icon: 'http://icons.iconarchive.com/icons/wineass/ios7-redesign/512/Appstore-icon.png',
                title: 'Branch Demo App',
                description: 'The Branch demo app!',
                    customCSS: '.content { height: 90px !important; } .right { height: 77px !important; padding-top: 29px !important; } .left { height: 77px !important; } #branch-banner-close { top: 21px; } #branch-banner .icon img { margin-top: 7px; }'
            }, {});
        </script>