> For the complete documentation index, see [llms.txt](https://legacy-docs.usesmileid.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://legacy-docs.usesmileid.com/integration-options/web-mobile-web/javascript-sdk-beta/deprecated/usage.md).

# Usage

Use the new javascript sdk. Migration guide found [here](/integration-options/web-mobile-web/javascript-sdk-beta/migration.md) After installing, and importing if required, you can use the web-component by following these steps:

## Steps

**1. Insert the following markup in your page / component**

*For Selfie Capture / Liveness Images only*

```markup
<smart-camera-web>
</smart-camera-web>
```

*For Selfie Capture / Liveness Images, and ID images*

```html
<smart-camera-web capture-id> </smart-camera-web>
```

*For Selfie Capture / Liveness Images, and ID images (front and back)*

```html
<smart-camera-web capture-id="back"> </smart-camera-web>
```

*To Select the Document Capture Mode for ID images add the `document-capture-modes` attribute with one of `camera`, `upload`, or a comma separated combination like `camera,upload`.*

```html
<smart-camera-web capture-id="back" document-capture-modes="camera,upload">
</smart-camera-web>
```

**2. The following image should show up on your web page, if installation, and import, was successful.**

![Camera Access Permission](https://lh5.googleusercontent.com/vMHtwDBWOn4DXDGdpqa1lgUUu1VbMNt496vC_Kz5M173YXXyzyRwDw9mUbf2mJd1OYDEEhadx5nN1rusLE3oFHiXETXhlG7iEPWkfjy8ImNobc7A3pOmS9moN3MZwFN604HbFbKN)

**3. After granting access by clicking the button, you start by capturing a selfie and liveness images. You should see the capture screen below**

![Capture Selfie Screen](https://lh6.googleusercontent.com/vyF6kDPvXW9XHZw-Hj3acNlc7yfHYkG-omZ6d8mzGvVYCIxdYaIdDKvcKLMCRpWyDF8m4gS3sP2dccRgumsMDWZ_BzUwwTGu_9JO_boJQmAjbxH-xyweBz9_La12ObfFYCqq71YE)

* Click on Take a Selfie and follow the prompts on the screen to take both the Selfie and Liveness images.
* At the end of the selfie capture process, you should see the Selfie review screen.

![Selfie Review Screen](https://lh4.googleusercontent.com/38oTqGZW0jjm0ModF4jQeRJB8GwAwQasvaVKRmBsR_xhiRry75r8XRorS3lyKv__tUllguwTKk151nBmLzR0LJfYIb5pfRcdoyeTBKFyEmeRnNsAL9JQEGzmMibyYqkDLvpQ85J9)

If the Selfie you took is satisfactory, select "Yes, use this one" or select "Re-take selfie" the selfie again running through steps 3 to 5.

**4. If you intend to also capture the ID card image and added the `capture-id` attribute, additional screens related to ID card capture are displayed in addition to the Selfie related screens**

* Capture your ID card photo

![ID Card Capture Screen](https://lh3.googleusercontent.com/gdtiPLKN4FfIfTSDEfIs2nuFRmygGISt75jZgrJ4AjBHyQ63GfR2Fmv2QWhUQs8DSDVteGk8gOPTUmBxrK1DAwQ4GGjyS6dt_Q7zaZIiMh28r6GvIyWa2iA3INA9XyAf1SzWU7Qh)

* After taking the ID card photo, you should see the review screen

![ID Card Review Screen](https://lh4.googleusercontent.com/Z88TsF5Ks5hS4jNi_a4T96csNAf39ix-42vyHhEDNqMfUY6r7Mh2ZJs7DQiKNhLZBin_S-acjjp_Tb4tIHD-886T3uO6Unfp27U0cI_vP3_543V-xQIM5jCzpWmw4l-KP31Tw5ZO)

**5. Handle the `imagesComputed` event in your page / component**

On clicking the "Yes, use this one" button for the selfie / liveness images flow, or the "Approve" icon on the `capture-id` flow, an `imagesComputed` event will be published.

`imagesComputed` is a [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent) returning data — in `e.detail` — of the shape:

```
{
  partner_params: {
    libraryVersion: String,
    permissionGranted: Boolean, // expected to be `true`
  },
  images: [
    {
      file: '',
      image_type_id: Number, // as recommended here: https://docs.usesmileid.com/products/core-libraries#images-required
      image: String // base64 encoded string of image
    }
  ]
}
```

Here is a sample:

```
{
  partner_params: {
    libraryVersion: "1.0.0-beta.3",
    permissionGranted: true
  },
  images: [
    {
      image_type_id: 2,
      image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."  // truncated base64 encoded string of image
    },
    {
      image_type_id: 6,
      image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."
    },
    {
      image_type_id: 6,
      image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."
    },
    {
      image_type_id: 6,
      image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."
    },
    {
      image_type_id: 6,
      image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."
    },
    {
      image_type_id: 6,
      image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."
    },
    {
      image_type_id: 6,
      image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."
    },
    {
      image_type_id: 6,
      image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."
    },
    {
      image_type_id: 6,
      image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."
    },
    {
      image_type_id: 3,
      image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."
    },
  ]
}

```

We advise that the `partner_params` published be merged with other [`partner_params`](/further-reading/faqs/what-are-partner_params.md) sent with your request. You can read more about `image_type_id` [here](/further-reading/faqs/what-are-the-image-types-i-can-upload-to-smile-id.md).

Here, we handle the imagesComputed event by sending the data to an endpoint.

```
<script>
  const app = document.querySelector('smart-camera-web');

  const postContent = async (data) => {
    const options = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    };

    try {
      const response = await fetch('/', options)
      const json = await response.json();

      return json;
    } catch (e) {
      throw e;
    }
  };

  app.addEventListener('imagesComputed', async (e) => {

    try {
      const response = await postContent(e.detail);

      console.log(response);
    } catch (e) {
      console.error(e);
    }
  });
</script>

```

The sample endpoint is built using our [NodeJS](/integration-options/server-to-server/javascript.md) Server to Server library and ExpressJS. This is the code below:

```
const express = require('express');
const { v4: UUID } = require('uuid');

if (process.env.NODE_ENV === 'development') {
  const dotenv = require('dotenv');

  dotenv.config();
}

const SIDCore = require('smile-identity-core');
const SIDSignature = SIDCore.Signature;
const SIDWebAPI = SIDCore.WebApi;

const app = express();

app.use(express.json({ limit: '500kb' }));
app.use(express.static('public'));

app.post('/', async (req, res, next) => {
  try {
    const { PARTNER_ID, API_KEY, SID_SERVER } = process.env;
    const connection = new SIDWebAPI(
      PARTNER_ID,
      '/callback',
      API_KEY,
      SID_SERVER
    );

    const partner_params_from_server = {
      user_id: `user-${UUID()}`,
      job_id: `job-${UUID()}`,
      job_type: 4 // job_type is the simplest job we have which enrolls a user using their selfie
    };

    const { images, partner_params: { libraryVersion } } = req.body;

    const options = {
      return_job_status: true
    };

    const partner_params = Object.assign({}, partner_params_from_server, { libraryVersion });


    const result = await connection.submit_job(
      partner_params,
      images,
      {},
      options
    );

    res.json(result);
  } catch (e) {
    console.error(e);
  }
});

// NOTE: This can be used to process responses. don't forget to add it as a callback option in the `connection` config on L22
// https://docs.usesmileid.com/further-reading/faqs/how-do-i-setup-a-callback
app.post('/callback', (req, res, next) => {
});

app.listen(process.env.PORT || 4000);

```

You can also build this using any of the other [Server to Server libraries](/integration-options/server-to-server.md).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://legacy-docs.usesmileid.com/integration-options/web-mobile-web/javascript-sdk-beta/deprecated/usage.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.