blog-iframe

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

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

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

4 minutes

💡

💡 Conclusiones clave sobre el Timelapse

Conclusiones clave: Cómo personalizar los Iframes de myTikee para integrarlos en páginas web

  • Integración instantánea y adaptabilidad: genere fácilmente códigos de inserción iframe personalizables a través de Proyecto > Compartir, y añada ?fluid=true directamente en la URL para asegurarse de que su reproductor se adapte de forma responsiva a todos los tamaños de pantalla.


  • Diseño de reproductor refinado: ajuste con precisión las dimensiones del reproductor directamente en el código. Puede eliminar barras de desplazamiento y bordes molestos añadiendo scrolling="no" y frameBorder="0" (solo asegúrese de configurar la altura lo suficientemente alta para que los botones de control no queden cortados).


  • Personalización de colores de marca: adapte la interfaz del visor a la imagen de su empresa añadiendo los códigos hexadecimales primary_color, secondary_color y font_color a la cadena de la URL, omitiendo el símbolo "#".


  • Modos de visualización a medida: seleccione la vista inicial de sus visitantes utilizando el parámetro default_tab (elija entre panorámica single, deslizador de comparación antes/después compare, o vista de proyección inmersiva immersive) y restrinja las pestañas de navegación mediante allowed_viewer_types.


  • Control de seguridad y localización: proteja sus imágenes cambiando a hide_downloads=true para eliminar las opciones de descarga del reproductor público, y adapte la interfaz de usuario al idioma de su audiencia definiendo el parámetro lang como en o fr.

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.

¿Necesitas una demostració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í.

Formulario de contacto

Contáctenos

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

Podría encontrar su respuesta ahí.

Formulario de contacto

Contáctenos

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

Podría encontrar su respuesta ahí.

Formulario de contacto

Newsletter

Regístrate en nuestro Newsletter

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