Add Haptic Feedback To Your Replit App

Haptic feedback, those subtle vibrations you feel when tapping buttons on your phone, makes your app feel responsive and professional. This guide shows you how to add haptics to your Replit app using simple prompts. No coding required.

What you'll learn:

• What haptic feedback is and why it matters
• How to add haptics using the Replit Agent
• How to test on real devices

Before you start:

• Enable the Haptic Feedback plugin in Median App Studio
• Set up app usage detection
• Install the Median JavaScript Bridge in your Replit app
• Have Replit Agent ready to go

Haven't installed the JavaScript Bridge yet? Follow our Adding Native Features to your app first. The bridge connects your web app to native phone features like haptics.

---

What is haptic feedback?

It's the gentle vibration you feel when you interact with your phone. You typically experience haptics when:

• Typing on your keyboard
• Pulling down to refresh
• Confirming an action
• Getting an error

Why add it to your app?

• It confirms that actions worked.
• It helps users who rely on touch feedback.
• Different patterns communicate different things, like success, warnings, or errors.

---

How haptics work with Median

When you convert your Replit app to mobile using Median.co, the JavaScript Bridge gives you access to the phone's vibration motor.

Here's the flow:

• Your Replit app is the web application you built
• Median converts your app into a full-feature native app
• The JavaScript Bridge lets your app trigger vibrations

You tell Replit Agent where you want haptics; It handles the code.

---

Step 1: Choose your haptic type

Median.co offers several types. Each one feels different and communicates something specific.

Quick decision guide

• Button press? - Use impactLight
• Success? - Use notificationSuccess
• Error? - Use notificationError
• Deleting something? - Use impactMedium or impactHeavy

---

Step 2: Add haptics with a prompt

Here are ready-to-use prompts for common scenarios.

Example: Haptics for task creation

Let's say you want haptic feedback when users create a task. Here's how.

Prompt Replit Agent with this:

When creating a new task, add haptic feedback using the Median JavaScript Bridge. Only trigger this for mobile app users , reference the detecting app usage page in the Median documentation.

Use the notificationSuccess haptic style to give positive feedback when the task is successfully created.

What happens next:

Replit Agent implements three things:

1. Detection: Checks if the user is in the mobile app (not the web version)
2. Haptic integration: Adds the trigger code
3. Proper timing: Fires the haptic when the task is created

Replit Agent Confirmation

The haptic feedback integration is now complete, and the app is running without errors. Here's what was finalized:

1. Updated useMedian hook: Added triggerHapticFeedback to the return statement so it can be used by other components.
2. Updated AddEditTodoDialog:
   • Imported the useMedian hook
   • Destructured triggerHapticFeedback from the hook
   • The haptic feedback triggers with "notificationSuccess" style only when creating new tasks (not editing)

The haptic feedback will automatically:

• Only activate when running in the native Median app (checked via state.isNativeApp)
• Do nothing when running in a regular web browser
• Provide tactile feedback when users successfully create new tasks on their mobile devices

What's happening:

It checks if you're in the mobile app (isNativeApp). It waits for the bridge to load (isReady). It triggers haptics, nd it handles errors so nothing breaks.

---

Step 3: More examples you can use

Here are more prompts for common use cases. Just customize them to your project and paste them into Replit Agent.

Add haptics to a button

Add haptic feedback to the [BUTTON_NAME] button. When users tap it, trigger an impactLight haptic using Median's JavaScript Bridge.

This should only work for mobile app users. Use Median.isNativeApp() to detect if they're in the native app.

Customize it:

• Replace [BUTTON_NAME] with your button (like "Submit" or "Save")
• Change impactLight to impactMedium or impactHeavy for important buttons

Add haptics to form submission

Add haptic feedback to the [FORM_NAME] form submission:

1. If the form submits successfully, trigger a notificationSuccess haptic
2. If there are validation errors, trigger a notificationError haptic

Use Median's JavaScript Bridge with Median.haptics.trigger({ style }).
Only trigger haptics for mobile app users using Median.isNativeApp().

Customize it:

• Replace [FORM_NAME] with your form name (like "login form" or "checkout form")

Add haptics to swipe actions

Add haptic feedback when users swipe to delete an item in the [LIST_NAME]. Trigger an impactMedium haptic when the swipe action starts.

Use Median's JavaScript Bridge and only trigger for mobile app users.

Customize it:

• Replace [LIST_NAME] with your list (like "task list" or "inbox")
• Consider impactHeavy for destructive actions, such as deleting a task, email, or an item from a list

Add haptics to toggle switches

Add haptic feedback to all toggle switches. When users toggle a switch on or off, trigger an impactLight haptic using Median's JavaScript Bridge.

Only trigger haptics for mobile app users.

---

Step 4: Test on a real device

Haptics only work on physical devices, not in simulators or web browsers.

Here's the testing process:

1. Prompt Replit Agent to add haptics (using the examples above).
2. Deploy your changes in Replit, so your live URL is updated.
3. Customize your mobile app in the Median App Studio.
4. Install the app on your phone (iOS or Android).
5. Test the features you enhanced:
   • Make sure your phone's vibration is on
   • Feel the difference between haptic types
   • Verify haptics only trigger in the mobile app

Not working? Check these:

• Are haptics enabled in the Median App Studio's plugin settings?
• Is your phone's vibration turned on?
• Was the JavaScript Bridge installed correctly?
• Any errors in the console?
• Is the detection code (isNativeApp) working?

Feel wrong? Try different types:

Change the haptic feedback for [BUTTON_NAME] from impactLight to impactMedium