blog-iframe

Come personalizzare l'iframe del tuo progetto di timelapse?

Come personalizzare l'iframe del tuo progetto di timelapse?

Come personalizzare l'iframe del tuo progetto di timelapse?

4 minutes

💡

💡 Concetti chiave sul Timelapse

Punti Chiave: Personalizzazione degli Iframe myTikee per l'Integrazione nei Siti Web

  • Integrazione istantanea e reattività: genera facilmente codici di integrazione iframe personalizzabili tramite Progetto > Condividi e aggiungi ?fluid=true direttamente all'URL per garantire che il tuo player si adatti in modo reattivo a tutte le dimensioni dello schermo.


  • Layout del player ottimizzati: perfeziona le dimensioni del player direttamente nel codice. Puoi eliminare barre di scorrimento e bordi inserendo scrolling="no" e frameBorder="0" (assicurati solo che l'altezza sia impostata a un livello sufficiente per evitare che i pulsanti di controllo vengano tagliati).


  • Personalizzazione dei colori in linea con il brand: adatta perfettamente l'interfaccia di visualizzazione al branding della tua azienda aggiungendo i codici esadecimali di primary_color, secondary_color e font_color alla stringa dell'URL, omettendo il simbolo "#".


  • Modalità di visualizzazione su misura: seleziona la vista iniziale del tuo visitatore utilizzando il parametro default_tab (scegli tra panoramica single, cursore prima/dopo compare o vista riproiettata immersive) e limita le schede di navigazione utilizzando allowed_viewer_types.


  • Controllo della sicurezza e della localizzazione: proteggi le tue immagini impostando hide_downloads=true per rimuovere le opzioni di download dal player pubblico, e localizza l'interfaccia utente per il tuo pubblico definendo il parametro lang come en o fr.

Con la soluzione Tikee di Enlaps e l'applicazione web myTikee dedicata al timelapse, puoi facilmente integrare il tuo progetto timelapse nel tuo sito web con un solo clic. Che tu voglia aggiungere un video panoramico, un confronto prima-dopo o una galleria di immagini, hai accesso a link iframe personalizzabili. Questo tutorial ti guida attraverso i passaggi per personalizzare questi iframe e ottimizzare la visualizzazione del tuo progetto timelapse.

Accesso al Codice di Integrazione Iframe

Per trovare il codice del tuo iframe, vai all'indice del progetto:

  1. Vai su Progetto.

  2. Clicca su Condividi.

1. Modifica della Dimensione dell'Iframe

Il codice di integrazione iFrame può essere facilmente personalizzato direttamente dal codice di integrazione. Spesso, quando una galleria è integrata con un iframe, vi è una barra di scorrimento predefinita se la galleria è più grande dell'iframe. Per evitare ciò, ci sono due opzioni che possono essere aggiunte per regolare facilmente l'iframe.

Un'opzione è cambiare l'altezza e la larghezza dell'iframe per adattarla alla galleria cambiando i numeri per l'altezza e la larghezza del codice come mostrato sotto.

<iframe src="https://staging.tikee.io/time_lapses/1879/photo_gallery/6b12e12d-5650-4aed-8495-38fee083fbba?lang=en" allowfullscreen style="width: 900px; height: 620px; border: none;" ></iframe>

Puoi anche rimuovere il bordo e la barra di scorrimento. Puoi aggiungere scrolling = “no” e frameBorder = “0” al codice di integrazione per rimuovere questa barra. Attenzione: Se rimuovi la barra di scorrimento della galleria, assicurati di impostare l'altezza in modo che i pulsanti di controllo non vengano tagliati.

Per far adattare il video alla dimensione della pagina, bisogna aggiungere " ?fluid=true " nell'iframe

<iframe src="https://my.tikee.io/videos/cc3dc6e1-862b-4132-b563-61c92ce0a60a?fluid=true" style="width: 100%; height: 100%; border: none;"></iframe>

 

2. Personalizzazione dei Colori dell'Iframe

puoi scegliere i colori del tuo iframe in questo modo:

  • primary_color: come “#090909” ma senza il “#” poiché stiamo usando un URL.

    • secondary_color: come “#090909” ma senza il “#” poiché stiamo usando un URL.

    • font_color: come “#090909” ma senza il “#” poiché stiamo usando un URL.

Passa questi parametri come faresti con qualsiasi parametro di query a un URL:

https://my.tikee.io/time_lapses/{…}/photo_gallery/{…}?lang=it&primary_color=5f9ea0&secondary_color=ff9800&font_color=db0b93

Tutti insieme:

<iframe src="https://my.tikee.io/time_lapses/{...}/photo_gallery/{...}?lang=en&primary_color=5f9ea0&secondary_color=ff9800&font_color=db0b93" allowfullscreen style="width: 100%; height: 100%; border: none" ></iframe>
3. Scelta dei Tipi di Visualizzatori nell'Iframe

Puoi scegliere i tipi di visualizzatori che desideri nel tuo iframe in questo modo:

  • default_tab: “singolo”, “confronta”, “immersivo”

    • singolo: modalità di panoramica normale

    • confronta: vista confronto prima-dopo

    • immersivo: vista immersiva con riproiezione

    • allowed_viewer_types: come “singolo”, “confronta”, “immersivo” separati da una virgola

/!\ Questi parametri funzionano insieme, non puoi usare “allowed_viewer_types” senza “default_tab”.

https://my.tikee.io/time_lapses/{…}/photo_gallery/{…}?lang=it&default_tab=immersivo&allowed_viewer_types=singolo,confronta,preferito,video

Tutti insieme:

<iframe src="https://my.tikee.io/time_lapses/{...}/photo_gallery/{...}?lang=en&default_tab=immersive&allowed_viewer_types=single,compare,favorite,video" allowfullscreen style="width: 100%; height: 100%; border: none" ></iframe>
4. Nascondere Pulsanti di Download

Puoi nascondere i pulsanti di download nel tuo iframe in questo modo:

  • hide_downloads: “vero”, “falso”

https://my.tikee.io/time_lapses/{…}/photo_gallery/{…}?lang=it&hide_downloads=true

Tutti insieme:

<iframe src="https://my.tikee.io/time_lapses/{...}/photo_gallery/{...}?lang=en&hide_downloads=true" allowfullscreen style="width: 100%; height: 100%; border: none" ></iframe>

5. Scelta della Lingua

Puoi scegliere la lingua del tuo visualizzatore iframe cambiando il parametro “lang”, i valori accettati sono “en” e “fr”.

Personalizzare gli iframe dei tuoi progetti timelapse di Tikee è un processo semplice che ti consente di controllare l'aspetto e la funzionalità delle tue gallerie sul tuo sito web. Regolando dimensioni, colori, tipi di visualizzatori e altri parametri, puoi integrare senza intoppi il tuo contenuto timelapse nella tua strategia di comunicazione online.

Per maggiori informazioni sulla soluzione Tikee e le sue applicazioni, visita il nostro sito web.

Hai bisogno di una dimostrazione personalizzata?

Per comprendere meglio la soluzione Tikee e per saperne di più prima di iniziare, ti offriamo di fissare un appuntamento individuale tramite videoconferenza.

Contattaci

Prima di contattarci, hai controllato la nostra FAQ?

Potresti trovare la tua risposta lì.

Modulo di contatto

Contattaci

Prima di contattarci, hai controllato la nostra FAQ?

Potresti trovare la tua risposta lì.

Modulo di contatto

Contattaci

Prima di contattarci, hai controllato la nostra FAQ?

Potresti trovare la tua risposta lì.

Modulo di contatto

Newsletter

Iscriviti alla nostra newsletter

Ricevi le ultime notizie, offerte esclusive, casi d'uso e consigli esperti registrandoti ora!