Novos Widgets de Instagram Story para Qualquer Site: Templates e Demos

Nossos clientes dizem que nossos widgets de Story são uma de suas formas favoritas de engajar visitantes do site.

Muitos utilizadores que desejam mostrar suas stories exatamente da mesma forma que o Instagram fazem dizem que os layouts de EmbedSocial os ajudaram a exibir graciosamente o conteúdo de stories para reforçar mensagens de marca com experiência de cliente real, explica Marija, nossa Gerente de Sucesso do Cliente.

Os utilizadores estão realmente impressionados com o quão fácil é configurar seu widget de Story em seus sites usando um código simples. O layout de story do Instagram pode reunir imagens, vídeos e texto em um fluxo visual bonito e animado que chama a atenção dos clientes imediatamente. Como dizem, traz completamente um próximo nível de conteúdo personalizado e se encaixa perfeitamente em qualquer experiência de site bem elaborada, e eles nem sequer precisam usar ferramentas como Adobe Photoshop para isso. Eles simplemente amam!

Marija Vlasceva, Agente de Sucesso do Cliente na EmbedSocial

Então decidimos surpreender nossos utilizadores atuais e futuros e desenvolver uma versão melhor e ultra-moderna de nossos templates de Story com mais capacidades de personalização à nossa disposição.

Focamos em atualizar os layouts antigos e adicionando elementos de design mais modernos aos nossos widgets. O objetivo principal era criar widgets de story bonitos e únicos que os utilizadores adorassem mostrar e incorporar em seus sites.

Além disso, implementamos melhorias no código, criamos flexibilidade para aplicar CSS personalizado por qualquer utilizador e padronizamos os elementos gerais do widget para que os layouts possam ter uma estrutura padrão.

Nevrie, nossa desenvolvedora, que trabalhou anteriormente na equipe de Sucesso do Cliente, liderou este projeto.

Pensávamos que ela era a pessoa certa para estar encarregada dessa renovação de template de story porque ela compreende completamente como os clientes pensam e o que procuram em widgets de Story. E estávamos certos.

Aconteceu que foi um brainstorming realmente frutífero quando você combina as opiniões de um designer de UX e um desenvolvedor Front End.

A batalha foi Melhorar os layouts antigos versus criar novos totalmente

Eles não poderiam estar satisfeitos com menos, então fizeram um compromisso para criar 10 novos layouts DO ZERO:

• 5 layouts para Widgets de Stories
• 5 layouts para Widgets de Story Gallery

Game on! Os widgets já estão disponíveis e em todos os planos de preço pagos.

O processo de design de novos widgets de story

Era um mês longo trabalhando nesta transformação.

A renovação foi dividida em alguns passos simples:

1. Angela, nossa designer de UX, está fazendo o design gráfico para as diferentes opções de template
2. Nevrie está fornecendo feedback, respondendo à seguinte pergunta: Os utilizadores serão provocados a clicar nisto?
3. Angela está implementando o feedback
4. Com base no design final, Nevrie está criando os widgets

Embora este processo funcionasse como um encanto, o desafio permaneceu: garantir que o widget ficaria ótimo em todos os dispositivos.

Nas palavras de Nevrie:

Era crítico trabalhar em um widget que seria incorporado no site de alguém porque você não pode saber de antemão qual será a marca que usará aquele widget. Você não pode saber como ficará em seu dispositivo móvel ou diferentes computadores desktop. Afinal, precisávamos garantir que o widget ficasse suave, independentemente do dispositivo que você usa.

Após um mês, Nevrie diz que está encantada com o resultado, e tem certeza de que os utilizadores vão AMAR!

E podemos ver por quê.

Confira o resultado final em ação, abaixo!

Novos Widgets de Story Único

Abaixo está um showcase dos novos widgets de story único. Esses widgets mostrarão sua última story e seus slides em layouts modernos como: Carrossel, Swiper, Slider, Popover e Destaque. Aqui estão os detalhes para cada um desses novos templates:

Widget Carrossel

Uso: Perfeito para páginas de produtos dedicados ou páginas iniciais

Características:

• Display responsivo e completo dos slides de story
• Selecione as Stories que deseja mostrar
• Arraste e solte para reordenar a aparência da Story
• Opções de ordem de mídia
• Formato de AMP Story
• Veja Stories em Lightbox
• Adicione um botão CTA a cada mídia de story ou a todos eles
• Use Bookend no final do widget
• Mostre título e navegação do widget
• Auto-sincronizar novas imagens ou vídeos
• Altere o layout, fonte, cor e título do widget
• Editor CSS personalizado
• Mostrar widget após story expirar

Widget Swiper

Uso: Layout moderno que fica ótimo em páginas iniciais ou landing pages

Características:

• Experiência de swipe responsiva “like Instagram”
• Selecione as Stories que deseja mostrar
• Arraste e solte para reordenar a aparência das Stories
• Opções de ordem de mídia
• Formato de AMP Story
• Adicione um botão CTA a cada mídia de story ou a todos eles
• Use Bookend no final do widget
• Mostre título e navegação do widget
• Auto-sincronizar novas imagens ou vídeos
• Altere o layout, fonte, cor e título do widget
• Editor CSS personalizado
• Mostrar widget após story expirar

Widget Slider

Uso: Funciona bem em barras laterais ou conteúdo de blog

Características:

• Experiência de swipe responsiva “like Instagram”
• Selecione as Stories que deseja mostrar
• Arraste e solte para reordenar a aparência da Story
• Opções de ordem de mídia
• Formato de AMP Story
• Adicione um botão CTA a cada mídia de story ou a todos eles
• Use Bookend no final do widget
• Mostre título e navegação do widget
• Auto-sincronizar novas imagens ou vídeos
• Altere o layout, fonte, cor e título do widget
• Editor CSS personalizado
• Mostrar widget após story expirar

Widget Popover

Uso: Aplicável para todas as páginas web - geralmente usado para incorporar o código no rodapé e ter a última story mostrada em todas as páginas em um banner flutuante fixo

Características:

• Widget de Story flutuante que, quando clicado, fornece a experiência familiar de deslizamento de mídia social
• Selecione as Stories que deseja mostrar
• Arraste e solte para reordenar a aparência da Story
• Opções de ordem de mídia
• Formato de AMP Story
• Adicione um botão CTA a cada mídia de story ou a todos eles
• Use Bookend no final do widget
• Mostre título e navegação do widget
• Altere a posição e timeout do popup
• Auto-sincronizar novas imagens ou vídeos
• Altere o layout, fonte, cor e título do widget
• Editor CSS personalizado
• Mostrar widget após story expirar

Demo:

Widget Destaque

Uso: Similar ao Popover, este layout pode ser usado em Barras Laterais, páginas de produtos específicas, dentro de descrições ou outros posicionamentos inovadores onde os utilizadores precisarão de uma versão menor do Story que é ativada em ecrã inteira após um clique

Características:

• Widget de Story flutuante que quando clicado, fornece a experiência familiar de deslizamento de mídia social
• Selecione as Stories que deseja mostrar
• Arraste e solte para reordenar a aparência da Story
• Opções de ordem de mídia
• Formato de AMP Story
• Adicione um botão CTA a cada mídia de story ou a todos eles
• Use Bookend no final do widget
• Mostre título e navegação do widget
• Altere a posição e timeout do popup
• Auto-sincronizar novas imagens ou vídeos
• Altere o layout, fonte, cor e título do widget
• Editor CSS personalizado
• Mostrar widget após story expirar

Para ter um olhar mais aprofundado sobre os widgets de story único, clique no link abaixo para demos ao vivo:

Demos: Widgets de Story Único →

Novos Widgets de Galeria

A plataforma EmbedSocial permite combinar stories de diferentes datas e criar um widget como uma galeria que exibirá múltiplas stories. Para estilizar a aparência dos widgets, abaixo estão os novos templates que você pode escolher:

Galeria Slider

Uso: Mostre exemplos práticos ou conteúdo gerado pelo utilizador para conteúdo de blog ou em barras laterais

Características:

• Experiência de slideshow responsiva e avançada
• Defina um botão Call to Action a cada um deles ou a toda mídia de story na galeria
• Selecione manualmente as stories que deseja mostrar na galeria
• Selecione as stories e a ordem de mídia
• Opção para reproduzir automaticamente thumbs, slider e vídeos
• Opção para mostrar paginação, navegação, data e nome de utilizador
• Altere o layout, título, tamanho, fonte ou cor do slider
• Editor CSS personalizado

Galeria Destaques

Uso: Funciona melhor para páginas de produtos ou em barras laterais quando os utilizadores precisam de um widget de Story menor que, uma vez clicado, abre em ecrã inteira

Características:

• Experiência de highlights responsiva e like Instagram
• Defina um botão Call to Action a cada um deles ou a toda mídia de story na galeria
• Selecione manualmente as stories que deseja mostrar na galeria
• Selecione o número de miniaturas
• Opção para reproduzir automaticamente lightbox, thumbs, slider e vídeos
• Opção para mostrar paginação, navegação, data, imagem de origem e nome de utilizador
• Altere o layout, título, tamanho, fonte ou cor do slider
• Editor CSS personalizado

Galeria Lista

Uso: Similar ao Destaques, funciona melhor para fazer up-sell e cross-sell em páginas de produtos ou mostrar conteúdo gerado pelo utilizador

Características:

• Experiência de highlights responsiva e like Instagram (vertical)
• Defina um botão Call to Action a cada um deles ou a toda mídia de story na galeria
• Selecione manualmente as stories que deseja mostrar na galeria
• Selecione o número de miniaturas
• Opção para reproduzir automaticamente thumbs, lightbox e vídeos
• Opção para mostrar paginação, navegação, data e nome de utilizador
• Altere o layout, título, tamanho, fonte ou cor do slider
• Editor CSS personalizado

Galeria Swiper

Uso: Layout moderno para páginas iniciais ou landing pages visualmente atraentes

Características:

• Experiência de slider responsiva
• Defina um botão Call to Action a cada um deles ou a toda mídia de story na galeria
• Selecione manualmente as stories que deseja mostrar na galeria
• Opção para reproduzir automaticamente thumbs, lightbox e vídeos
• Opção para mostrar paginação, navegação, data, imagem de origem e nome de utilizador
• Altere o layout, título, tamanho, fonte ou cor do slider
• Editor CSS personalizado

Galeria Carrossel

Uso: Funciona bem em páginas iniciais e páginas de produtos dedicadas

Características:

• Experiência de slider responsiva
• Defina um botão Call to Action a cada um deles ou a toda mídia de story na galeria
• Selecione manualmente as stories que deseja mostrar na galeria
• Opção para reproduzir automaticamente thumbs, lightbox e vídeos
• Opção para mostrar paginação, navegação, data, imagem de origem e nome de utilizador
• Altere o layout, título, tamanho, fonte ou cor do slider
• Editor CSS personalizado

Como você pode ver, eles estão prontos para ir.

Isso significa apenas uma coisa: é hora de ação! Confira os demos abaixo de todos os Templates de Galeria para suas Stories.

Demos: Templates de Galeria de Stories →

Aplicabilidade de Novos Widgets

Como você pode ver, cada template de story tem sua própria aplicabilidade única. Cabe a você decidir qual design se encaixa melhor com a interface do seu site.

Aqui estão algumas sugestões que você pode considerar:

Página Inicial

Instagram stories são conteúdo perfeito para páginas iniciais. É um dos formatos mais recentes que levará seu design web para um estágio muito mais envolvente e moderno, dando aos visitantes da web componentes mais únicos para se engajar.

Página de Produto

Um ótimo exemplo de usar o widget de story com um template Popover. Este widget flutuante mostrará conteúdo sobre o produto em um layout de story que dá aos clientes uma maneira fresca e única de se engajar e possivelmente comprar.

Landing Page

Neste exemplo, exibimos o widget galeria Destaques incorporado em uma página de Categoria. É um showcase de product stories que os utilizadores visitando esta página podem facilmente navegar e se engajar em um formato mais imersivo. Isso pode resultar em uma possibilidade maior de clicar nas opções de call to action e comprar o produto.

Se você já está imaginando os widgets em seu site, role abaixo para descobrir como começar.

Por favor, note que a plataforma EmbedSocial está sempre atualizada com as mais recentes mudanças de API do Instagram. Isso significa que os utilizadores podem continuar usando o Instagram para gerar e exibir feeds do Instagram e stories em seus sites.

Começando com os novos templates

Os novos templates já estão disponíveis para todos os utilizadores da EmbedSocial. Para aplicá-los e incorporá-los em seu site agora, siga os passos abaixo:

1. Faça login em sua conta EmbedSocial
2. Conecte a conta Facebook que está vinculada ao seu perfil do Instagram para gerar as stories (se você ainda não criou um widget)
3. Vá para Widgets, escolha o perfil do Instagram e clique em “Criar widget”.
4. Na visualização de edição, navegue até a opção Layout e Design para personalizar seu widget
5. Na configuração “Layouts” estão todos os templates onde você pode selecionar o template de story que melhor se adequa a você
6. Copie o código HTML do canto superior direito e cole no seu website na seção do corpo

Aqui está uma captura de ecrã, onde você pode encontrar os novos widgets. Abra a alternância “Layout and Design” no painel Configurações, e em “Layouts”, escolha o novo template da lista suspensa. As alterações aparecerão imediatamente na seção “Preview” do lado esquerdo. Para aplicar as alterações a um widget já incorporado, basta clicar em “Salvar”.

Repita os mesmos passos para os Widgets de Galeria, com apenas uma exceção: ao invés de Widgets, vá para o menu Galeria no menu principal do lado esquerdo.

Aqui está um tutorial detalhado passo a passo com capturas de ecrã sobre como incorporar Instagram Stories em seu site hoje.

Por favor, note que EmbedSocial é a primeira plataforma que tem a funcionalidade para gerar Instagram stories. Todos os novos widgets funcionam perfeitamente em qualquer aplicação baseado na web que suporte incorporação de JavaScript ou iframe, plataformas de eCommerce ou qualquer construtor web, como WordPress.

Próximas novidades…

Ainda não terminaremos.

Dê uma espiada no que vem a seguir em nosso roteiro para nossa ferramenta EmbedSocial tudo-em-um:

• Funcionalidade melhorada nos recursos de upload
• Moderação melhor que trará flexibilidade para combinar stories de várias fontes em um widget
• Novos widgets de Destaques

Adoraríamos ouvir suas sugestões sobre como melhorar ainda mais nossos widgets, então sinta-se livre para nos enviar uma mensagem.

Até lá, feliz incorporação!