🥑Haptic Feedback

Add tactile vibration responses to interactions in your app using native haptic feedback.

What is Haptic Feedback?

Haptic Feedback lets your app communicate with users through touch - using the device's vibration motor to provide subtle physical responses to interactions. This makes your app feel more responsive and polished, reinforcing actions such as button taps, form submissions, errors, and custom sequences without relying solely on visual or audio cues.

Natively supports three types of haptic feedback: Impact for simple tactile responses, Notification for status-based feedback (success, error, warning), and Pattern for custom vibration sequences.

Prerequisites

This feature is available in all plans. See all plans

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 - Haptic Impact

Type - LIGHT, MEDIUM, HEAVY, RIGID, or SOFT .

[Action] Natively - Haptic Notification

Type - SUCCESS, ERROR, or WARNING .

[Action] Natively - Haptic Pattern

Pattern — a string of symbols representing a custom vibration sequence:
- O - heavy impact;
- o - medium impact;
- . - light impact;
- X - rigid impact;
- x - soft impact;
- - - wait 0.1 second;
Delay — time between each element in the pattern (must be >= 0 and < 1).

// ============================================================================
// NATIVELY HAPTIC FEEDBACK - DOCUMENTATION & EXAMPLES
// ============================================================================

// No initialization required - haptic methods are available directly
// on the global window.natively object.

// ============================================================================
// ALL AVAILABLE METHODS
// ============================================================================
// window.natively.hapticImpact(type)
//   - Triggers a single haptic impact.
//   - type: string - "LIGHT" / "MEDIUM" / "HEAVY" / "RIGID" / "SOFT"
//
// window.natively.hapticNotification(type)
//   - Triggers a notification-style haptic feedback.
//   - type: string - "SUCCESS" / "ERROR" / "WARNING"
//
// window.natively.hapticPattern(pattern, delay)
//   - Triggers a custom haptic vibration sequence.
//   - pattern: string - sequence of symbols:
//       O = heavy impact
//       o = medium impact
//       . = light impact
//       X = rigid impact
//       x = soft impact
//       - = wait 0.1 second
//   - delay: number - time between each element, must be >= 0 and < 1

// --- Haptic Feedback. Impact Example. Start ---

window.natively.hapticImpact("MEDIUM");

// --- Haptic Feedback. Impact Example. End ---


// --- Haptic Feedback. Notification Example. Start ---

window.natively.hapticNotification("SUCCESS");

// --- Haptic Feedback. Notification Example. End ---


// --- Haptic Feedback. Pattern Example. Start ---

const pattern = "..oO-Oo..";
const delay = 0.1; // time between each element, must be >= 0 and < 1
window.natively.hapticPattern(pattern, delay);

// --- Haptic Feedback. Pattern Example. End ---

AI-powered editors like Lovable, Base44, and Replit use the JavaScript SDK to implement Natively features.

Copy the line below and paste it into your AI agent.

[Your feature description] using the Natively Haptic Feedback SDK: // window.natively.hapticImpact(type) — single haptic impact. type: "LIGHT" / "MEDIUM" / "HEAVY" / "RIGID" / "SOFT". // window.natively.hapticNotification(type) — notification haptic. type: "SUCCESS" / "ERROR" / "WARNING". // window.natively.hapticPattern(pattern, delay) — custom sequence. pattern symbols: O=heavy, o=medium, .=light, X=rigid, x=soft, -=wait 0.1s. delay: number >= 0 and < 1 (time between each element). For reference: https://docs.buildnatively.com/guides/integration/haptic-feedback

Replace the placeholder at the beginning with a description of what you want to build - for example: "Trigger a success haptic feedback when the user completes a form submission".

How to use

Choose the right haptic type

Use Impact for simple physical responses to interactions like button taps, swipes, or toggles. Use Notification when you want to communicate a status - SUCCESS for completed actions, ERROR for failures, and WARNING for caution states. Use Pattern when you need a custom sequence, like a celebratory pulse or a repeating alert rhythm.

Match intensity to the interaction

Lighter impacts (LIGHT, SOFT) work well for subtle UI interactions like toggling a switch or selecting an item. Heavier impacts (HEAVY, RIGID) are better reserved for significant actions like confirming a payment or completing an important step.

Use haptics sparingly

Overusing haptic feedback makes it lose its meaning and can feel intrusive. Reserve it for meaningful moments - confirmations, errors, or interactions where physical feedback genuinely adds value.

Building patterns

The pattern string is read left to right, with each symbol triggering its corresponding impact and - adding a 0.1 second pause. For example ..oO-Oo.. creates a rising and falling sequence. Keep patterns short - long sequences can feel overwhelming.

Delay between pattern elements

The delay value controls the time between each element in the pattern. Must be >= 0 and < 1. A value of 0 plays all elements as fast as possible, while 0.5 adds a noticeable pause between each step.

Troubleshooting

Haptic feedback is not working

Haptic feedback requires a physical device - it will not work in simulators or emulators. Test on a real iOS or Android device.

Haptic feedback not working on a real device

Some devices or user settings may disable the haptic feedback system-wide. Check that the user hasn't disabled vibration or haptic feedback in their device settings.

Haptic Pattern not triggering

Verify the pattern string only contains valid symbols (O, o, ., X, x, -). Any unrecognized character may cause the pattern to fail silently.

Haptic Pattern delay not working as expected

The delay value must be >= 0 and < 1. A value of 1 or higher will not work. If your pattern feels too fast or too slow, adjust the delay value within the valid range.

No haptic feedback on Android

Some older or budget Android devices may have limited or no haptic motor support. This is a hardware limitation and cannot be resolved in the app.

PreviousGeolocation NextHealthKit

Last updated 1 month ago