BranchMetrics / web-branch-deep-linking-attribution

The Branch Web SDK for deep linking and attribution. Once initialized, the Branch Web SDK allows you to create and share links with a banner (web only), over SMS, or your own methods by generating deep links. It also offers event tracking, access to referrals, and management of credits.
https://help.branch.io/developers-hub/docs/web-sdk-overview
MIT License
288 stars 101 forks source link

Banner did't showing #341

Closed 6graNik closed 8 years ago

6graNik commented 8 years ago

Hi guys, trying to integrate your App in my React-redux web app and having couple issues.

This is how I initialize it in one of my ReactComponents

Bsically I use option file from Example and enable forgetHide and disableHide;

const branch = __SERVER__ ? null : require('branch-sdk');

  const config = {
    icon: 'http://icons.iconarchive.com/icons/wineass/ios7-redesign/512/Appstore-icon.png',
    title: 'Branch Demo App',
    description: 'The Branch demo app!',
    rating: 5,                              // Displays a star rating out of 5. Supports half stars through increments of .5
    reviewCount: 1500,                      // Amount of reviews your app has received next to the star rating
    openAppButtonText: 'Open',              // Text to show on button if the user has the app installed
    downloadAppButtonText: 'Download',      // Text to show on button if the user does not have the app installed
    sendLinkText: 'Send Link',              // Text to show on desktop button to allow users to text themselves the app
    phonePreviewText: '+44 9999-9999',      // 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 (both iPhones and iPads)?
    showiPad: true,                         // Should the banner be shown on iPads (this overrides showiOS)?
    showAndroid: true,                      // Should the banner be shown on Android devices?
    showBlackberry: true,                   // Should the banner be shown on Blackberry devices?
    showWindowsPhone: true,                 // Should the banner be shown on Windows Phone devices?
    showKindle: true,                       // Should the banner be shown on Kindle 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: true,                     // Should the user have the ability to hide the banner? (show's X on left side)
    forgetHide: true,                      // Should we show the banner after the user closes it? Can be set to true, or an integer to show again after X days
    respectDNT: false,                      // Should we skip showing the banner when a user's settings show 'Do Not Track'?
    mobileSticky: false,                    // 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'
    make_new_link: false,                   // Should the banner create a new link, even if a link already exists?
    open_app: false,                        // Should the banner try to open the app passively (without the user actively clicking) on load?

  };

  const {
    children,
    header,
    footer,
    className,
    childrenClassName
  } = props;

  if (!!branch) {
    branch.init('key_live_nleUOMtyWN1lyjE5Bi783fkbztp1og8h', (err, data) => console.log('>>>>>>>>>> err, data', err, data));
    branch.banner(config);
    console.log('>>>>>>>>>>>>>>>>>>>>>>>> branch', global.branch);
  }

After page rendering I see how <iframe />got insert in my page

But it has negative css top option and clearly in hide state.

And also in Network, server respond

image

aziz commented 8 years ago

I've got the exact same issue. what's going on?

jsaleigh commented 8 years ago

Hey 6graNik, do you have a public link for the page so I can have the team take a look?

The 'branch_view_enabled' variable should not be related to the Branch Banner, but React might.

jsaleigh commented 8 years ago

@aziz Same thing, if you have a public web link you can share, I'll get some eyes on it.

zeeshabnc commented 8 years ago

Hey @6graNik @aziz Are you still having this issue? If so, would you be able to share a public web link so we can take a closer look.

aziz commented 8 years ago

We fixed our issue, it was because of invalid configuration. I don't remember exactly what but it was not an issue form your side. Thanks for the follow up.