Human Verification (Bot Protection)

Human Verification (also called "Human Check") adds bot detection to forms across your Shopify store. It requires visitors to complete a quick camera-based liveness check before submitting protected forms, preventing automated spam submissions.

This is the L1 (Level 1) verification tier in VerifyHuman's assurance level system.

How It Works

1. When a protected form loads on your storefront, a "Verify I'm Human" button is injected above the form's submit button.
2. The form's submit button is blocked until the visitor completes verification.
3. When the visitor clicks "Verify I'm Human," a modal opens requesting camera access.
4. The visitor takes a selfie, which is sent to the VerifyHuman API for liveness analysis.
5. If the check passes, a hidden token is added to the form and submission is allowed. A "Verified Human" badge (optional) replaces the button.
6. If the check fails, the visitor can retry.

Supported Form Types

Human Verification can protect four categories of forms. Each can be enabled independently in the Shopify Theme Editor.

The default selectors cover Shopify's built-in forms and popular review apps (Shopify Product Reviews, Stamped.io, Judge.me). If your theme uses custom form markup, you can override the selectors (see Custom Form Selectors below).

Enabling Human Verification

In the Shopify Theme Editor

1. Go to Online Store > Themes > Customize in your Shopify admin.
2. Open App embeds (the puzzle-piece icon in the left sidebar).
3. Find VerifyHuman - Human Check and toggle it on.
4. Under Protected Forms, enable the form types you want to protect:
   • Protect Signup/Registration Forms — guards customer registration
   • Protect Review Forms — guards product review submissions
   • Protect Contact Forms — guards contact page forms
   • Protect All Forms (Site-wide) — loads verification on every page (use custom selectors to target specific forms)
5. Click Save.

In the VerifyHuman Dashboard (Advanced Mode)

If using Advanced Mode in the dashboard:

1. Go to the Settings page in the VerifyHuman dashboard.
2. Select the Human Check tab.
3. Toggle Enable Human Verification on.
4. Enable the specific form types you want to protect (Signup, Reviews, Contact).
5. Click Save Changes.

Display Options

Verified Badge

When Show Verified Badge is enabled (default: on), a green "Verified Human" confirmation message replaces the verify button after successful verification. When disabled, it shows "Verification Complete" instead.

Configure this in the Theme Editor under VerifyHuman - Human Check > Display Options > Show Verified Badge.

Custom Form Selectors

If your theme uses non-standard form IDs or classes, you can override the default CSS selectors for each form type. This is useful when:

• Your theme uses a custom registration form template
• You use a third-party review app not covered by the defaults
• You have a custom contact form with a unique ID or class

Configuring Custom Selectors

In the Shopify Theme Editor, under VerifyHuman - Human Check > Advanced: Custom Form Selectors:

• Signup Form Selector — CSS selectors for signup forms (comma-separated)
• Reviews Form Selector — CSS selectors for review forms (comma-separated)
• Contact Form Selector — CSS selectors for contact forms (comma-separated)

Example: If your theme uses #my-custom-signup for the registration form:

#my-custom-signup

Example: Multiple selectors for review forms across different apps:

.yotpo-form, #loox-review-form, .rivyo-form

If a custom selector field is left empty, the built-in defaults are used automatically.

Debug Mode

Enable Debug Mode in the Theme Editor to output detailed console logs for troubleshooting form detection. When enabled, the widget logs:

• Configuration values at initialization
• Form selectors being used
• Number of forms found per category
• Camera initialization status
• Verification request/response details

To enable: Theme Editor > App embeds > VerifyHuman - Human Check > Troubleshooting > Enable Debug Mode.

Open your browser's Developer Tools console to view the logs (messages are prefixed with [VerifyHuman:Human]).

Dynamic Form Detection

The Human Check widget automatically detects forms that are added to the page after initial load. This handles:

• Single Page Application (SPA) navigation
• AJAX-loaded content (e.g., quick-view modals, dynamically loaded review forms)
• Lazy-loaded form sections

The widget uses a MutationObserver to watch for new <form> elements and also re-scans the page at 1-second and 3-second intervals after load to catch late-loading content.

Verification Flow Details

API Endpoint

The widget sends verification requests to POST /api/verify-human with:

• image_data — Base64-encoded JPEG selfie captured from the camera
• context — Which form type triggered the verification (signup, reviews, or contact)
• X-Shop-Domain header — Your Shopify store domain

Response Handling

• PASS — A verification token is returned. The token is injected as a hidden verifyhuman_token field in the form. The form submit is unblocked.
• FAIL — The visitor sees "Verification failed. Please try again." and can retry.

Form Submission Blocking

Until verification passes:

• The form's submit event is intercepted and prevented.
• Clicking submit without verifying triggers a shake animation on the verify button to draw attention.

Integration with Verification Levels

In Simple Mode, Human Check corresponds to L1 (Level 1) verification. If your store's minimum required level is set to L1, only the Human Check is needed for restricted products.

In Advanced Mode, Human Check is controlled independently via the humanEnabled setting and applies to form protection regardless of product restrictions.

See Tags and Triggers for how verification levels interact with product tags and metafields.

Programmatic Access

The widget exposes two global functions for advanced integrations:

• window.VerifyHumanWidget(formElement, context) — Manually attach verification to a specific form element
• window.VerifyHumanScanForms() — Trigger a manual re-scan for unprotected forms

Example:

// Protect a dynamically created form
const myForm = document.getElementById('my-dynamic-form');
new window.VerifyHumanWidget(myForm, 'contact');

Requirements

• The VerifyHuman app must be installed and the verifyhuman.app_url shop metafield must be set (this happens automatically during installation).
• A valid VerifyHuman API key must be configured in the dashboard Settings page.
• The visitor's browser must support navigator.mediaDevices.getUserMedia (camera access). If camera access is denied, the widget displays "Camera access required for verification."