Avec la solution Tikee d'Enlaps et l'application web myTikee dédiée au timelapse, vous pouvez facilement intégrer votre projet timelapse sur votre site web en un seul clic. Que vous souhaitiez ajouter une vidéo panoramique, une comparaison avant-après ou une galerie d'images, vous avez accès à des liens iframe personnalisables. Ce tutoriel vous guide à travers les étapes de personnalisation de ces iframes afin d'optimiser l'affichage de votre projet timelapse.

Accéder au code d'intégration de l'Iframe

Pour trouver votre code iframe, accédez à l'index du projet :

1. Allez dans Projet.

2. Cliquez sur Partager.

1. Modifier la taille de l'Iframe

Le code d'intégration de l'iFrame peut être facilement personnalisé directement depuis le code de partage. Souvent, lorsqu'une galerie est intégrée avec une iframe, une barre de défilement par défaut apparaît si la galerie est plus grande que l'iframe. Afin d'éviter cela, deux options peuvent être ajoutées pour ajuster facilement l'iframe.

Une option consiste à modifier la hauteur et la largeur de l'iframe pour correspondre à la galerie en changeant les valeurs de hauteur et de largeur dans le code comme indiqué ci-dessous.

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

Vous pouvez également supprimer la bordure et la barre de défilement. Vous pouvez ajouter scrolling = “no” et frameBorder = “0” au code d'intégration pour supprimer cette barre. Attention : si vous supprimez la barre de défilement de la galerie, veillez à configurer la hauteur afin que les boutons de contrôle ne soient pas coupés.

Pour que la vidéo s'adapte à la taille de la page, il faut ajouter " ?fluid=true " dans l'iframe.

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

2. Personnaliser les couleurs de l'Iframe

Vous pouvez choisir les couleurs de votre iframe ainsi :

• primary_color: comme “#090909” mais sans le “#” car nous utilisons une URL.

  • secondary_color: comme “#090909” mais sans le “#” car nous utilisons une URL.

  • font_color: comme “#090909” mais sans le “#” car nous utilisons une URL.

Passez ces paramètres comme vous le feriez pour n'importe quel paramètre de requête à une URL :

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

Le code complet :

<iframe src="https://my.tikee.io/time_lapses/{...}/photo_gallery/{...}?lang=fr&primary_color=5f9ea0&secondary_color=ff9800&font_color=db0b93" allowfullscreen style="width: 100%; height: 100%; border: none" ></iframe>

3. Choisir les modes de visualisation dans l'Iframe

Vous pouvez choisir les types de visualiseur que vous souhaitez dans votre iframe comme ceci :

• default_tab: “single”, “compare”, “immersive”

  • single : mode panoramique classique

  • compare : vue comparative avant-après

  • immersive : vue immersive avec reprojection

  • allowed_viewer_types: comme “single”, “compare”, “immersive” séparés par une virgule

/!\ Ces paramètres fonctionnent ensemble, vous ne pouvez pas utiliser “allowed_viewer_types” sans “default_tab”.

https://my.tikee.io/time_lapses/{…}/photo_gallery/{…}?lang=fr&default_tab=immersive&allowed_viewer_types=single,compare,favorite,video

Le code complet :

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

4. Masquer les boutons de téléchargement

Vous pouvez masquer les boutons de téléchargement dans votre iframe ainsi :

• hide_downloads: “true”, “false”

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

Le code complet :

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

5. Choisir la langue

Vous pouvez choisir la langue du visualiseur de votre iframe en modifiant le paramètre “lang”, les valeurs acceptées sont “en” et “fr”.

La personnalisation des iframes de vos projets timelapse Tikee est un processus simple qui vous permet de contrôler l'apparence et les fonctionnalités de vos galeries sur votre site web. En ajustant les dimensions, les couleurs, les modes de visualisation et d'autres paramètres, vous pouvez intégrer harmonieusement vos contenus timelapse dans votre stratégie de communication en ligne.

Pour plus d'informations sur la solution Tikee et ses applications, visitez notre site web.