# Embedding Curata

To facilitate a more efficient flow and user experience for the end-customer, the Curata system can be embedded into your existing solution using an iframe.

#### Embedding wireframe example:

<figure><img src="https://2886826595-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVJ3cOuQqCPf6SSCGRSDT%2Fuploads%2FCTdRXNNAZ99VGnXln67a%2FCurataEmbeddingLandingPage.png?alt=media&#x26;token=faa7dfae-f166-437b-8e5a-f66f56b20cb9" alt=""><figcaption></figcaption></figure>

## Contents

1. Preparation and embedding
2. Frame communication
3. Frame communication Statuses

## 1. Preparation and embedding

To embed Curata into an iframe, start by obtaining the URL for embedding in the Dynamic Link Response. The URL is defined in the “embedded” field of the response.

Next, set up an html iframe and set the source of the iframe to the above URL. See the below example:

```html
<iframe src=”https://uatcuratanucleus.comcorp.co.za/embedded/DJdFKUa2" name=”curataFrame” />
```

Additional iframe attributes relating to security concepts can be implemented should you wish to do so. More information on this can be found in the [next section](#id-2.-frame-communication).

## 2. Frame communication

The Curata system will interact with the parent/host site using the iframe postMessage concept. More information on this method can be found here: [Iframes and the postMessage Method (dyn-web.com)](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)

To consume messages from the Curata system, an event listener will need to be set up in the parent container. As follows:

```js
window.addEventListener('message', ({ data }) => {
console.log('i got some data!', data);
});
```

In the example above, the “data” object is comprised of the following:

| Field   | Description                                                                                                   |
| ------- | ------------------------------------------------------------------------------------------------------------- |
| eventId | Indicates the type of Curata event. See [section 3](#id-3.-frame-communication-statuses) below.               |
| status  | String value containing the result of the action. See [section 3](#id-3.-frame-communication-statuses) below. |

The host site can now take appropriate actions based on these statuses. Note these statuses will **not** indicate the outcome of a Curata Identification session. It is only meant to indicate progress of the process. To see the outcome of the Curata Identification process, please refer to the response provided by either the portal or your configured response endpoint.

## 3. Frame communication statuses

The following table lists the various states that may be returned over the post message:

### curata-completed

<table><thead><tr><th width="180">EventID</th><th>Status</th><th>Trigger</th></tr></thead><tbody><tr><td><code>curata-completed</code></td><td>success</td><td>Curata API returned valid, non-error results to ui.</td></tr><tr><td></td><td>failure</td><td>?</td></tr><tr><td></td><td>consent-declined</td><td>User declined consent during consent step.</td></tr></tbody></table>

<table><thead><tr><th width="180">EventID</th><th>Status</th><th>Trigger</th></tr></thead><tbody><tr><td><code>curata-failure</code></td><td>authentication-failed</td><td>Authentication of session with Curata API from Curata UI failed. </td></tr><tr><td></td><td>aborted</td><td>User aborted process.</td></tr><tr><td></td><td>no-camera-access</td><td>No camera present or user declined camera access.</td></tr></tbody></table>

<table><thead><tr><th width="180">EventID</th><th>Status</th><th></th></tr></thead><tbody><tr><td><code>curata-error</code></td><td>api</td><td>?</td></tr><tr><td></td><td>general</td><td>catch-all for any critical ui exceptions.</td></tr></tbody></table>

## 4. Embedding Curata in mobile app WebView components

Many mobile apps require a user gesture (such as a tap) before granting access to the camera or media devices. To address this, Curata now supports a feature that enables user gestures directly within the embedded experience. By appending the `gestureEnabled=1` query parameter to the embedded link, you can display a user interaction button that prompts the necessary gesture and resolves the issue.\
\
Fore example:

```
https://curatanucleus.comcorp.co.za/embedded/54U4Bfru?gestureEnabled=1
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.comcorp.co.za/biometric-authentication/embedding-curata.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.