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:
-
Installed the Despia plugin from the WeWeb Marketplace
-
Verified installation by checking Assets → Library → look for the book symbol showing "Despia Provider"
Implementation Steps
Step 1: Add the Despia Plugin Component
-
Click the Add button in your WeWeb editor
-
Navigate to the Assets panel
-
Find Despia Provider and Despia native components
-
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
-
Add any interactive element (button, link, etc.) that should trigger haptic feedback
-
Select the element you want to add haptic feedback to
Step 3: Configure the Haptic Workflow
-
With your element selected, go to Workflows
-
Add a new workflow with trigger "On click"
-
Add action: Execute component action
-
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
-
Click Publish in WeWeb to deploy your changes
-
Changes are instantly available via over-the-air updates
-
No app rebuild or resubmission required
-
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
For additional support or questions, please contact our support team at support@despia.com