Nuevos widgets de historias de Instagram para cualquier sitio web: Plantillas y demostraciones

Nuestros clientes dicen que nuestros widgets de Historia son una de sus formas favoritas para atraer a los visitantes del sitio web.

Muchos usuarios que desean mostrar sus historias exactamente de la misma manera que lo hace Instagram dicen que los diseños de EmbedSocial los ayudaron a mostrar el contenido de historias con elegancia para reforzar el mensaje de marca con experiencia de cliente real, explica Marija, nuestra Gerente de Éxito del Cliente.

Los usuarios están verdaderamente sin palabras sobre lo fácil que es configurar su widget de Historia en sus sitios web usando un código simple. El diseño de la historia de Instagram puede reunir imágenes, video y texto en un flujo visual hermoso y animado que llama la atención de los clientes de inmediato. Como dicen, trae un nivel completamente siguiente de contenido personalizado y se ajusta perfectamente a cualquier experiencia de sitio web bien elaborado, e incluso no necesitan usar herramientas como Adobe Photoshop para lograr eso. ¡Simplemente lo aman!

Marija Vlasceva, Agente de Éxito del Cliente en EmbedSocial

Así que decidimos sorprender a nuestros usuarios actuales y futuros y desarrollar una versión mejor y ultra moderna de nuestras plantillas de Historia con más capacidades de personalización a nuestro alcance.

Nos enfocamos en actualizar los diseños antiguos y agregar más elementos de diseño modernos a nuestros widgets. El objetivo principal fue crear widgets de historia hermosos y únicos que a los usuarios les encantaría mostrar e incrustar en sus sitios web.

Además, implementamos algunas mejoras en el código, creamos flexibilidad para aplicar CSS personalizado por cualquier usuario y estandarizamos los elementos generales del widget para que los diseños tengan una estructura estándar.

Nevrie, nuestra desarrolladora, que anteriormente trabajó en el equipo de Éxito del Cliente, lideró este proyecto.

Pensamos que ella era la persona adecuada para estar a cargo de esta transformación de plantillas de historia porque entiende completamente cómo piensan los clientes y qué buscan en widgets de Historia. Y tuvimos razón.

Resultó ser una lluvia de ideas realmente veraz cuando combinas las opiniones de un diseñador de UX y un desarrollador de interfaz frontal.

La batalla fue mejorar los diseños antiguos vs. crear otros completamente nuevos

No podían conformarse con menos, así que hicieron un compromiso para crear 10 diseños nuevos DESDE CERO:

• 5 diseños para widgets de historias
• 5 diseños para widgets de historia de galería

¡Que comience el juego! Los widgets están disponibles ahora y en todos los planes de precios pagados.

El proceso de diseño de nuevos widgets de historia

Fue un largo mes trabajando en esta transformación.

La transformación se dividió en algunos pasos simples:

1. Angela, nuestra diseñadora de UX, está haciendo el diseño gráfico para las diferentes opciones de plantilla
2. Nevrie está dando comentarios, respondiendo la siguiente pregunta. ¿Se sentirán motivados los usuarios a hacer clic en esto?
3. Angela está implementando los comentarios
4. Basado en el diseño final, Nevrie está creando los widgets

Aunque este proceso funcionó como un encanto, el desafío se mantuvo. asegurar que el widget se viera genial en todos los dispositivos.

En palabras de Nevrie:

Era crítico trabajar en un widget que se incrustará en el sitio web de alguien porque no puedes saber de antemano cuál será la marca que usará ese widget. No puedes saber cómo se verá en su dispositivo móvil o diferentes computadoras de escritorio. Después de todo, necesitábamos asegurar que el widget se viera suavemente sin importar el dispositivo que uses.

Después de un mes, Nevrie dice que está encantada con el resultado, ¡y está segura de que los usuarios los AMARÁN!

Y podemos ver por qué.

¡Echa un vistazo al resultado final en acción a continuación!

Nuevos widgets de historia única

A continuación se muestra una presentación de los nuevos widgets de historia única. Estos widgets mostrarán tu última historia y sus diapositivas en diseños modernos como. Carrusel, Deslizador de barrido, Deslizador, Popover y Destacado. Aquí están los detalles para cada una de estas nuevas plantillas:

Widget de carrusel

Uso: Perfecto para páginas de productos dedicados o páginas de inicio

Características:

• Visualización responsive y completa de las diapositivas de la historia
• Selecciona las historias que deseas mostrar
• Arrastra y suelta para reordenar la aparición de la Historia
• Opciones de orden de medios
• Formato de historia AMP
• Ver historias en Caja de luz
• Agrega un botón CTA a cada medio de historia o a todos ellos
• Usa Bookend al final del widget
• Mostrar título del widget y navegación
• Sincronización automática de nuevas imágenes o videos
• Cambiar el diseño, fuente, color y título del widget
• Editor CSS personalizado
• Mostrar widget después de que expira la historia

Widget de deslizador de barrido

Uso: Diseño moderno que se ve genial en páginas de inicio o páginas de destino

Características:

• Experiencia de deslizamiento “similar a Instagram” responsiva
• Selecciona las historias que deseas mostrar
• Arrastra y suelta para reordenar la aparición de las Historias
• Opciones de orden de medios
• Formato de historia AMP
• Agrega un botón CTA a cada medio de historia o a todos ellos
• Usa Bookend al final del widget
• Mostrar título del widget y navegación
• Sincronización automática de nuevas imágenes o videos
• Cambiar el diseño, fuente, color y título del widget
• Editor CSS personalizado
• Mostrar widget después de que expira la historia

Widget de deslizador

Uso: Funciona muy bien para barras laterales o contenido de blog

Características:

• Experiencia de deslizamiento “similar a Instagram” responsiva
• Selecciona las historias que deseas mostrar
• Arrastra y suelta para reordenar la aparición de la Historia
• Opciones de orden de medios
• Formato de historia AMP
• Agrega un botón CTA a cada medio de historia o a todos ellos
• Usa Bookend al final del widget
• Mostrar título del widget y navegación
• Sincronización automática de nuevas imágenes o videos
• Cambiar el diseño, fuente, color y título del widget
• Editor CSS personalizado
• Mostrar widget después de que expira la historia

Widget Popover

Uso: Aplicable en todas las páginas web - generalmente se usa para incrustar el código en el pie de página y tener la última historia mostrada en todas las páginas en un banner flotante fijo

Características:

• Widget de Historia flotante que, cuando se hace clic, proporciona la experiencia familiar de deslizamiento de medios sociales
• Selecciona las historias que deseas mostrar
• Arrastra y suelta para reordenar la aparición de la Historia
• Opciones de orden de medios
• Formato de historia AMP
• Agrega un botón CTA a cada medio de historia o a todos ellos
• Usa Bookend al final del widget
• Mostrar título del widget y navegación
• Cambiar la posición y tiempo de espera del popup
• Sincronización automática de nuevas imágenes o videos
• Cambiar el diseño, fuente, color y título del widget
• Editor CSS personalizado
• Mostrar widget después de que expira la historia

Demostración:

Widget de destaque

Uso: Similar a Popover, este diseño se puede usar en Barras laterales, páginas de productos específicos, dentro de descripciones u otros colocaciones innovadoras donde los usuarios necesitarán una versión más pequeña de la Historia que se activa a pantalla completa al hacer clic

Características:

• Widget de Historia flotante que al hacer clic proporciona la experiencia familiar de deslizamiento de medios sociales
• Selecciona las historias que deseas mostrar
• Arrastra y suelta para reordenar la aparición de la Historia
• Opciones de orden de medios
• Formato de historia AMP
• Agrega un botón CTA a cada medio de historia o a todos ellos
• Usa Bookend al final del widget
• Mostrar título del widget y navegación
• Cambiar la posición y tiempo de espera del popup
• Sincronización automática de nuevas imágenes o videos
• Cambiar el diseño, fuente, color y título del widget
• Editor CSS personalizado
• Mostrar widget después de que expira la historia

Para una mirada más profunda en los widgets de una sola historia, haz clic en el enlace a continuación para demostraciones en vivo:

Demostraciones: Widgets de historia única →

Nuevos widgets de galería

La plataforma EmbedSocial permite combinar historias de diferentes fechas y crear un widget como una galería que mostrará múltiples historias. Para diseñar la apariencia de los widgets, a continuación se encuentran las nuevas plantillas que puedes elegir:

Deslizador de galería

Uso: Muestra ejemplos prácticos o contenido generado por usuarios para contenido de blog o en barras laterales

Características:

• Experiencia de presentación de diapositivas responsive de próximo nivel
• Establece un botón de llamada a la acción para cada uno o todos los medios de historia en la galería
• Selecciona manualmente las historias que deseas mostrar en la galería
• Selecciona el orden de historias y medios
• Opción para reproducción automática de miniaturas, deslizador y videos
• Opción para mostrar paginación, navegación, fecha y nombre de usuario
• Cambia el deslizador, título, tamaño, fuente o color
• Editor CSS personalizado

Galería de destacados

Uso: Funciona mejor en páginas de productos o en barras laterales cuando los usuarios necesitan un widget de Historia más pequeño que, una vez hecho clic, se abre a pantalla completa

Características:

• Experiencia de destacados responsive similar a Instagram
• Establece un botón de llamada a la acción para cada uno o todos los medios de historia en la galería
• Selecciona manualmente las historias que deseas mostrar en la galería
• Selecciona el número de miniaturas
• Opción para reproducción automática de caja de luz, miniaturas, deslizador y videos
• Opción para mostrar paginación, navegación, fecha, imagen de origen y nombre de usuario
• Cambia el deslizador, título, tamaño, fuente o color
• Editor CSS personalizado

Galería de lista

Uso: Similar a los destacados, funciona mejor para vender adicional y ventas cruzadas en páginas de productos o mostrar contenido generado por usuarios

Características:

• Experiencia de destacados responsiva similar a Instagram (vertical)
• Establece un botón de llamada a la acción para cada uno o todos los medios de historia en la galería
• Selecciona manualmente las historias que deseas mostrar en la galería
• Selecciona el número de miniaturas
• Opción para reproducción automática de miniaturas, caja de luz y videos
• Opción para mostrar paginación, navegación, fecha y nombre de usuario
• Cambia el deslizador, título, tamaño, fuente o color
• Editor CSS personalizado

Galería de deslizador de barrido

Uso: Diseño moderno para páginas de inicio o páginas de destino visualmente atractivas

Características:

• Experiencia de deslizador responsiva
• Establece un botón de llamada a la acción para cada uno o todos los medios de historia en la galería
• Selecciona manualmente las historias que deseas mostrar en la galería
• Opción para reproducción automática de miniaturas, caja de luz y videos
• Opción para mostrar paginación, navegación, fecha, imagen de origen y nombre de usuario
• Cambia el deslizador, título, tamaño, fuente o color
• Editor CSS personalizado

Galería de carrusel

Uso: Funciona muy bien en páginas de inicio y páginas de productos dedicados

Características:

• Experiencia de deslizador responsiva
• Establece un botón de llamada a la acción para cada uno o todos los medios de historia en la galería
• Selecciona manualmente las historias que deseas mostrar en la galería
• Opción para reproducción automática de miniaturas, caja de luz y videos
• Opción para mostrar paginación, navegación, fecha, imagen de origen y nombre de usuario
• Cambia el deslizador, título, tamaño, fuente o color
• Editor CSS personalizado

Como puedes ver, están listos para funcionar.

Esto significa una sola cosa. ¡Es hora de actuar! Echa un vistazo a las demostraciones de abajo de todas las plantillas de galería para tus Historias.

Demostraciones: Plantillas de galería de historias →

Aplicabilidad de nuevos widgets

Como puedes ver, cada plantilla de historia tiene su propia aplicabilidad única. Depende de ti decidir qué diseño se ajustará mejor a la interfaz de tu sitio web.

Aquí hay algunas sugerencias que podrías considerar:

Página de inicio

Las historias de Instagram son el contenido perfecto para páginas de inicio. Es uno de los últimos formatos que llevarán tu diseño web a una etapa mucho más atractiva y moderna, dando a los visitantes de tu sitio web más componentes únicos con los que participar.

Página de producto

Un excelente ejemplo de usar el widget de historia con una plantilla Popover. Este widget flotante mostrará contenido sobre el producto en un diseño de historia que proporciona a los clientes una forma fresca y única de participar y posiblemente comprar.

Página de destino

En este ejemplo, mostramos el widget de galería de destaque incrustrustado en una página de categoría. Es una presentación de historias de productos que los usuarios que visitan esta página pueden buscar y participar fácilmente en un formato más inmersivo. Esto puede resultar en una mayor posibilidad de hacer clic en las opciones de llamada a la acción y comprar el producto.

Si ya estás imaginando los widgets en tu sitio web, desplázate hacia abajo para descubrir cómo puedes comenzar.

Ten en cuenta que la plataforma EmbedSocial siempre está actualizada con los últimos cambios de API de Instagram. Esto significa que los usuarios pueden continuar usando Instagram para generar y mostrar feeds e historias de Instagram en sus sitios web.

Comenzar con las nuevas plantillas

Las nuevas plantillas ya están disponibles para todos los usuarios de EmbedSocial. Para aplicarlas e incrustarlas en tu sitio web en este momento, sigue los pasos de abajo:

1. Inicia sesión en tu cuenta de EmbedSocial
2. Conecta la cuenta de Facebook que está vinculada con el perfil de Instagram para generar las historias (si aún no has creado un widget)
3. Vaya a Widgets, elija el perfil de Instagram y haga clic en ‘Crear widget’.
4. En la vista de edición, navegue hasta la opción Diseño y diseño para personalizar tu widget
5. En la configuración de ‘Diseños’ están todas las plantillas donde puedes seleccionar la plantilla de historia que mejor se adapte a ti
6. Copia el código HTML de la esquina superior derecha y pégalo en tu sección del cuerpo de tu sitio web

Aquí hay una captura de pantalla donde puedes encontrar los nuevos widgets. Abre el botón de alternar ‘Diseño y diseño’ en el panel Configuración, y en ‘Diseños’, elige la nueva plantilla de la lista desplegable. Los cambios aparecerán inmediatamente en la sección ‘Vista previa’ de la izquierda. Para aplicar los cambios a un widget ya incrustado, simplemente haz clic en ‘Guardar’.

Repite los mismos pasos para los widgets de galería, con solo una excepción. en lugar de Widgets, ve al menú Galería del menú principal de la izquierda.

Aquí hay un tutorial paso a paso detallado con capturas de pantalla sobre cómo incrustar historias de Instagram en tu sitio web hoy.

Por favor nota que EmbedSocial es la primera plataforma que tiene la funcionalidad para generar historias de Instagram. Todos los nuevos widgets funcionan perfectamente en cualquier aplicación basada en web que admita JavaScript o incrustación de iframe, plataformas de comercio electrónico o cualquier constructor web, como WordPress.

Próximamente…

Aún no hemos terminado.

Echa un vistazo a lo siguiente en nuestro plan de ruta para nuestra herramienta todo en uno EmbedSocial:

• Funcionalidad mejorada en las características de carga
• Mejor moderación que traerá flexibilidad para combinar historias de varias fuentes en un widget
• Nuevos widgets de destaque

Nos encantaría escuchar tus sugerencias sobre cómo mejorar nuestros widgets aún más, así que siéntete libre de enviarnos un mensaje.

Hasta entonces, ¡feliz incrustación!