> For the complete documentation index, see [llms.txt](https://docs.buildnatively.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.buildnatively.com/guides/integration/toast-banner.md).
# Toast/Banner
## What are Toast and Banner?
Toast and Banner are two types of native in-app notifications you can use to communicate with your users without interrupting their flow.
A **Toast** is a small, rounded message that appears at the bottom of the screen for a short time before disappearing automatically - useful for brief confirmations like "Copied to clipboard" or "Saved successfully".
A **Banner** is a full-width message that slides up from the bottom of the screen. It dismisses automatically but can also be swiped away - better suited for more prominent alerts or status updates that need a bit more visibility.
## Prerequisites
{% hint style="success" %}
This feature is available in all plans. [See all plans](/getting-started/subscription-plans.md)
{% endhint %}
{% hint style="warning" %}
Toast is not available in the Natively [Preview](/natively-platform/preview.md) app - test it on a full build app. Banner is available in Preview.
{% endhint %}
## Implementation
Choose your integration method below: **Bubble.io Plugin** (No-Code), **JavaScript SDK** (Code), or **AI Agents** (for AI-powered editors like Lovable, Base44, and Replit).
### Initialization
{% tabs %}
{% tab title="Bubble.io Plugin" %}
**Check Plugin**
Before starting, verify if the Natively plugin is already installed in your Bubble project.
1. Open your Bubble editor and navigate to the Plugins tab in the left sidebar.
2. **Check Installed Plugins:** Look through your list of installed plugins for "Natively iOS & Android app builder".
* If it IS installed: Check the version number. If an update is available (e.g., you see a button saying "Update"), click it to ensure you have the latest features and bug fixes.
* If it is NOT installed: Click the + Add plugins button, search for "Natively", and click Install.
{% endtab %}
{% tab title="JavaScript SDK" %}
**Check SDK**
Before writing any logic, ensure the Natively SDK is correctly installed and up-to-date in your codebase.
1. Open your project's main HTML file (or header settings) and look for the Natively script tag inside the `` section.
2. Install/Update: If missing or outdated, add the following code. You can specify the SDK version in the URL (e.g., `@2.26.0`).
```javascript
```
{% hint style="info" %}
To ensure you are using the most up-to-date version, check the [Natively GitHub releases page](https://github.com/buildnatively/js-sdk/releases) for the latest version number.
{% endhint %}
{% endtab %}
{% tab title="AI Agents" %}
**Initialize the SDK**
AI-powered editors like Lovable, Base44, and Replit use the JavaScript SDK to implement Natively features. Before implementing any feature, the Natively SDK must be initialized in your project.
Copy the line below and paste it into your AI agent to check and set up the Natively SDK in your project.
```
Check if the following Natively SDK script is present in the of index.html. If missing or outdated, add it: For reference: https://docs.buildnatively.com/guides/integration/how-to-get-started https://github.com/buildnatively/js-sdk/releases
```
{% endtab %}
{% endtabs %}
### Setup Logic
{% tabs %}
{% tab title="Bubble.io Plugin" %}
#### \[Action] Natively - Show Toast
* **Text** - the message to display in the toast.
* **Type** - `DEFAULT`, `DARK`, `ERROR`, `SUCCESS`, `WARNING`, or `MATRIX`.
#### \[Action] Natively - Show Banner
* **Title** - the main heading of the banner.
* **Description** - supporting text shown below the title.
* **Type** - `SUCCESS`, `ERROR`, or `INFO` .
{% endtab %}
{% tab title="JavaScript SDK" %}
#### Natively Toast
```javascript
// ============================================================================
// NATIVELY TOAST - DOCUMENTATION & EXAMPLES
// ============================================================================
// No initialization required — toast method is available
// directly on the global window.natively object.
// ============================================================================
// ALL AVAILABLE METHODS
// ============================================================================
// window.natively.showAppToast(type, text)
// - Displays a small rounded notification at the bottom of the screen.
// - Disappears automatically after a short time.
// - type: string — "DEFAULT" / "DARK" / "ERROR" / "SUCCESS" / "WARNING" / "MATRIX"
// - text: string — the message to display
// --- Toast. Example. Start ---
const toast_type = "SUCCESS"; // DEFAULT, DARK, ERROR, SUCCESS, WARNING, or MATRIX
const toast_text = "Copied to clipboard";
window.natively.showAppToast(toast_type, toast_text);
// --- Toast. Example. End ---
```
#### Natively Banner
```javascript
// ============================================================================
// NATIVELY BANNER - DOCUMENTATION & EXAMPLES
// ============================================================================
// No initialization required — banner method is available
// directly on the global window.natively object.
// ============================================================================
// ALL AVAILABLE METHODS
// ============================================================================
// window.natively.showAppBanner(type, title, description)
// - Displays a full-width notification that slides up from the bottom.
// - Dismisses automatically or can be swiped away.
// - type: string — "SUCCESS" / "ERROR" / "INFO"
// - title: string — the main heading of the banner
// - description: string — supporting text shown below the title
// --- Banner. Example. Start ---
const banner_type = "SUCCESS"; // SUCCESS, ERROR, or INFO
const banner_title = "Payment confirmed";
const banner_description = "Your order has been placed successfully.";
window.natively.showAppBanner(banner_type, banner_title, banner_description);
// --- Banner. Example. End ---
```
{% endtab %}
{% tab title="AI Agents" %}
AI-powered editors like Lovable, Base44, and Replit use the JavaScript SDK to implement Natively features.
Copy the relevant line below and paste it into your AI agent.
#### Natively Toast
[Your feature description] using the Natively Toast SDK: // window.natively.showAppToast(type, text) — small rounded notification at the bottom of the screen, auto-dismisses. type: "DEFAULT" / "DARK" / "ERROR" / "SUCCESS" / "WARNING". text: string — message to display. For reference: https://docs.buildnatively.com/guides/integration/toast-banner
{% hint style="warning" %}
Replace the placeholder at the beginning with a description of what you want to build - for example: "Show a success toast when the user copies a referral code".
{% endhint %}
#### Natively Banner
[Your feature description] using the Natively Banner SDK: // window.natively.showAppBanner(type, title, description) — full-width notification that slides up from the bottom, auto-dismisses or can be swiped away. type: "SUCCESS" / "ERROR" / "INFO". title: string — heading. description: string — supporting text. For reference: https://docs.buildnatively.com/guides/integration/toast-banner
{% hint style="warning" %}
Replace the placeholder at the beginning with a description of what you want to build - for example: "Show a success banner when the user completes a purchase".
{% endhint %}
{% endtab %}
{% endtabs %}
### How to use
#### Choose between Toast and Banner
Use a **Toast** for brief, low-priority confirmations that don't require the user's attention - like "Copied", "Saved", or "Sent". Use a **Banner** when the message is more important and deserves more visibility - like a payment confirmation, an error that needs acknowledgment, or a status update the user should notice.
#### Match the type to the context
Both Toast and Banner support status-based types. Use `SUCCESS` for completed actions, `ERROR` for failures or problems, and `WARNING` (Toast only) for caution states. Use `INFO` (Banner only) for neutral informational messages. Use `DEFAULT` or `DARK` (Toast only) for generic messages without a specific status.
#### Pair Toast with actions
Toasts work well as immediate feedback after a user action - show a `SUCCESS` toast after a form submit, an `ERROR` toast if something fails, or a `DEFAULT` toast for neutral confirmations like copying text.
#### Use Banner for important status updates
Banners are more prominent and better suited for messages the user should notice, even if they're mid-flow, like a completed background process, a network status change, or a payment result.
## Troubleshooting
Toast not appearing in the Natively Preview app
This is expected - Toast is not supported in [Preview](/natively-platform/preview.md). Build and test on a real device using a full build.
Toast or Banner not appearing at all
Make sure the SDK is fully loaded before calling the method. The most reliable approach is to trigger Toast or Banner from a user interaction - like a button tap - rather than automatically on page load.
Banner not dismissing automatically
The Banner dismisses automatically after a short time. If it appears to stay, verify you are using a valid type (`SUCCESS`, `ERROR`, or `INFO`) - an invalid type may cause unexpected behavior.
[^1]: Replace this placeholder
