deep-link deep-linking mobile-first react reactjs

App Selector - Deep Link Popup

When entering a website from a mobile device, it is a React component that offers the user two options through a popup.

Options:

Continue in the Browser: The user continues using the website in the mobile browser.
Open the App: It opens the relevant page within the mobile app using deep linking.

Example Usage

Show Demo in CodeSandBox

Screenshots

Installation

Install the package in your project directory

  npm install @wellbees/app-selector

  # or

  yarn add @wellbees/app-selector

Usage/Examples

Provider Usage

import React from 'react'
import { AppSelectorProvider } from '@wellbees/app-selector'
import selectorConfig from './selectorConfig' // Below is an example

const App = () => {
  return (
    <AppSelectorProvider config={selectorConfig}>

      App Layout

    </AppSelectorProvider>
  )
}

export default App

Deep Link Setting for Single Page

import React, { useEffect } from 'react'
import { useDeepLinkSettings } from '@wellbees/app-selector'

const Page = () => {
  const { setDeepLink } = useDeepLinkSettings();

  useEffect(() => {
    setDeepLink({
      visible: true,
      commonUrl: 'appName://.....',
      androidUrl: 'appName://.....',
      iosUrl: 'appName://.....',
      huaweiUrl: 'appName://.....'
    });
  }, [setDeepLink]);

  return (
    <div>

      Page Layout

    </div>
  )
}

export default Page

Example App Selector Config Value

const selectorConfig = {
	appStoreUrl: 'https://apps.apple.com/app/.....',
	playStoreUrl: 'https://play.google.com/store/apps/details?id=.....',
	appGalleryUrl: 'https://appgallery.huawei.com/app/.....',
	appLogo: '/assets/images/logo.svg',
	appName: 'App Name',
	popupTitle: 'See in app...',
	openButtonText: 'Open',
	openButtonColor: '#fec435',
	continueButtonText: 'Continue',
	continueButtonColor: '#dfdfdf',
	isDeepLinkEnabled: true,
	isDeepLinkEnabledForAndroid: true,
	isDeepLinkEnabledForIOS: true,
	isDeepLinkEnabledForHuawei: true,
	continueBrowserCookieHours: 1,
	popupStartTime: 1500
}

Props

Config Settings

Name	Type	Default	Description
appStoreUrl	String		Apple Store Link of the Application
playStoreUrl	String		Play Store Link of the Application
appGalleryUrl	String		App Gallery Link of the Application
appLogo	String		Application Logo
appName	String		Application Name
popupTitle	String	`See in app...`	Text in Popup Title
openButtonText	String	`Open`	Text on the open button
continueButtonText	String	`Continue`	Text on the continue button
openButtonColor	String	`#fec435`	Background color of the open button
continueButtonColor	String	`#dfdfdf`	Background color of the continue button
isDeepLinkEnabled	Boolean	`true`	Popup visibility setting
isDeepLinkEnabledForAndroid	Boolean	`true`	Popup visibility setting for Android
isDeepLinkEnabledForIOS	Boolean	`true`	Popup visibility setting for IOS
isDeepLinkEnabledForHuawei	Boolean	`true`	Popup visibility setting for Huawei
continueBrowserCookieHours	Number	`1`	Setting how many hours to hide
popupStartTime	Number	`1500`	Time until the pop-up window start

DeepLink Settings for Single Page

Name	Type	Default	Description
visible	Boolean	`true`	Popup visibility setting
commonUrl	String		Deep linking for all platforms
androidUrl	String		Deep linking for Android Specific
iosUrl	String		Deep linking for IOS Specific
huaweiUrl	String		Deep linking for Huawei Specific