# Integrazione Widget servizio (FormIO)

#### 1. Installazione

Aggiungi dentro il tag `<head>` della tua pagina questi riferimenti:

```html
<!-- JavaScript (deferred) Ultima versione  -->
<script
  defer
  src="https://servizi.comune-qa.bugliano.pi.it/widgets/service/js/web-formio.js"
></script>
<!-- oppure -->
<!-- JavaScript (deferred) Versione specifica -->
<script
  defer
  src="https://static.opencityitalia.it/widgets/formio/version/0.9.1/js/web-formio.js"
></script>
```

#### 2. Utilizzo del tag `<widget-formio>`

Posiziona `<widget-formio>` nel punto della pagina in cui vuoi mostrare il form:

```html
<widget-formio
  service-id="0121edc9-57d8-45f2-ae92-260f45aec6d5"
  base-url="https://servizi.comune-qa.bugliano.pi.it/lang"
  formserver-url="https://form-qa.stanzadelcittadino.it"
  pdnd-url="https://api.qa.stanzadelcittadino.it/pdnd/v1"
  enable-draft="true"
></widget-formio>
```

**Attributi**

| Nome             | Obbligatorio | Valori / Descrizione                                                                              |
| ---------------- | ------------ | ------------------------------------------------------------------------------------------------- |
| `service-id`     | Sì           | UUID del servizio/Form registrato sulla “Stanza del Cittadino”                                    |
| `base-url`       | Sì           | URL della “Stanza del Cittadino” (autenticazione, privacy e routing del widget).                  |
| `formserver-url` | Sì           | URL del Form Server Form.io (endpoint per recupero e invio dei form).                             |
| `pdnd-url`       | Sì           | URL del servizio PDND (Piattaforma Digitale Nazionale Dati) per il caricamento delle anagrafiche. |
| `enable-draft`   | No           | `true` / `false` – abilita il salvataggio in bozza delle pratiche. Default: `false`.              |

***

#### 3. Storybook & Demo

Tutte gli esempi dei servizi sono documentati in Storybook:\
<https://widget-formio.comune-qa.bugliano.pi.it/>

#### 4. Configurazione Servizi Built-in Personalizzati

Per aggiungere o personalizzare un servizio built-in esistente (Richiedi assistenza, Prenota appuntamento, ecc.), è necessario configurare il campo **identifier** come amministratore nella sezione dettaglio del servizio.

* Il valore di `identifier` deve seguire il formato: `<nome-servizio>-custom` dove:
  * `<nome-servizio>` è obbligatorio e corrisponde al servizio di base (`helpdesk`, `bookings`, ecc.)
  * `-custom` è suffisso libero a scelta per distinguere la versione personalizzata

**Esempi:**

* `helpdesk-custom` per una versione custom di **Richiedi assistenza**
* `bookings-custom` per una versione custom di **Prenota appuntamento**

Questa configurazione permette al widget di riconoscere e caricare il servizio personalizzato attraverso il tag `<widget-formio>`.
