> ## 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 completion

## 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:

<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 active-step-section="general"></dtn-profile>
  </body>
  </html>
  ```
</CodeGroup>

The `dtn-profile` 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

#### active-step-section

Opens the stepper directly on the specified section. If the value is absent or does not correspond to a valid section key, the form opens on the first step.

* **Name:** `active-step-section`
* **Required:** No
* **Type:** [*ProfileSection*](/docs/DeveloperTools/HomeInteface/05-home-basic/03-profil-completion#profilesection)
* **Default value:** `—`

#### disable-heating-fields

When `true`, heating-related fields are hidden from the profile form.

* **Name:** `disable-heating-fields`
* **Required:** No
* **Type:** `boolean`
* **Default value:** `false`

***

### Outputs

#### dtn:profile-saved

Custom DOM event dispatched on `window` when the user clicks on the "Save and quit" button or the "Finish" button in the last step.

* **Name:** `dtn:profile-saved`
* **Type:** [ProfileSavedPayload](/docs/DeveloperTools/HomeInteface/05-home-basic/03-profil-completion#profilesavedpayload)
* **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)

### Type

#### ProfileSavedPayload

| Key | Type | Description |
| - | - | - |
| `hasBeenModified` | `boolean` | Indicates if the profile has been modified. |
| `totalSteps` | `number` | The total number of steps. Could be use to determine if it's the last step or not. |
| `step` | [*StepMetadata*](/docs/DeveloperTools/HomeInteface/05-home-basic/03-profil-completion#stepmetadata) | The metadata associated with the active step when event has been triggered. |

#### StepMetadata

| Key | Type | Description |
| - | - | - |
| `name` | [*ProfileSection*](/docs/DeveloperTools/HomeInteface/05-home-basic/03-profil-completion#ProfileSection) | The name associated with the step. |
| `position` | `number` | The step's position inside the stepper. Values range from `[1; totalSteps]`. |

#### ProfileSection

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

[Functional description 'Profil completion'](docs/DatanumiaHome/08-home-interfaces/02-home-basic-interfaces/03-profil-completion)