# Components

Widgets are based on a layout and this layout is built with **components**.

Components are any part of a widget you can customize. They are defined and created as a consequence of a widget creation.

The scope of components created is defined by `template_id`. You can find a summary of combinations below.

| Template                 | auth | dsar\_form | footer | header | preference | preference\_value | save | section | sections |
| ------------------------ | ---- | ---------- | ------ | ------ | ---------- | ----------------- | ---- | ------- | -------- |
| `sections`               | ✅    | ❌          | ❌      | ❌      | ✅          | ✅                 | ❌    | ✅       | ✅        |
| `sections_and_save`      | ✅    | ❌          | ❌      | ❌      | ✅          | ✅                 | ✅    | ✅       | ✅        |
| `full_preference_center` | ✅    | ❌          | ✅      | ✅      | ✅          | ✅                 | ✅    | ✅       | ✅        |
| `dsar_form`              | ❌    | ✅          | ❌      | ❌      | ❌          | ❌                 | ❌    | ❌       | ❌        |

Components available are following:

* [auth](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/content-and-design/components/auth)
* [dsar\_form](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/content-and-design/components/dsar_form)
* [footer](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/content-and-design/components/footer)
* [header](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/content-and-design/components/header)
* [preference](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/content-and-design/components/preference)
* [preference\_value](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/content-and-design/components/preference_value)
* [save](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/content-and-design/components/save)
* [section](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/content-and-design/components/section)
* [sections](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/content-and-design/components/sections)

Please be aware of the following exceptions.

* [auth](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/content-and-design/components/auth) component is not a `layout-component` and is editable at widget level.
* In addition of `options`, [sections](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/content-and-design/components/sections) `layout-component` provides a simplified configuration with `theme` property.
* Privacy request widgets benefit from design and UI content edition only in `layout-component` [dsar\_form](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/edit-a-widget/content-and-design/components/dsar_form). User rights content is not editable.

### Edit a **component**

To edit a layout-component, send a **PATCH** request on `/widgets/layout-components/{id}`.

{% hint style="warning" %}
Be careful when you are editing the `options` property. This is a JSONB and by design, you need to fill in every property already added every time you edit this object.
{% endhint %}

```json
PATCH https://api.didomi.io/widgets/layout-components/{id}?organization_id=YOUR_ORG_ID

{
    "type": "header || save || footer || section || preference || preference_value || dsar_form",
    "options": {},
    "organization_id": "YOUR_ORGANIZATION_ID"
}
```

### Edit multiple components

To edit multiple layout-components, send a **PATCH** request on `/widgets/layout-components`.

```json
PATCH https://api.didomi.io/widgets/preferences-centers/layout-components?organization_id=YOUR_ORG_ID

[
    {
        "id": "String",
        "type": "header || save || footer || section || preference || preference_value",
        "options": {},
        "organization_id": "YOUR_ORGANIZATION_ID"
    }
]
```