Integrazioni con il Sito Istituzionale

I widget dell'area personale sono una serie di componenti js/html/css che sono inseribili in una qualunque pagina web. In particolare alcuni di questi sono servizi built-in che i comuni devono offrire

Widget generali:

• Login Box

• Satisfy

I servizi built-in implementati sono:

• Richiedi assistenza

• Segnala problema in città

• Prenota appuntamento

I servizi sono presenti in ogni tenant fin dalla sua creazione e non sono modificabili dagli amministratori. Inoltre possono generare pratiche del tutto simili a quelle dei servizi tradizionali, ma il modulo è standard e come amministratore non è possibile modificarlo.

Ogni tenant (ente) punta in automatico alla sua versione widget compatibile in modo automatico

Tutti i widget possono essere caricati con bootstrap-italia 2 se il sito che lo contiene non carica già una versione di bts2 oppure senza

Esempio

Versione con bootstrap-italia 2
"https://servizi.comune.bugliano.pi.it/widgets/bookings/bootstrap-italia@2/js/bookings.js"
"https://servizi.comune.bugliano.pi.it/widgets/bookings/bootstrap-italia@2/css/bookings.css"

Versione senza bootstrap-italia 2
"https://servizi.comune.bugliano.pi.it/widgets/bookings/js/bookings.js"
"https://servizi.comune.bugliano.pi.it/widgets/bookings/css/bookings.css"

Se in una pagina ci sono più widget lo script con le variabili si inserisce una volta

<script>
window.OC_BASE_URL = 'https://servizi.comune.bugliano.pi.it/lang';
window.OC_PRIVACY_URL = 'https://www.comune.bugliano.pi.it/Privacy';
window.OC_AUTH_URL = 'https://servizi.comune.bugliano.pi.it/lang/login';
</script>

Codice per includere il servizio Prenota appuntamento

<div id="oc-bookings"></div>
<script>
window.OC_BASE_URL = 'https://servizi.comune.bugliano.pi.it/lang';
window.OC_PRIVACY_URL = 'https://www.comune.bugliano.pi.it/Privacy';
window.OC_AUTH_URL = 'https://servizi.comune.bugliano.pi.it/lang/login';
</script>
<link rel="stylesheet" href="https://servizi.comune.bugliano.pi.it/widgets/bookings/bootstrap-italia@2/css/bookings.css" />
<script src="https://servizi.comune.bugliano.pi.it/widgets/bookings/bootstrap-italia@2/js/bookings.js"></script>

Segnalazioni

Il widget restituisce come pagina di default / oppure /# la pagina di invio nuova segnalazione

Sotto la path /#/segnalazioni restituisce la pagina della lista di segnalazioni Sotto la path /#/segnalazioni/{id} restituisce la pagine del dettaglio di una segnalazione

<div id="oc-inefficiencies"></div>
<link rel="stylesheet" type="text/css" href="https://servizi.comune.bugliano.pi.it/widgets/inefficiencies/bootstrap-italia@2/css/inefficiencies.css" /> 

<script>
window.OC_BASE_URL = 'https://servizi.comune.bugliano.pi.it/lang';
window.OC_PRIVACY_URL = 'https://www.comune.bugliano.pi.it/Privacy';
window.OC_AUTH_URL = 'https://servizi.comune.bugliano.pi.it/lang/login';
</script>

<script src="https://servizi.comune.bugliano.pi.it/widgets/inefficiencies/bootstrap-italia@2/js/inefficiencies.js"></script>

Dalla versione 1.5.0 è stata aggiunta una nuova variabile per limitare la ricerca degli indirizzi tramite zone, configurando un bounding_box (x1,y1,x2,y2) x = longitudine, y = latitudine

 window.OC_BB = '8.66272,44.52197,9.09805,44.37590';

Dalla versione 1.6.0 sono state aggiunte due variabili d'ambiante per la configurazione del provider delle mappe basato su nominatim di default il provider è configurato su nominatim.openstreetmap.org.

OC_MAP_SEARCH_PROVIDER configura il provider di ricerca es. ricerca indirizzi da select

All'occorrenza può essere cambiato con un'altro provider custom basato su nominatim

OC_MAP_REVERSE_PROVIDER configura il provider di ricerca inversa, ovvero restituisce l'indirizzo da punto su mappa, es. quando sposto un marker da mappa mi restituisce un indirizzo testuale.

All'occorrenza può essere cambiato con un'altro provider custom basato su nominatim

window.OC_MAP_SEARCH_PROVIDER = 'nominatim.openstreetmap.org';
window.OC_MAP_REVERSE_PROVIDER = 'nominatim.openstreetmap.org';

OC_SHOW_SEVERITY_FIELD gestisce l'abilitazione del campo Valuta l'importanza del problema nel form della segnalazione disservizio. Di default il campo è nascosto. Dalla versione 1.14.3

window.OC_SHOW_SEVERITY_FIELD=true;

Configurazione per mostrare il campo Valuta l'importanza del problema Dalla versione 1.14.3

window.OC_SHOW_SEVERITY_FIELD=true;

Configurazione per mostrare il campo Valuta l'importanza del problema Dalla versione 1.14.3

window.OC_SHOW_SEVERITY_FIELD=true;

Dalla versione 1.11.0 è stata aggiunta la variabile per rendere modificabile la lista delle categorie

window.OC_CATEGORIES_URL = 'https://static.opencityitalia.it/widgets/inefficiencies/data/categories-multi.json';

Categorie con canali esterni (dalla versione 1.12.3)

Per le categorie configurate con link esterni, il widget invita l'utente a proseguire tramite i canali esterni e impedisce la prosecuzione della compilazione e dell'invio della segnalazione.

I link esterni vanno configurati nel json richiamato tramite window.OC_CATEGORIES_URL popolando all'interno della categoria, il valore external_ref (opzionale) con i seguenti campi:

nome	descrizione
title	titolo
text	descrizione
channels	[channel]

channel

nome	descrizione
type	web, email, phone, ios o android
href	link href
label	link label

esempio:

...
{
 "label": "Manutenzione",
 "value": "8f06c823-e476-4ec1-a208-6fd4956e5a56",
 "external_ref": {
   "title": "Contatta questo contatto esterno",
   "text": "Per la manutenzione di:\n \u2022 Strade \n \u2022 Marciapiedi...",
   "channels": [
     {
       "type": "web",
       "label": "vai al sito www.google.it",
       "href": "https://www.google.it"
      },
      {
        "type": "email",
        "label": "Scrivi un'email a [e-mail]",
        "href": "mailto:[e-mail]"
      },
      {
        "type": "phone",
        "label": "Telefona al numero verde 12345789",
        "href": "tel://12345789"
      },
      {
        "type": "ios",
        "label": "Scarica l'app dedicata",
        "href": "https://apple-store.com/mia-app"
      },
      {
        "type": "android",
        "label": "Scarica l'app dedicata",
        "href": "https://play.google.com/mia-app"
      }
    ]
  }
},

Richiesta assistenza

Versione con bootstrap-italia 2
<div id="oc-helpdesk"></div>
<link rel="stylesheet" href="https://servizi.comune.bugliano.pi.it/widgets/helpdesk/bootstrap-italia@2/css/helpdesk.css" />
<script>
window.OC_BASE_URL = 'https://servizi.comune.bugliano.pi.it/lang';
window.OC_PRIVACY_URL = 'https://www.comune.bugliano.pi.it/Privacy';
window.OC_AUTHURL = 'https://servizi.comune.bugliano.pi.it/lang/login';
</script>
<script src="https://servizi.comune.bugliano.pi.it/widgets/helpdesk/bootstrap-italia@2/js/helpdesk.js"></script>

Versione senza bootstrap-italia 2
<div id="oc-helpdesk"></div>
<link rel="stylesheet" href="https://servizi.comune.bugliano.pi.it/widgets/helpdesk/css/helpdesk.css" />
<script>
window.OC_BASE_URL = 'https://servizi.comune.bugliano.pi.it/lang';
window.OC_PRIVACY_URL = 'https://www.comune.bugliano.pi.it/Privacy';
window.OC_AUTHURL = 'https://servizi.comune.bugliano.pi.it/lang/login';
</script>
<script src="https://servizi.comune.bugliano.pi.it/widgets/helpdesk/js/helpdesk.js"></script>

Sui servizi built-in:

• Richiedi assistenza

• Segnala problema in città

• Prenota appuntamento

è stata aggiunta la possibilità di auto generasi un breadcrums semplice del tipo Home / Segnalazioni dove Home è la homepage del sito e segnalzioni è la route del widget, aggiungendo la variabile:

window.OC_RENDER_BREADCRUMB=true

se la variabile non è presente o ha valore false la breadcrums non verrà abilitata

Pulsante accedi all'area personale

<div id="oc-login-box"></div>

<script>
window.OC_BASE_URL = 'https://servizi.comune.bugliano.pi.it/lang';
window.OC_AUTH_URL = 'https://servizi.comune.bugliano.pi.it/lang/login';
window.OC_SPID_BUTTON = 'true' // da usare se si vuole utilizzare la versione senza popup login spid
</script>

<script src="https://servizi.comune.bugliano.pi.it/widgets/login-box/bootstrap-italia@2/js/login-box.js"></script>

Per superare la validazione della norma "C.SI.5.2 DOMINIO ISTITUZIONALE" del Regolamento AgID è necessario impostare la variabile window.OC_SPID_BUTTON = 'false'. In questo modo anche il pulsante accedi all'Area Personale indirizzerà al dominio istituzionale.

Satisfy

Tutte le versioni del widget sono disponibili sulla pagina

Consigliamo di utilizzare sempre l'ultima versione aggiornata. Tutte le versioni che puntano alla stanza si aggiornano automaticamente.

Includere la versione con BI 2 se il sito contenitore non usa BI 2 - versione autoaggiornante

data-entrypoints -> obbligatorio e serve per caricare la configurazione globale del widget

data-api -> non obbligatorio, da utilizzare se si ha un endpoint custom dato dallo sviluppatore

<app-widget data-entrypoints="{UUID}" data-api="https://satisfy.opencityitalia.it"></app-widget>
<script src="https://servizi.comune.bugliano.pi.it/widgets/satisfy/bootstrap-italia@2/js/satisfy.js"></script> 

Se si vuole usare una versione CDN utilizzare lo questo script

<script src="https://static.opencityitalia.it/widgets/satisfy/version/{version}/bootstrap-italia@2/js/satisfy.js"></script> 

Includere la versione senza stili se il sito contenitore usa BI 2 - versione auto aggiornante

<app-widget data-entrypoints="{UUID}"></app-widget>
<script src="https://servizi.comune.bugliano.pi.it/widgets/satisfy/js/satisfy.js"></script>

Se si vuole usare una versione CDN utilizzare lo questo script

<script src="https://static.opencityitalia.it/widgets/satisfy/version/{version}/js/satisfy.js"></script>