> For the complete documentation index, see [llms.txt](https://docs.opencityitalia.it/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.opencityitalia.it/stanza-del-cittadino/sviluppatori-e-partner-tecnologici/integrazioni/integrazione-widget-servizio-formio.md).

# 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`.                   |
| `login-providers` | No           | SPID,CIE,CNS - abilita in base a quali inseriti il testo della identità digitale nella pagina di login |
|                   |              |                                                                                                        |

***

#### 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>`.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.opencityitalia.it/stanza-del-cittadino/sviluppatori-e-partner-tecnologici/integrazioni/integrazione-widget-servizio-formio.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
