# Create a widget

## Introduction

Didomi provides different types of widgets. To build a widget, beyond filling in your Configuration Tree, you need to indicate a `format`, a `template_id` and the selected entities. Before creating widgets available in the Didomi Console, let's deep dive into these properties.

#### Format

The `format` property defines the integration method of your widget. It can be either `embeddable` or `hosted`.

If you choose `embeddable`, you will be able to implement your widget on your website by copy/pasting a Didomi Container into your HTML. A `hosted` widget is a widget accessible through a dedicated URL which can be either auto generated by our system or customized as detailed [here](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/deploy-a-widget/use-your-own-domain).

#### Template

The `template_id` property allows you to select a general structure for your widget. We offer 3 options:

* `sections`: includes only sections (purposes & preferences)
* `sections_and_save`: includes sections (purposes & preferences) and a save button
* `full_preference_center`: includes a header, sections (purposes & preferences), a save button, and a footer
* `dsar_form`: includes user's rights of regulations, some additional fields and a submit button

#### Selected entities

> *This section relates to widgets that are used to collect preferences only (Single purpose widget or Preference Center for instance)*

The selected entities are actually two properties, `selected_purposes_ids` and `selected_preferences_ids`. These arrays allow you to select one, several or all purposes and/or preferences from your Configuration Tree.

*To include the full Configuration Tree in your widget, don't include these properties or send empty arrays.*

## Create a widget

To create a widget, send a **POST** request on `/widgets`.

You need to send a different payload from one type of widget to another. In this comparative table, we have listed and detailed the configuration required to reproduce a widget from the selection we offer in the Didomi Console.

| Widget                 | format       | template\_id             | selected\_purposes\_ids                                                                 | selected\_preferences\_ids                                                                 |
| ---------------------- | ------------ | ------------------------ | --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
| Single purpose widget  | `embeddable` | `sections`               | <p>if you select a purpose <code>\["SEL\_PURP\_ID"]</code><br>else <code>\[]</code></p> | <p>if you select a preference <code>\["SEL\_PREF\_ID"]</code><br>else <code>\[]</code></p> |
| Multi purpose widget   | `embeddable` | `sections_and_save`      | `[]`                                                                                    | `[]`                                                                                       |
| Preference Center      | `hosted`     | `full_preference_center` | `[]`                                                                                    | `[]`                                                                                       |
| Privacy Request widget | `embeddable` | `dsar_form`              | `null`                                                                                  | `null`                                                                                     |

💡 *Many configurations are possible. Feel free to give it a try and see if it matches your needs in a better way.*

### Create a Single purpose widget

A Single purpose widget includes one purpose or preference from your Configuration Tree. This widget is embedded in your website.

#### SPW with a purpose

```json
POST https://api.didomi.io/widgets?organization_id=YOUR_ORG_ID

{
  "name": "String",
  "layout_shape": "smoothed",
  "format": "embeddable",
  "template_id": "sections",
  /**
   * For a Single purpose widget w/ a purpose, 
   * add a selected_purposes_ids 
   */  
  "selected_purposes_ids": ["YOUR_SELECTED_PURPOSE_ID"]
   /**
   * auth is an optional object in case 
   * you want to override the template default behavior
   */
   "auth": {
       "method": null,
       "componentOptions": {},
       "hideIfNotAuthenticated": true
   }   
}
```

#### SPW with a preference

```json
POST https://api.didomi.io/widgets?organization_id=YOUR_ORG_ID

{
  "name": "String",
  "layout_shape": "smoothed",
  "format": "embeddable",
  "template_id": "sections",
  /**
   * For a Single purpose widget w/ a preference, 
   * add a selected_preferences_ids
   */  
  "selected_preferences_ids": ["YOUR_SELECTED_PREFERENCE_ID"]
   /**
   * auth is an optional object in case 
   * you want to override the template default behavior
   */
   "auth": {
       "method": null,
       "componentOptions": {},
       "hideIfNotAuthenticated": true
   }     
}
```

### Create a Multi purpose widget

A multi purpose widgets includes all purposes and preference. This widget is embedded in your website.

```json
POST https://api.didomi.io/widgets?organization_id=YOUR_ORG_ID

{
  "name": "String",
  "layout_shape": "smoothed",
  "format": "embeddable",
  "template_id": "sections_and_save",
   /**
   * auth is an optional object in case 
   * you want to override the template default behavior
   */
   "auth": {
       "method": null,
       "componentOptions": {},
       "hideIfNotAuthenticated": true
   }     
}
```

### Create a Preference Center

A Preference Center includes all purposes and preferences from your Configuration Tree. This widget is hosted on an auto-generated domain or a custom domain if you configure it.

<pre class="language-json"><code class="lang-json"><strong>POST https://api.didomi.io/widgets?organization_id=YOUR_ORG_ID
</strong>
{
  "name": "String",
  "layout_shape": "smoothed",
  "format": "hosted",
  "template_id": "full_preference_center",
   /**
   * auth is an optional object in case 
   * you want to override the template default behavior
   */
   "auth": {
       "method": "email",
       "componentOptions": {},
       "hideIfNotAuthenticated": false
   }     
}
</code></pre>

#### Create a Preference Center with a custom domain

If you’ve already created a domain for loading a webpage, you can create a Preference Center and use this domain by setting the `domain` property to **custom** and the `custom_domain_id` to your domain ID (or domain name).

<pre class="language-json"><code class="lang-json"><strong>POST https://api.didomi.io/widgets?organization_id=YOUR_ORG_ID
</strong>
{
  "name": "String",
  "layout_shape": "smoothed",
  "format": "hosted",
  "template_id": "full_preference_center",  
  "domain": "custom",
  "custom_domain_id": "YOUR_DOMAIN_ID"
}
</code></pre>

### Create a Privacy Request widget

A Privacy Request form includes all user's rights from regulations supported by Didomi. This widget is embedded in your website.

```json
POST https://api.didomi.io/widgets?organization_id=YOUR_ORG_ID

{
  "name": "String",
  "layout_shape": "smoothed",
  "format": "embeddable",
  "template_id": "dsar_form",
   /**
   * auth is an optional object in case 
   * you want to override the template default behavior
   */
   "auth": {
       "method": null,
       "componentOptions": {},
       "hideIfNotAuthenticated": false
   }   
}
```

### Create a Headless Preference Center

A Headless Preference Center includes all purposes and preferences from your Configuration Tree as well as all static components. This widget is embedded on your website and requires technical implementation to implement design.

Read our dedicated [documentation](https://developers.didomi.io/api-and-platform/widgets/privacy-widgets/headless-widgets) to know more about Headless widget implementation.

```json
POST https://api.didomi.io/widgets?organization_id=YOUR_ORG_ID

{
  "name": "String",
  "layout_shape": "smoothed",
  "format": "embeddable",
  "template_id": "full_preference_center", 
  "headless": true,
   /**
   * auth is an optional object in case 
   * you want to override the template default behavior
   */
   "auth": {
       "method": "email",
       "componentOptions": {},
       "hideIfNotAuthenticated": true
   }     
}
```