> 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/haptic-feedback.md).
# 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
{% hint style="success" %}
This feature is available in all plans. [See all plans](/getting-started/subscription-plans.md)
{% 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 - 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`).
{% endtab %}
{% tab title="JavaScript SDK" %}
```javascript
// ============================================================================
// 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 ---
```
{% endtab %}
{% tab title="AI Agents" %}
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
{% hint style="warning" %}
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".
{% endhint %}
{% endtab %}
{% endtabs %}
### 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.
[^1]: Replace this placeholder
