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

Features

• Redirect to app stores
• Redirect to application detail pages with Deep Links
• Setting Deep Links according to the page
• Managing popup based on the page
• Link redirection for Android, iOS, and Huawei
• Managing popup for Android, iOS, and Huawei

Min React Version

React: 17.0.1

Packages Used

prop-types

Keywords

ReactJS, React, App Selector, Deep Link, Mobile, Browser Selector, User Prompt, Enhanced Experience

Feedback

If you have any feedback, please contact us at [email protected].

Authors

• @azizsenturk

Thanks

• @berkayburakm