Comment personnaliser l'iframe de votre projet de timelapse ?

Avec la solution Tikee d'Enlaps et l'application web myTikee dédiée au timelapse, vous pouvez facilement intégrer votre projet de 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 pour personnaliser ces iframes afin d'optimiser l'affichage de votre projet de timelapse.

Accéder au Code d'Intégration Iframe

Pour trouver votre code iframe, allez à 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 à partir du code d'intégration. Souvent, lorsqu'une galerie est intégrée avec un iframe, il y a une barre de défilement par défaut si la galerie est plus grande que l'iframe. Pour éviter cela, deux options peuvent être ajoutées pour ajuster facilement l'iframe.

Une option est de changer la hauteur et la largeur de l'iframe pour correspondre à la galerie en modifiant les chiffres pour la hauteur et la largeur du code comme indiqué ci-dessous.

<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>

Vous pouvez également enlever 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, assurez-vous de régler la hauteur pour 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 de cette manière :

• 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 passeriez tout autre paramètre dans une URL :

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

Tout ensemble :

<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. Choisir les Types de Visionneuse dans l'Iframe

Vous pouvez choisir les types de visionneuse que vous souhaitez dans votre iframe de cette manière :

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

  • single: mode panoramique normal

  • compare: vue de comparaison 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

Tout ensemble :

<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>

5. Choisir la Langue

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

Personnaliser les iframes de vos projets de timelapse Tikee est un processus simple qui vous permet de contrôler l'apparence et la fonctionnalité de vos galeries sur votre site web. En ajustant les dimensions, les couleurs, les types de visionneuse et d'autres paramètres, vous pouvez intégrer de manière transparente votre contenu de timelapse dans votre stratégie de communication en ligne.

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