# In-App Notifications

In-app recommendations (such as modals, banners, or pop-ups) are ideal for recommendations that add value to the user's current session but do not require their immediate, time-sensitive action. They appear within the app's interface, allowing for richer content and more complex interactions than push notifications.

<figure><img src="https://2791588365-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fkz3AVy8mukfhOsBy0Lvo%2Fuploads%2F0vroI43DX2vnUVfxYPPV%2FSmart%20Charging%20In-app%20activate%20smart%20charging.png?alt=media&#x26;token=40728a55-96dc-454b-ab1d-c3c960d063ea" alt="Showing a smart phone that has an app opened in which an  in-app notification is visible." width="188"><figcaption><p>In-app notification within  example app</p></figcaption></figure>

## Design and Layout

### Display Full Text

Unlike push notifications, in-app messages have more screen real estate. The recommendation text should always be presented in full without requiring the user to expand it.

### Clear Call-to-Action (CTA)

Action buttons for the recommendation should be clearly displayed and visually distinct. We suggest a consistent layout:

* Primary Action: Positioned prominently (e.g., on the left or as a primary button). This action should be the most desired outcome for the recommendation.
* Secondary Action(s): Positioned less prominently (e.g., on the right, as a text link, or an outline button). These offer alternatives, such as "Later" or "Learn More."

### Contextual Relevance

Ensure the in-app recommendation appears at a logical moment in the user's journey, relevant to their current activity or recent behavior. Avoid interrupting critical tasks.

### Visual Consistency

Maintain a consistent visual style that aligns with your app's overall design language. This helps the recommendation feel like an integrated part of the experience, not an intrusive ad.

### Concise Messaging

While you have more space than a push notification, keep the message as brief and to-the-point as possible. Users scan, they don't read every word.

### Accessibility

Design with accessibility in mind:

* Ensure sufficient contrast between text and background.
* Use appropriately sized fonts for readability.
* Support screen readers by providing proper labels for interactive elements.

***

## Interaction and Dismissal

### Dismissal Mechanism

Users must have a clear and easy way to dismiss the in-app notification. This prevents frustration and allows users to return to their task. Common implementations include:

* Close Button: A standard 'X' icon, typically in the top-right corner.
* Swipe to Dismiss: Mirroring the behavior of an OS-level push notification by allowing the user to swipe it away (if applicable to the UI element type, e.g., a banner).
* Tap Outside (for Modals): For modal pop-ups, consider allowing a tap outside the notification area to dismiss it, provided it's not a critical, blocking message.

### Non-Interruptive Placement

For less critical recommendations, consider using less intrusive placements like banners at the top/bottom of the screen or subtle in-feed cards rather than full-screen modals.

### Testing and Iteration

Continuously test different placements, timings, and messaging for your in-app recommendations to understand what resonates best with your users and drives the desired actions. A/B testing can be invaluable here.