# Introduzione: documento tecnico

### Introduzione

Questa documentazione è destinata a sviluppatori e webmaster che desiderano integrare il modulo di prenotazione Yoplanning.pro nel proprio sito web. L'obiettivo è migliorare l'esperienza utente fornendo un'interfaccia di prenotazione accessibile e reattiva, consentendo al contempo la personalizzazione del modulo.

### Principio di funzionamento

Il modulo di prenotazione di Yoplanning.pro è progettato per integrarsi perfettamente con il tuo sito web, offrendo un'esperienza utente fluida e senza la necessità di reindirizzamenti. Il modulo si presenta come una finestra pop-up che si attiva tramite un pulsante o un link, consentendo agli utenti di effettuare prenotazioni direttamente sul tuo sito web.

#### Benefici

* **Visualizzazione ottimale**: si adatta a tutti i tipi di schermo, compresi quelli dei dispositivi mobili.
* **Integrazione semplice**: può essere aggiunto al tuo sito con un semplice pezzo di codice JavaScript.
* **Personalizzazione**: Generazione di link specifici per diverse azioni o categorie.

#### Integrazione tramite Iframe

Sebbene possibile, l'incorporamento tramite iframe non è consigliato a causa dei limiti di compatibilità con i dispositivi mobili. Se necessario, il modulo può essere aperto in una nuova scheda per un'esperienza a schermo intero.

#### Integrazione tramite Iframe: comportamento di scorrimento

Nella modalità iframe, per impostazione predefinita il modulo di prenotazione occupa tutta l'altezza possibile e lo scorrimento viene eseguito sul tuo sito, vedi screenshot qui sotto:

<figure><img src="https://3093331782-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDMLLWM0S0Qj6OmCQo1eh%2Fuploads%2Fgit-blob-85a5484e891c6b796f1de3c10ce81768eedd3824%2Fimage%20(4)%20(1)%20(1).png?alt=media" alt="" width="563"><figcaption><p>Comportement par défaut</p></figcaption></figure>

È possibile modificare questo comportamento aggiungendo il parametro `bescroll=inside` nell'URL di integrazione del modulo di prenotazione. Il modulo occuperà l'altezza dello schermo e lo scorrimento verrà eseguito nel modulo anziché sul tuo sito, come mostrato nello screenshot qui sotto:

<figure><img src="https://3093331782-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDMLLWM0S0Qj6OmCQo1eh%2Fuploads%2Fgit-blob-2dc8accc3c9c64e030380b105b1e465ed48c7288%2Fimage%20(5).png?alt=media" alt="" width="563"><figcaption><p>Avec le paramètre "bescroll=inside"</p></figcaption></figure>

### Codice di integrazione

Per incorporare il modulo, inserisci il seguente codice JavaScript nel tag `<header>` del tuo sito. Questo renderà il modulo accessibile su tutte le pagine senza dover inserimenti multipli.

```html
<script type="text/javascript" src="https://booking.yoplanning.pro/integration/script.js" async></script>
```

### Generazione di link al modulo di prenotazione

I link specifici per il modulo di prenotazione possono essere generati tramite il back office di Yoplanning:

1. Vai su **Impostazioni > Modulo di prenotazione > Menu integrazione**.
2. Utilizza la modalità URL per creare un URL adatto alle tue esigenze.

#### Esempi di link generati

* **Link generale**: `https://booking.yoplanning.pro/<ID_UNIQUE>/`
* **Categoria specifica**: `https://booking.yoplanning.pro/<ID_UNICO>/?tag=<ID_CATEGORIA>`
* **Scheda prodotto**: `https://booking.yoplanning.pro/<ID_UNIQUE>/product/<ID_PRODUIT>`
* **Accesso diretto al carrello**: `https://booking.yoplanning.pro/<ID_UNIQUE>/cart/`
* **Negozio diretto**: `https://booking.yoplanning.pro/<ID_UNIQUE>/shop/`

#### Opzioni di integrazione

Yoplanning offre diverse modalità di integrazione:

* **Pulsante**: Per l'accesso diretto tramite un pulsante cliccabile.
* **Icona mobile**: un'icona accessibile in qualsiasi momento sulla pagina.
* **Collegamento ipertestuale**: da incorporare nel testo o nelle immagini.
* **Iframe**: utilizzato come ultima risorsa, se JavaScript è soggetto a restrizioni.
* **URL semplice**: per l'integrazione diretta come collegamento.

### Gestione multilingue

Il modulo rileva automaticamente la lingua del browser dell'utente utilizzando il servizio esterno <https://gtranslate.io/detect-browser-language>, offrendo un'esperienza localizzata e intuitiva. *(Metodo consigliato nella maggior parte dei casi.)*

#### Lingua forzata per impostazione predefinita.

Se hai un sito web multilingue, hai problemi di rilevamento della lingua o vuoi forzare la visualizzazione del modulo in una lingua definita, puoi creare un modulo di prenotazione specifico forzando la lingua nella sua configurazione.

### Conclusione

L'integrazione del modulo di prenotazione Yoplanning.pro migliora significativamente l'esperienza di prenotazione sul tuo sito web, grazie all'interfaccia utente ottimizzata, alle opzioni di personalizzazione avanzate e al supporto multilingue. Segui le istruzioni fornite per un'integrazione di successo e per offrire ai tuoi utenti un'esperienza di prenotazione fluida.