Owari Labs
Português (Brasil)
Tema

Owari Robo · Documentação

Posição e aparência

Escolha a imagem do botão do Robo e onde ele aparece. Deixe-o fácil de encontrar, sem cobrir outros botões do site.

Para quem edita o site

Troque a imagem do botão

O botão flutuante pode mostrar seu logotipo ou outra imagem que você escolher. É nele que o visitante toca para abrir a conversa.

  1. Abra as configurações de aparência

    No workspace do cliente, entre em Configurações. Na área do chat do site, abra Aparência.

  2. Informe a imagem do botão

    Em URL da imagem do launcher do widget, cole o link público HTTPS da imagem. Launcher é o botão que abre a conversa. Esse campo recebe um link da imagem; ele é separado da URL da imagem do cabeçalho, que muda a imagem no topo da conversa.

  3. Salve e confira no site

    Clique em Salvar, espere cerca de um minuto e recarregue o site. Para trocar só a imagem do botão, não é preciso substituir o código de instalação.

Escolha um canto livre

Se o WhatsApp já fica à direita, coloque o Robo à esquerda. O responsável pode escolher o canto em Site e Widget.

Dois botões sobrepostos no mesmo cantoDois botões sobrepostos no mesmo canto
No mesmo canto, um botão cobre o outro.
Robo e o outro botão em cantos opostosRobo e o outro botão em cantos opostos
Em cantos opostos, os dois ficam fáceis de usar.

Deixe espaço acima de outro botão

Você também pode subir o Robo pelo CSS do site. Este exemplo usa 96 pixels; ajuste ao seu layout.

Código de exemplo · adapte ao seu site

Exemplo: subir o botão

Cole na folha de estilos. Se a tag de instalação tiver data-robo-offset-bottom, o valor dela tem prioridade. Peça um trecho atualizado antes de usar o CSS para essa distância.

css
#owari-robo-widget {
  --owari-robo-widget-offset-y: 96px;
}

@media (max-width: 720px) {
  #owari-robo-widget {
    --owari-robo-widget-offset-y-mobile: 96px;
  }
}

Use um botão da sua página

Você pode esconder o botão flutuante e usar um botão próprio. Acrescente data-robo-launcher="none" à tag de instalação existente.

Código de exemplo · adapte ao seu site

Exemplo: botão próprio para conversar

Este exemplo completo tem um workspace fictício. Use os valores enviados pelo responsável e substitua a tag existente; não adicione um segundo script do widget. Coloque o script de clique depois do botão.

html
<!-- EXEMPLO: peça ao responsável o código real do seu assistente. -->
<script
  defer
  src="https://dev-robo.owarilabs.com/widget.js?v=v1"
  data-robo="slug-do-seu-workspace"
  data-robo-version="v1"
  data-robo-locale="pt-BR"
  data-robo-host="https://dev-robo.owarilabs.com"
  data-robo-launcher="none"
></script>

<button type="button" id="open-robo">Fale com a gente</button>

<script>
  document.getElementById("open-robo").addEventListener("click", () => {
    window.OwariRobo?.toggle();
  });
</script>