Haptic Feedback

Add native tactile feedback to enhance user interactions in your mobile app.

Overview

Haptic feedback provides physical vibration responses when users interact with your app, creating a more engaging and intuitive experience. This feature uses the device's built-in haptic engine to deliver different types of tactile feedback for various UI interactions.

Prerequisites

Before implementing haptic feedback, ensure you have:

  1. Installed the Despia plugin from the WeWeb Marketplace

  2. Verified installation by checking AssetsLibrary → look for the book symbol showing "Despia Provider"

Implementation Steps

Step 1: Add the Despia Plugin Component

  1. Click the Add button in your WeWeb editor

  2. Navigate to the Assets panel

  3. Find Despia Provider and Despia native components

  4. Drag the Despia plugin element to the top of your page

    • Best practice: Place it at the top for easy visibility

    • Works on both new and existing pages

Step 2: Add a Trigger Element

  1. Add any interactive element (button, link, etc.) that should trigger haptic feedback

  2. Select the element you want to add haptic feedback to

Step 3: Configure the Haptic Workflow

  1. With your element selected, go to Workflows

  2. Add a new workflow with trigger "On click"

  3. Add action: Execute component action

  4. Configure the action:

    • Component: Select "Despia plugin"

    • Action: Choose "Haptic trigger Haptic feedback, no callback"

    • Mode: Select your desired feedback type (see options below)

Haptic Feedback Modes

Choose the appropriate feedback type for your use case:

Mode

Use Case

Description

heavy

Default button taps

Strong, pronounced feedback for primary actions

light

Subtle interactions

Gentle feedback for secondary actions or hover states

success

Successful operations

Distinctive pattern indicating completion or success

warning

Caution alerts

Pattern that signals attention needed

error

Failed operations

Pattern indicating an error or invalid action

Dynamic Mode Selection

You can make the haptic mode dynamic by:

  • Binding it to a variable

  • Using API response data

  • Setting conditions based on user actions or app state

Simply click the binding icon next to the mode selector and choose your data source.

Publishing Changes

  1. Click Publish in WeWeb to deploy your changes

  2. Changes are instantly available via over-the-air updates

  3. No app rebuild or resubmission required

  4. Users receive updates immediately without updating the app

Testing

  • Haptic feedback only works on physical devices (not in browser preview)

  • Test on both iOS and Android devices as haptic patterns may vary

  • Ensure device haptic settings are enabled in system preferences

Best Practices

  • Use consistently: Apply the same haptic pattern for similar actions throughout your app

  • Don't overuse: Reserve haptic feedback for meaningful interactions

  • Match intensity to importance: Use heavy feedback for primary actions, light for secondary

  • Combine with visual feedback: Haptic should complement, not replace, visual indicators

  • Consider accessibility: Some users may have haptics disabled; ensure your app works without it

Common Use Cases

  • Button taps: Confirm user interaction with primary buttons

  • Toggle switches: Provide feedback when changing settings

  • Form validation: Alert users to errors or successful submissions

  • Navigation: Confirm menu selections or tab changes

  • Gestures: Acknowledge swipe actions or pull-to-refresh

  • Game interactions: Enhance gaming experience with tactical feedback

Platform Considerations

  • iOS: Uses the Taptic Engine for precise haptic patterns

  • Android: Uses the Vibration API with pattern approximations

  • Older devices may have limited or no haptic capabilities

  • Feedback intensity may vary between device models

Need Help?

For additional support or questions, please contact our support team at support@despia.com

Updated on