> ## Documentation Index
> Fetch the complete documentation index at: https://docs.datanumia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Profile summary

## Integration of the web component

This is a more technical section dedicated to developers.
For a specific environment, use the correct base uri, specified in this section : [Insert a webcomponent.](/docs/DeveloperTools/HomeInteface/01-how-to-insert-webcomponents-in-an-app)

Below is an example of implementation with redirection buttons enabled:

<CodeGroup>
  ```html theme={null}
  <html>
    <head>
      <link href="https://new-front-intersi.qa.datanumia.com/socle/fr/styles.css"
            rel="stylesheet">
      <script src="https://new-front-intersi.qa.datanumia.com/socle/fr/polyfills.js"
              type="module"></script>
      <script src="https://new-front-intersi.qa.datanumia.com/socle/fr/main.js"
              type="module"></script>

      <!-- Please import the file that contains the radius override -->
      <link href="https://app.example.org/style.css" rel="stylesheet">
    </head>
    <body>
      <dtn-profile-read enable-redirection-event="true"></dtn-profile-read>
    </body>
  </html>
  ```
</CodeGroup>

The `dtn-profile-read` HTML element implements a shadow DOM that allows it to be isolated from the rest of the application. For more information on what a shadow DOM is, please refer to the [What are webcomponents section](/docs/DatanumiaHome/08-home-interfaces/01-what-are-webcomponents).

***

### Inputs

#### enable-redirection-event

Controls whether profile cards are read-only or expose edit actions that emit a redirection event.

* **Name:** `enable-redirection-event`
* **Required:** No
* **Type:** boolean
* **Default value:** `false`

***

### Outputs

#### dtn:profile-goto

Custom DOM event dispatched on `window` when the user clicks an "Edit" button on a section card. Requires `enable-redirection-event="true"`.

* **Name:** `dtn:profile-goto`
* **Type:** [ProfileGotoEventPayload](/docs/DeveloperTools/HomeInteface/05-home-basic/04-profil-summary#profilegotoeventpayload)
* **Emitted from:** window

***

### CSS Variables

Not applicable

***

### Authentication

To access the data required to render this component, you first need to set up security in your application by following the guidelines listed in the *Security for HOME Interfaces* section. [See more details in this section.](/docs/DeveloperTools/HomeInteface/04-security)

### Types

#### ProfileSection

| Allowed values |
| - |
| `general` |
| `housing` |
| `equipment` |
| `otherEquipment` |
| `lifestyle` |

#### ProfileGotoEventPayload

| key | Required | type | description |
| - | - | - | - |
| `section` | true | [ProfileSection](/docs/DeveloperTools/HomeInteface/05-home-basic/04-profil-summary#profilesection) | The profile section key identifying the step to open in the profile form |