---
title: Request recognition frame
description: "\"Shows how to request the recognition frame that the PingOne Recognize Web SDK returns after successful authentication or enrollment.\""
component: recognize
page_id: recognize:web-sdk:web-sdk-guide-request-recognition-frame
canonical_url: https://docs.pingidentity.com/recognize/web-sdk/web-sdk-guide-request-recognition-frame.html
llms_txt: https://docs.pingidentity.com/recognize/llms.txt
docs_for_agents: https://developer.pingidentity.com/build-with-ai/docs-for-agents.md
revdate: September 17, 2026
section_ids:
  headless-integration: Headless integration
  web-component-integration: Web component integration
---

# Request recognition frame

The PingOne Recognize Web SDK can return the recognition frame when PingOne Recognize authentication or enrollment actions succeed.

The recognition frame is a JPEG image at 80% quality.

## Headless integration

To request the recognition frame without using a user interface:

1. Start with one of the baseline integrations:

   * For authentication, use [Headless authentication integration](web-sdk-guide-authentication.html#headless-integration).

   * For enrollment, use [Headless enrollment integration](web-sdk-guide-enrollment.html#headless-integration).

2. Include the `includeRecognitionFrameHash: true` property in the `jwt` options when calling `createKeylessAuth` or `createKeylessEnroll`:

   ```javascript
   const auth = createKeylessAuth({
     ...,
     jwt: {
       includeRecognitionFrameHash: true
     }
   })
   ```

3. Add an event listener to the `success` event of your authentication or enrollment symbol:

   ```javascript
   addKeylessEventListener(auth, 'success', (event) => {
     // will log the base64 recognition frame
     console.log(event.recognitionFrame)

     // will log the JWT, the JWT includes the recognition frame hash
     console.log(event.jwt)
   })
   ```

## Web component integration

To request the recognition frame using web components:

1. Start with one of the baseline integrations:

   * For authentication, use a [Web component authentication integration](web-sdk-guide-authentication.html#component-integration).

   * For enrollment, use a [Web component enrollment integration](web-sdk-guide-enrollment.html#component-integration).

2. Add a `request-recognition-frame` attribute to your web component:

   ```javascript
   <kl-auth-or-enroll
     ...
     request-recognition-frame
   ></kl-auth-or-enroll>
   ```

3. Add an event listener to the `success` event of your web component:

   ```javascript
   auth_or_enroll.addEventListener('success', (event) => {
     // will log the base64 recognition frame
     console.log(event.detail.recognitionFrame)

     // will log the JWT, the JWT includes the recognition frame hash
     console.log(event.detail.jwt)
   })
   ```