blog-iframe

¿Cómo personalizar el iframe de tu proyecto de timelapse?

Public Space

4 minutes


Con la solución Tikee de Enlaps y la aplicación web myTikee dedicada al timelapse, puedes integrar fácilmente tu proyecto de timelapse en tu sitio web con solo un clic. Ya sea que quieras agregar un video panorámico, una comparación de antes y después, o una galería de imágenes, tienes acceso a enlaces iframe personalizables. Este tutorial te guía a través de los pasos para personalizar estos iframes y optimizar la visualización de tu proyecto de timelapse.

Accediendo al Código de Integración Iframe

Para encontrar tu código iframe, ve al índice del proyecto:

  1. Ve a Proyecto.

  2. Haz clic en Compartir.

1. Modificar el Tamaño del Iframe

El código de incrustación del iFrame se puede personalizar fácilmente directamente desde el código incrustado. A menudo, cuando una galería se incrusta con un iframe, hay una barra de desplazamiento predeterminada si la galería es más grande que el iframe. Para evitar esto, hay dos opciones que se pueden agregar para ajustar fácilmente el iframe.

Una opción es cambiar la altura y el ancho del iframe para que coincida con la galería cambiando los números de la altura y el ancho del código como se muestra a continuación.

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

También puedes eliminar el borde y la barra de desplazamiento. Puedes agregar scrolling = "no" y frameBorder = "0" al código de incrustación para eliminar esta barra. Cuidado: Si eliminas la barra de desplazamiento de la galería, asegúrate de establecer la altura para que los botones de control no se corten.

Para que el video se adapte al tamaño de la página, se debe agregar " ?fluid=true " en el iframe

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

 

2. Personalizar los Colores del Iframe

Puedes elegir los colores de tu iframe de la siguiente manera:

  • primary_color: como “#090909” pero sin el “#” ya que estamos utilizando una URL.

    • secondary_color: como “#090909” pero sin el “#” ya que estamos utilizando una URL.

    • font_color: como “#090909” pero sin el “#” ya que estamos utilizando una URL.

Pasa estos parámetros como pasarías cualquier parámetro de consulta a una URL:

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

Todo junto:

<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. Elegir Tipos de Visualización en el Iframe

Puedes elegir los tipos de visualización que quieres en tu iframe de la siguiente manera:

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

    • single: modo de paneo normal

    • compare: vista de comparación de antes y después

    • immersive: vista inmersiva con reproyección

    • allowed_viewer_types: como “single”, “compare”, “immersive” separados por una coma

/!\ Estos parámetros funcionan juntos, no puedes usar “allowed_viewer_types” sin “default_tab”.

https://my.tikee.io/time_lapses/{…}/photo_gallery/{…}?lang=es&default_tab=imm-Mercado&allowed_viewer_types=single,compare,favorite,video

Todo junto:

<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. Ocultar los Botones de Descarga

Puedes ocultar los botones de descarga en tu iframe de la siguiente manera:

  • hide_downloads: “true”, “false”

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

Todo junto:

<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. Elegir el Idioma

Puedes elegir el idioma de tu visualizador iframe cambiando el parámetro “lang”, los valores aceptados son “en” y “fr”.

Personalizar los iframes de tus proyectos de timelapse Tikee es un proceso sencillo que te permite controlar la apariencia y funcionalidad de tus galerías en tu sitio web. Ajustando dimensiones, colores, tipos de visualización y otros parámetros, puedes integrar de manera fácil y atractiva tu contenido de timelapse en tu estrategia de comunicación en línea.

Para más información sobre la solución Tikee y sus aplicaciones, visita nuestro sitio web.

Newsletter

Regístrate en nuestro Newsletter

¡Obtenga las últimas noticias, ofertas exclusivas, casos de uso y consejos de expertos al registrarse ahora!

Necesita una demonstración personalizada

Para entender mejor la solución Tikee y para aprender más antes de comenzar, le ofrecemos programar una cita individual, por videoconferencia.

Contáctenos

¿Antes de contactarnos, ha revisado nuestras Preguntas Frecuentes (FAQ)?

Podría encontrar su respuesta ahí.

Tienda en línea

Español