Smart App Banner

Context

The goal of the smart banner app is to encourage web app users that are using a web app through a mobile device to continue using a native mobile app instead.

Design preview

Acceptance Criteria

• Smart banner should only be triggered on a web app while it’s used on a mobile device
• Smart banner only should be triggered on a web app in case a client brand has enabled a mobile channel beside the web app
• Smart banner can be triggered on any page of the web app
• Smart banner should be shown above all the content that is currently shown on the page where the smart banner is triggered
• Smart banner modal is shown as soon as the customer opens the web app on the mobile device
• Smart banner is formed from:
• Layer overlay
• Brand logo image (Pull the same asset used in a navigation header)
• Title
• Description
• Primary button
• Secondary button 
• Smart banner modal can be dismissed only by pressing “Not now“ button. By tapping outside of the modal user shouldn’t be able to dismiss a smart banner modal. Dismissing the smart banner should keep the user on the same page where the smart banner has appeared.
• “Not now” decision will be saved for 24 hours so the smart banner will not be able to appear again for that user within a specified period of time.
• Pressing “Continue in mobile app“ should trigger the flow based on if the user has installed the native mobile app already or not.
• If the app is not installed, the user should be brought to the app store or play store based on the OS of the mobile device.
• If the app is already installed on a user device, the user should be brought inside of the native mobile app in a place that is specified by the deep link configured through Firebase.
• If the user for some reason decides to go back to the web app after pressing “Continue in mobile app“ the smart banner should stay visible until is dismissed.

Branding file customizations

All styles like colors, text, and corner radius should be connected to existing branding file properties.