---
title: Widget no site, link para o agente e aplicação no telemóvel
description: 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.
section: guide
keywords: widget site, instalar widget, código widget, Tilda, Shopify, WordPress, link agente, agente de vendas AI, PWA, Progressive Web App, notificações push, pré-visualização link
updated: 2026-09-06
---
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.

> [!tip] 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](/wiki/pt/platform-shopify) e [WordPress](/wiki/pt/platform-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:

1. Abra o site em modo de navegação anónima e clique no botão do widget. Faça uma pergunta sobre um produto.
2. Abra o link do agente no telemóvel. Verifique se a instalação é sugerida.
3. Envie o link para si próprio num serviço de mensagens e veja a pré-visualização.
4. 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.