Widget no site, link para o agente e aplicação no telemóvel
Como colocar o agente no site com uma única linha de código, como funciona o link curto para redes sociais e aplicações de mensagens, e como o cliente instala o seu agente no telemóvel como uma aplicação.
O agente tem duas faces. No site, é uma janela no canto que abre com um botão. Nas redes sociais e em aplicações de mensagens, é uma página com um link curto que funciona como uma pequena loja e pode ser instalada no telemóvel como uma aplicação. O catálogo, as condições, os diálogos e os pedidos são comuns: o agente é um só.
Tudo o que é descrito abaixo encontra-se na secção «Widget e Ligação».
Ligação para o agente#
Um endereço curto do tipo comag.vibevox.pro/c/your-shop. Coloca-se no cabeçalho do perfil do Instagram, TikTok ou Telegram, envia-se no WhatsApp, ou insere-se na descrição de um vídeo no YouTube.
Ao enviar para uma aplicação de mensagens, a ligação expande-se para um cartão: capa, nome da loja e descrição. Os três campos são configuráveis:
- Título da pré-visualização — por predefinição, o nome da loja.
- Descrição da pré-visualização — uma frase curta sobre o que se pode perguntar.
- Capa — gerada automaticamente a partir da sua cor de destaque, logótipo e fotografias de produtos. Pode carregar a sua própria, com o tamanho de 1200 por 630 pixels.
A forma mais fácil de verificar como a pré-visualização aparece é enviando a ligação para si mesmo no Telegram.
Código para o site#
Uma única linha que se insere antes da etiqueta de fecho </body> em todas as páginas. Copia-se com um botão na área de cliente.
Onde inserir exatamente nas plataformas populares:
| Plataforma | Onde inserir |
|---|---|
| Tilda | «Definições do site» → «Mais» → «Código HTML para o corpo» |
| Shopify | «Tema» → «Editar código» → theme.liquid, antes de </body> |
| WordPress | «Aspeto» → «Editor de tema» → footer.php, ou plugin de inserção de código |
| Wix | «Definições» → «Código personalizado» → adicionar no fim do corpo |
| O seu site | Diretamente no modelo antes de </body> |
Após a inserção, um botão aparecerá no canto inferior direito. A posição pode ser alterada para a esquerda nas definições, e a cor e o tema — no mesmo local.
O widget carrega assincronamente e não atrasa a página. Se tiver um CSP rigoroso configurado, permita o domínio comag.vibevox.pro em script-src e connect-src.
Aparência#
Definições que o comprador vê:
- Nome da loja e nome do assistente. O segundo é a assinatura do interlocutor no cabeçalho do chat.
- Saudação. A primeira frase. Uma boa saudação promete utilidade, em vez de apenas cumprimentar.
- Sugestões no início do diálogo. Até quatro botões com perguntas. Vazio — serão geradas automaticamente com base no catálogo.
- Tom de comunicação. Da lista ou personalizado: «caloroso e conciso», «especializado, formal».
- Cor de destaque. Uma única cor define o botão, as ligações e o realce dos cartões.
- Logótipo. Será também o ícone da aplicação no telemóvel.
- Botão do microfone. Reconhecimento de voz no navegador. Se o navegador não suportar, o comprador gravará uma mensagem de voz, e o Gemini irá transcrevê-la.
À direita, uma pré-visualização em tempo real: muda enquanto escreve. O botão «Guardar» aplica as alterações ao site.
Tema claro e escuro#
O chat tem duas aparências, e estas são alternadas num único campo de definições — «Tema».
| Valor | O que o comprador vê |
|---|---|
| «Como o visitante» | O tema adapta-se às definições do telemóvel ou computador do utilizador: escuro à noite, claro durante o dia |
| «Claro» | Janela sempre clara, independentemente do dispositivo |
| «Escuro» | Janela sempre escura |
Por predefinição, está definido como «como o visitante», e na maioria dos casos é a escolha certa: uma pessoa com um tema escuro no telemóvel não receberá um flash branco na cara, e quem está habituado ao tema claro verá a janela familiar.
Um tema fixo é necessário quando o próprio site é concebido num único estilo. Uma landing page escura com um chat claro no canto parece um remendo, e vice-versa. Nesse caso, defina o mesmo tema que o site, e o widget irá integrar-se no design.
A cor de destaque funciona sobre ambos os temas: os botões, as ligações e o realce dos cartões assumem a sua cor de marca, enquanto o fundo e o texto mudam com o tema. A forma mais fácil de verificar ambas as opções é na pré-visualização à direita — ela é redesenhada imediatamente enquanto alterna o valor.
Cartões de produtos levam ao seu site#
O agente responde não com texto contínuo, mas com cartões: fotografia, nome, preço, botão. Por trás do botão está sempre um endereço — a página do produto no seu site ou a publicação original na rede social, se o cartão foi recolhido de lá.
Dentro do widget no site, a transição ocorre na mesma janela, para não criar múltiplas abas. Na página do agente via ligação, o cartão abre numa nova aba, para que o diálogo não se perca.
Para lojas no Shopify e WooCommerce, há um detalhe agradável: o botão não apenas abre o produto, mas também o adiciona ao carrinho de compras da loja através do mecanismo padrão da plataforma. Detalhes nos artigos sobre Shopify e WordPress.
E mais: o widget lê a marcação do produto na página onde está aberto e transmite-a ao agente. Por isso, a pergunta «há em azul?» num cartão de produto é entendida no contexto, sem a necessidade de especificar a que se refere.
Aplicação no telemóvel do comprador#
A página do agente pode ser instalada como uma aplicação. O comprador abre a ligação no telemóvel, vê a sugestão para adicionar ao ecrã principal e recebe um ícone com o seu logótipo.
- Nome sob o ícone — uma palavra até 12 caracteres. Vazio — usaremos a primeira palavra do nome da loja.
- Ícone — o logótipo carregado. Se não houver logótipo, será usado o logótipo da Commerce Agents.
- No iPhone, a instalação é feita através de «Partilhar» → «Adicionar ao Ecrã Principal», esta é uma limitação do Safari, e o agente indica os passos por si mesmo.
Após a instalação, podem ser enviadas notificações push ao comprador a partir da secção «Diálogos». Ele dá permissão para as mesmas, clicando no sino no cabeçalho do chat.
Anexos do comprador#
No chat há um clipe: foto, vídeo ou áudio até 20 megabytes. Se o navegador não tiver reconhecimento de voz, manter o microfone premido grava uma mensagem de voz.
O Gemini analisa o ficheiro: o que é mostrado, que texto está na imagem, o que é dito em voz alta. O agente responde com base nesta análise, e você vê no diálogo tanto o ficheiro em si como uma breve descrição. Isto é útil em nichos onde é mais fácil mostrar do que descrever: peças, reparação, seleção por foto.
Pixel de compra para sites com carrinho#
Se o pagamento for feito no seu site, e não no chat, insira um pequeno fragmento da área de cliente na página «Obrigado pela sua encomenda», substituindo o número da encomenda e o valor. A compra será associada ao diálogo, e nas estatísticas será visível quais as conversas que resultam em vendas.
Verificação#
Três minutos que vale a pena dedicar após a configuração:
- Abra o site em modo de navegação anónima e clique no botão do widget. Faça uma pergunta sobre um produto.
- Abra o link do agente no telemóvel. Verifique se a instalação é sugerida.
- Envie o link para si próprio num serviço de mensagens e veja a pré-visualização.
- Consulte «Diálogos»: ambas as conversas devem aparecer lá.
Perguntas Frequentes#
O widget no site e o link são agentes diferentes#
É o mesmo. O catálogo, as condições, os diálogos e os pedidos são partilhados. Apenas o formato difere: no site, uma janela no canto; no link, uma página em ecrã completo que pode ser instalada no telemóvel.
É possível alterar o endereço do link#
O endereço é gerado a partir do nome da loja ao criar a montra. Se precisar de outro, contacte-nos via Telegram — faremos a alteração manualmente, para não danificar os links já distribuídos.
O widget vai abrandar o site#
Não. O script tem um peso reduzido e carrega de forma assíncrona, após o conteúdo principal da página. A janela de chat em si só é carregada quando o comprador clica no botão.
O que o comprador vê se o agente estiver desativado#
Nada: o botão não aparece, e a página do link indica que o agente não está disponível. O interruptor encontra-se na secção «Widget e Link».
Como remover a frase «Desenvolvido por Commerce Agents»#
Por enquanto, não é possível: a assinatura permanece em todos os planos. É clicável e direciona para o nosso site — é parte do preço, graças à qual o serviço custa 29 € em vez de um valor consideravelmente superior.