🥑Toast/Banner

Display native in-app notifications to communicate status, feedback, or alerts to your users.

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

This feature is available in all plans. See all plans

Toast is not available in the Natively Preview app - test it on a full build app. Banner is available in Preview.

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

Check Plugin

Before starting, verify if the Natively plugin is already installed in your Bubble project.

Open your Bubble editor and navigate to the Plugins tab in the left sidebar.
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.

Check SDK

Before writing any logic, ensure the Natively SDK is correctly installed and up-to-date in your codebase.

Open your project's main HTML file (or header settings) and look for the Natively script tag inside the <head> section.
Install/Update: If missing or outdated, add the following code. You can specify the SDK version in the URL (e.g., @2.26.0).

<head>
  <script async onload="nativelyOnLoad()" src="https://cdn.jsdelivr.net/npm/natively@2.26.0/natively-frontend.min.js"></script>
</head>

To ensure you are using the most up-to-date version, check the Natively GitHub releases page for the latest version number.

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 <head> of index.html. If missing or outdated, add it: <script async onload="nativelyOnLoad()" src="https://cdn.jsdelivr.net/npm/natively@2.26.0/natively-frontend.min.js"></script><script>function nativelyOnLoad() { window.natively.setDebug(true); console.log("✅ Natively SDK loaded successfully."); }</script> For reference: https://docs.buildnatively.com/guides/integration/how-to-get-started https://github.com/buildnatively/js-sdk/releases

Setup Logic

[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 .

Natively Toast

// ============================================================================
// 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

// ============================================================================
// 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 ---

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

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".

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

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".

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. 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.

PreviousSMS/Email NextTroubleshooting

Last updated 1 month ago