Menu
Feedback
Comece aqui
Tutoriais
Portal do desenvolvedor

Problemas conhecidos
Diretivas de suporte
Troubleshooting

Perguntas frequentes
Comunicados
Tutoriais
Tutoriais
Explore tutoriais detalhados para operar sua loja VTEX.
Tutoriais
Apps
Live Shopping
Live Shopping: Eventos
Live Shopping: Eventos
13 min de leitura

Nesta seção, você aprenderá a criar e gerenciar eventos de transmissão ao vivo usando o aplicativo Live Shopping.

Criar novo evento

Para criar um novo evento de transmissão ao vivo, siga os passos a seguir:

  1. Acesse no Admin VTEX Aplicativos > Live Shopping > Eventos.
  2. Clique em Novo para criar um novo evento de transmissão ao vivo.
  3. Preencha os campos a seguir de acordo com as instruções abaixo:
  • Nome do evento: nome do evento que está sendo criado.
  • UTM Source: parâmetros de rastreamento adicionados à sua URL, que ajudam a rastrear e analisar o tráfego de diferentes fontes.
  • (Opcional) ID da coleção: ID da coleção de produtos a ser anexada ao evento de transmissão ao vivo. Essa funcionalidade incentiva os clientes a adicionar mais produtos ao carrinho da loja.
  • (Opcional) Horário do evento: informações internas sobre a data e a hora do evento que ajudam a identificar facilmente o evento na lista Eventos.
  • Opcional) Categoria do evento: categoria que melhor se encaixa ao evento para facilitar a identificação na lista Eventos.
  1. Clique em Salvar alterações para criar o evento.

Depois de criar o evento, você pode começar a se preparar para uma sessão de transmissão ao vivo que seja engajante e de sucesso, personalizando vários aspectos do evento. Aproveite as opções de personalização disponíveis para adaptar o layout do reprodutor de mídia da transmissão ao vivo, configurar promoções de eventos, gerenciar o chat ao vivo e customizar a exibição do produto em destaque.

Personalizar o reprodutor de mídia do Live Shopping

Você pode personalizar o reprodutor de mídia do Live Shopping para atender às suas necessidades e ter as funcionalidades que deseja. Siga os passos abaixo para escolher as opções do reprodutor de mídia:

Tipo de layout

Para selecionar o estilo de layout para a transmissão de seu evento ao vivo, siga os passos a seguir:

  1. Na lista de eventos, encontre o evento desejado e clique na seta na coluna Ações.
  2. Na seção Tipo de layout, escolha o layout desejado para a transmissão do seu evento ao vivo:
  • Transmissão horizontal (16:9): permite uma visualização horizontal otimizada para desktop.
  • Transmissão vertical (9:16): permite uma visualização vertical otimizada para telas de dispositivos móveis.

Configuração do CMS

Para selecionar as funcionalidades disponíveis em sua transmissão de evento ao vivo, siga os passos a seguir:

  1. Na lista de eventos, encontre o evento desejado e clique na seta na coluna Ações.
  2. Na seção Configuração do CMS, selecione as funcionalidades que desejar para sua transmissão ao vivo:
  • Produtos da barra lateral: exibe uma barra lateral com os produtos selecionados localizada na lateral do reprodutor de mídia.
  • Carrossel de produtos: exibe um carrossel de produtos em destaque localizado na parte inferior do reprodutor de mídia durante o evento ao vivo.
  • Chat: permite que os usuários interajam e se comuniquem durante o evento ao vivo.
  • Curtida: permite que os usuários interajam com o conteúdo da transmissão ao vivo, mostrando que estão gostando do evento ao vivo por meio de curtidas.
  • Carrinho de compras: exibe um botão para adicionar ao carrinho que redireciona os usuários para o checkout em uma nova aba.
  • Visualização rápida: disponibiliza uma opção de visualização rápida para os usuários terem uma visão mais detalhada do produto sem sair da página do evento ao vivo.
  • Rolagem infinita: funcionalidade de rolagem infinita para a opção Produtos da barra lateral que rola automaticamente de acordo com a quantidade de segundos definida. Os segundos podem ser definidos no campo Você está alterando a velocidade da barra lateral do produto (intervalo recomendado: 3 a 100 segundos). Revise e salve suas alterações.
  1. Clique em Pré-visualização para visualizar o aplicativo Live Shopping de acordo com as configurações que você definiu.

{"base64":"  ","img":{"width":1145,"height":702,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":358644,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Apps/Live%20Shopping/live-shopping-eventos_1.png"}}

Na seção Configuração do CMS, você também encontrará o script para integrar o aplicativo de transmissões ao vivo onde preferir no seu storefront.

Configurar opções do evento

Nesta seção, você aprenderá a ativar ou desativar funcionalidades específicas para o seu evento ao vivo.

  1. Na lista de eventos, encontre o evento desejado e clique na seta na coluna Ações.
  2. Na seção Configurações, é possível ativar ou desativar as seguintes opções:
  • Chat
    • Email obrigatório: exige que os usuários forneçam seus endereços de email para participar do chat do evento ao vivo.
    • Permitir GIFs: permite que os usuários enviem GIFs no chat durante o evento ao vivo.
    • Ativar envio de email: envia uma notificação ao usuário no email cadastrado quando seu comentário no chat for respondido pelo administrador do evento.
  • Reprodutor de mídia
    • Número de espectadores: exibe o número de espectadores participando do evento.
    • Pop-up de transmissão: abre o evento em uma janela pop-up ao acessar o site do evento.
  • Produtos
    • Aplicar impostos: habilita a aplicação de impostos a produtos exibidos durante o evento ao vivo. Quando essa opção estiver ativa, o módulo Promoções > Taxas irá exibir o preço do produto junto com o imposto aplicável.

Configurar promoções do evento

Para aumentar o engajamento e as vendas do seu evento, o aplicativo Live Shopping permite que você crie promoções para os eventos. Siga os passos abaixo para exibir promoções durante seu evento:

  1. Na lista de eventos, encontre o evento desejado e clique na seta na coluna Ações.
  2. Na seção Promoções, clique em Selecionar para escolher uma promoção existente que deseja exibir durante o evento ao vivo.
  3. Preencha os campos a seguir de acordo com seu cenário específico:
  • Promoção: selecione uma promoção existente.
  • Variável: selecione as métricas de vendas ou de engajamento que você deseja monitorar para a promoção, como curtidas, comentários, espectadores ou pedidos.
  • Objetivo: defina o objetivo que você deseja alcançar para a variável selecionada. Por exemplo, você pode definir o número de curtidas ou pedidos que deseja alcançar.
  • Mensagem para exibir: personalize a mensagem que será exibida aos espectadores quando eles interagirem com a promoção.
  • Selecionar animação: escolha um estilo de animação para aumentar o impacto visual da promoção.
  1. Clique em Salvar para salvar suas configurações e ativar a promoção para o evento.

Gerenciar o chat ao vivo

Para gerenciar o chat ao vivo durante seu evento, encontre o evento desejado na lista de eventos e clique na seta na coluna Ações. Na seção Chat ao vivo, você poderá visualizar e monitorar comentários em tempo real, além de acompanhar o número de espectadores e curtidas. Abaixo, apresentamos uma lista das funcionalidades disponíveis:

{"base64":"  ","img":{"width":1211,"height":801,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":125930,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Apps/Live%20Shopping/live-shopping-eventos_2.png"}}

  • I - Informações da loja: permite que você defina o nome de administrador do chat. Insira o nome desejado no campo de preenchimento e clique em Salvar para salvar as alterações.
  • II - Download: faz o download da conversa do chat para consulta ou análise futura.
  • III - Desafixar mensagem: desafixa uma mensagem fixada anteriormente na parte superior do chat.
  • IV - Fixar mensagem: fixa uma mensagem na parte superior do chat. Isso garante que a mensagem fixada permaneça visível mesmo quando são enviadas novas mensagens.
  • V - Bloquear usuário: bloqueia o usuário ao clicar em uma mensagem enviada por ele no chat, evitando que o usuário envie novas mensagens. Para isso, clique no ícone do usuário bloqueado e, em seguida, clique em Bloquear para confirmar.
  • VI - Excluir mensagem: exclui uma mensagem do chat. Clique no ícone da lixeira e, em seguida, clique em Confirmar.
  • VII - Selecionar mensagem: seleciona uma mensagem para ser respondida. Clique nesse ícone para enviar uma resposta à mensagem que deseja.
  • VIII - Enviar: envia uma mensagem no chat para interagir ativamente com os espectadores e participantes durante o evento. Digite sua mensagem na caixa de texto e clique no ícone de envio.

Além disso, você pode enviar questionários e pesquisas e bloquear palavras indesejadas.

Enviar enquetes e questionários

O aplicativo Live Shopping oferece um recurso de chat ao vivo que permite que os usuários se engajem ativamente com o evento e compartilhem suas opiniões em tempo real. Saiba mais sobre como enviar enquetes e questionários e aumentar o engajamento de seus clientes:

  1. Na lista de eventos, encontre o evento desejado e clique na seta na coluna Ações.
  2. Na seção Perguntas, crie perguntas para serem exibidas ao público usando o botão Nova pergunta. Você pode escolher entre enquetes e questionários e definir por quanto tempo serão exibidos. As respostas recebidas serão armazenadas na mesma seção.
    {"base64":"  ","img":{"width":1584,"height":1026,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":73676,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Apps/Live%20Shopping/live-shopping-eventos_3.png"}}
  3. Clique em Salvar pergunta para salvar sua pergunta e torná-la disponível ao público.

Bloquear palavras indesejadas

Para manter um ambiente de conversa agradável, você pode impedir que determinadas palavras sejam exibidas no chat em tempo real. Veja como configurar a lista de bloqueio:

  1. Na barra lateral do Admin, acesse a página Palavras bloqueadas.
  2. Clique em Nova para definir quais palavras devem ser proibidas de serem exibidas no chat ao vivo.
  3. Clique em Salvar para salvar as alterações.

Esse recurso é útil para bloquear comentários grosseiros, com viés político ou não relacionados à sua transmissão ao vivo. Observe que as palavras adicionadas serão aplicadas a todos os eventos, sem exceção.

Acessar o Estúdio de streaming

Para acessar o Estúdio de streaming, siga os passos abaixo:

  1. Na lista de eventos, encontre o evento desejado e clique na seta na coluna Ações.
  2. Na seção Estúdio de streaming, selecione uma das opções abaixo:
  • Copiar convite: clique para copiar o link do evento ao vivo e enviá-lo a um coanfitrião para que ele possa participar da transmissão ao vivo.
  • Acessar: clique para acessar o estúdio de eventos ao vivo como anfitrião. Ao clicar em Acessar, uma nova janela será aberta, redirecionando-o para o Estúdio de streaming.
    {"base64":"  ","img":{"width":1834,"height":825,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":49821,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Apps/Live%20Shopping/live-shopping-eventos_4.png"}}
  1. No campo Completar meu perfil, insira seu nome e clique em Continuar. Em seguida, você será redirecionado para o estúdio do evento ao vivo.

Exibir produtos durante o evento ao vivo

Ao criar um novo evento, você tem a opção de adicionar o ID da coleção dos produtos que será vinculada ao evento. Na seção Produtos da coleção, é possível gerenciar quais produtos serão exibidos durante o evento.

Para exibir produtos durante o evento ao vivo, siga os passos abaixo:

  1. Na lista de eventos, encontre o evento desejado e clique na seta na coluna Ações.
  2. Na seção Produtos da coleção, escolha os produtos que deseja exibir durante a transmissão ao vivo ativando o botão Ações.

{"base64":"  ","img":{"width":1884,"height":774,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":126397,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Apps/Live%20Shopping/live-shopping-eventos_5.png"}}

Transmitir um evento ao vivo

Depois de realizar toda a configuração e personalização do aplicativo Live Shopping, siga os passos abaixo para transmitir seu evento ao vivo:

  1. Na lista de eventos, encontre o evento desejado e clique na seta na coluna Ações.
  2. Copie o ID do evento na seção Detalhes.
  3. Altere o status do evento para Ao vivo ao clicar no botão de ativação Iniciar no Google.
    {"base64":"  ","img":{"width":2236,"height":946,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":148523,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Apps/Live%20Shopping/live-shopping-eventos_6.png"}}

O evento pode levar cerca de 3 minutos para iniciar.

  1. Vá para Storefront > Site Editor.
  2. Encontre o bloco Live Shopping no seu storefront, de acordo com o modelo que você usou, e selecione-o.
    {"base64":"  ","img":{"width":1920,"height":1101,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":130287,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Apps/Live%20Shopping/live-shopping-eventos_7.png"}}
  3. Ative o reprodutor de mídia do Live Shopping em sua loja ativando o botão Mostrar componente.
  4. Clique em Eventos (ao vivo) para escolher o evento desejado.
  5. Clique em Salvar para salvar as alterações.

Use o módulo Site Editor para configurar textos, imagens e banners a serem exibidos ao lado do reprodutor de mídia do Live Shopping.

Personalizar a aparência

Para criar uma experiência personalizada e visualmente atraente para o evento ao vivo, você pode personalizar a aparência do aplicativo Live Shopping. Siga os passos abaixo para configurar a aparência para a visualização em dispositivos móveis e desktop:

  1. No Admin VTEX, acesse Aplicativos > Live Shopping > Eventos.
  2. Na lista de eventos, encontre o evento desejado e clique na seta na coluna Ações.
  3. Quando o evento estiver ao vivo, vá para a seção Tipo de layout e clique no botão Personalize a aparência para entrar no módulo de personalização.
  4. Na página Aparência, você encontrará duas opções: dispositivos móveis e desktop. Ao selecionar cada opção, é possível configurar e personalizar os componentes específicos dessas visualizações, personalizando as seções de produtos e do chat do reprodutor de mídia do Live Shopping.
    {"base64":"  ","img":{"width":1144,"height":645,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":273096,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Apps/Live%20Shopping/live-shopping-eventos_8.png"}}

Observe que quando você entra no módulo de personalização e começa a personalizar um componente, ele ficará destacado em azul.

  1. Selecione o modo de dispositivos móveis clicando no ícone de celular para personalizar as seguintes opções:
  • Produtos
    • Produtos no celular: personalize a cor do fundo de cada cartão e do preço de cada produto.
    • Botão de adicionar ao carrinho: personalize o conteúdo, a cor do texto e a cor do plano de fundo do botão Adicionar ao carrinho.
    • Destaque do produto: personalize o texto e as cores de fundo do cartão do produto em destaque.
  • Chat
    • Mensagem do administrador: personalize as cores do plano de fundo e do texto das mensagens enviadas pelo administrador do evento.
    • Caixa de comentários: personalize o conteúdo do texto exibido na caixa de texto do chat.
  1. Selecione o modo desktop clicando no ícone de computador para personalizar as seguintes opções:
  • Produtos
    • Produtos em computador: personalize a cor do nome de cada produto.
    • Botão de adicionar ao carrinho: personalize o conteúdo, a cor do texto e a cor do plano de fundo do botão Adicionar ao carrinho.
    • Destaque do produto: personalize a cor de fundo do cartão e do preço do produto em destaque. Além disso, você pode determinar se deseja mostrar o preço ou o botão Adicionar ao carrinho sob o produto em destaque.
    • Seleção de variações de produtos: especifique o estilo de sua preferência para a exibição para variações de produtos, seja em formato de círculo ou quadrado.
    • Título da seção de produtos: personalize o título da seção de produtos apresentada ao lado do reprodutor de mídia da transmissão ao vivo.
  • Chat
    • Mensagem do administrador: personalize as cores do plano de fundo e do texto das mensagens enviadas pelo administrador do evento.
    • Título da seção do chat: personalize o título da seção do chat exibida ao lado do reprodutor de mídia da transmissão ao vivo.
    • Caixa de comentários: personalize o conteúdo do texto exibido na caixa de texto do chat.
    • Botão de enviar mensagem: personalize a cor do plano de fundo, o ícone e a cor do ícone do botão de enviar mensagem.

Depois de concluir a personalização, atualize o site da loja para ver as alterações feitas. Observe que essas configurações de personalização serão automaticamente salvas e mantidas para todos os seus futuros eventos ao vivo.

Se desejar restaurar as configurações padrão, clique no botão Versão padrão para desfazer as alterações e voltar para a configuração original.

Finalizar um evento

Quando a transmissão ao vivo terminar, você precisará finalizá-la para concluir o processo. Siga os passos abaixo para finalizar seu evento:

  1. Na lista de eventos, encontre o evento desejado e clique na seta na coluna Ações.
  2. Altere o status do evento para Finalizada alternando o botão Status.

O processo de finalização da transmissão ao vivo pode demorar um pouco. Não feche a página até que o processo seja concluído e o status Finalizada fique verde.

{"base64":"  ","img":{"width":2204,"height":1098,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":158202,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Apps/Live%20Shopping/live-shopping-eventos_9.png"}}

Após a finalização da transmissão ao vivo, vá para a seção Gravações para receber a gravação do evento por email ou fazer o download diretamente do navegador, se desejar. O processo de download normalmente leva cerca de 60 minutos, e você poderá acompanhar sua porcentagem de progresso.

Monitorar dados do evento

Para obter insights valiosos sobre o desempenho da sua transmissão ao vivo, você pode monitorar as métricas usando o aplicativo Live Shopping. Ao analisar as métricas de engajamento e de vendas (KPIs), você pode avaliar a eficácia do seu evento e tomar decisões melhor embasadas para melhorias futuras. Siga os passos abaixo para acessar e rever os dados do evento:

  1. Na lista de eventos, encontre o evento desejado e clique na seta na coluna Ações.
  2. Acompanhe os KPIs de engajamento e de vendas relacionados ao evento, como apresentado na imagem abaixo:

{"base64":"  ","img":{"width":1728,"height":830,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":211505,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/Apps/Live%20Shopping/live-shopping-eventos_10.png"}}

Contribuidores
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Isso foi útil?
Sim
Não
Sugerir edições (GitHub)
Contribuidores
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Nesta página
Ainda tem dúvidas?
Pergunte à comunidade
Encontre soluções e compartilhe ideias na comunidade VTEX.
Junte-se à nossa comunidade
Solicite suporte à VTEX
Para assistência personalizada, entre em contato com nossos especialistas.
Abra um ticket de suporte
GithubDeveloper portalComunidadeFeedback