Incorpora

Qui generi il codice HTML per mostrare la prenotazione di questo servizio sul tuo sito web, blog o landing page — senza che il visitatore debba uscire dalla tua pagina.

Per aprirla, vai su Servizi, scegli un servizio e clicca Incorpora nel menu a sinistra.

Prima di iniziare

Il codice punta al tuo sito di prenotazione Mypic (es. tuonome.mypic.tech/slug-servizio/embed). Per generarlo serve che l'URL pagina sia impostato in Impostazioni → Sito.

Se manca l'URL, la pagina mostra un avviso e non può produrre lo snippet.

Tre modalità di incorporamento

Scegli una delle tre card in alto. Il codice HTML si aggiorna in base alla scelta.

Incorporato nella pagina

Mostra il calendario di prenotazione direttamente nel layout del tuo sito tramite un <iframe>.

Ideale per una pagina dedicata tipo «Prenota ora» o una sezione centrale della landing.

Pulsante flottante

Aggiunge un pulsante fisso (es. in basso a destra) che, al click, apre la prenotazione in una finestra modale sopra il tuo sito.

Ideale se vuoi lasciare il layout del sito com'è e offrire la prenotazione on demand.

Collega a un pulsante esistente

Non aggiunge elementi visibili: collega la modale di prenotazione a un pulsante o link che hai già sul sito, tramite l'attributo id HTML.

Ideale per CTA già presenti («Prenota», «Richiedi appuntamento», ecc.).

Configurazione

Le opzioni nella colonna Configurazione si applicano allo snippet generato.

Opzioni comuni

• Tema incorporamento — Automatico segue il tema del browser del visitatore; Chiaro o Scuro forzano l'aspetto del widget dentro l'iframe o la modale.
• Nascondi riepilogo servizio — nasconde le card Evento / Dove / Quando in cima al booker. Utile per un embed più compatto quando il contesto è già chiaro sulla tua pagina.

Modalità incorporato nella pagina

• Larghezza iframe — larghezza del riquadro (es. 100%, 640px).
• Altezza iframe — altezza del riquadro (es. 700px). Regolala in base allo spazio che hai in pagina.

Modalità pulsante flottante

• Testo pulsante — etichetta del pulsante (es. «Prenota», «Book now»).
• Mostra icona calendario — aggiunge un'icona calendario prima del testo.
• Posizione pulsante — angolo dello schermo (basso/alto, sinistra/destra).
• Colore pulsante e Colore testo — personalizzazione visiva rispetto al tuo brand.

Modalità collega a un pulsante esistente

• ID elemento HTML — deve coincidere con l'id del tuo bottone o link (es. prenota-ora). Se l'elemento non esiste in pagina, in console compare un avviso e il click non funziona.

Codice HTML

La colonna Codice HTML mostra lo snippet pronto da copiare. È solo HTML: un <iframe> per la modalità incorporata, oppure un <script> inline per pulsante flottante o trigger su elemento.

1. Scegli modalità e opzioni.
2. Clicca Copia codice.
3. Incolla lo snippet nel punto giusto del tuo sito (HTML, CMS, Webflow, WordPress custom HTML, ecc.).

Cosa vede il visitatore

L'embed carica la pagina pubblica …/slug-servizio/embed del tuo sito Mypic: solo il modulo di prenotazione, senza header, profilo o menu del sito professionale.

Il cliente completa data, ora e modulo come su una prenotazione normale; pagamenti e conferme funzionano come sempre.

Parametri nell'URL

Lo snippet può includere parametri di query generati dalla configurazione:

Puoi anche aggiungere manualmente date, month o tz per aprire il booker su un giorno o fuso specifico (stesso comportamento del link di prenotazione).

Suggerimenti pratici

• Su mobile, per la modalità incorporata valuta un'altezza iframe generosa (es. 700–800px) o il pulsante flottante.
• Se il tuo sito ha una Content Security Policy restrittiva, assicurati di consentire iframe verso il dominio del tuo sito Mypic.
• Dopo aver cambiato slug servizio o dominio in Sito, rigenera e sostituisci lo snippet sul tuo sito.

---

Copia il codice con Copia codice e incollalo dove ti serve.