Instructions for Using the OTP Input Element
This OTP Input Element simplifies OTP entry with autofill support using the WebOTP API.


1. Place the Element  
  Add the OTP Input Element to the desired page in your application.

2. Set OTP Length
  Configure the `otp_length` property to match the number of OTP digits (e.g., 4, 6). Defaults to 6 if not set.

3. Send OTP via SMS
  - You must set up an SMS service(e.g., Twilio, AWS SNS) to send OTPs.  
  - Format your SMS as:  
   ```
  Your verification code for example.com is: 123456
    ``
    Replace `example.com` with your app's domain.

4. WebOTP Autofill
  - The WebOTP API automatically fills the OTP fields when a compatible SMS arrives.
  - Ensure your app is on HTTPS and the domain matches the SMS.

5. Manual Entry
  Users can type the OTP manually. Input fields support seamless navigation:

6. Troubleshooting  
  - Verify SMS format and domain for WebOTP autofill.
  - Ensure the `otp_length` matches the OTP sent.

This element handles OTP input and autofill only. Setting up SMS delivery is your responsibility.

Editor link : https://bubble.io/page?id=chakor-plugin-demo-6&tab=Design&name=otp_input&type=page