Owari Labs
Português (Brasil)
Tema

Owari Robo · Documentação

Campo e perguntas prontas

Coloque um campo de texto na própria página, como no site do Robo. O visitante pode digitar uma pergunta ou tocar em uma sugestão. Os dois caminhos abrem o mesmo widget com a pergunta.

Para quem edita o site
Veja como funcionaDemonstração ilustrativa. Experimente os botões: nada é enviado ao Robo.
Seu site

Como podemos ajudar?

Uma conversa começa com uma pergunta.

Seu assistenteExemplo

Olá! Em que posso ajudar?

Quais serviços vocês oferecem?

Em uma conversa nova, o Robo pede seu consentimento antes de enviar a pergunta.

A mesma pergunta aparece no widget. A conversa continua por lá.

Instale o widget primeiro

O campo é outra forma de começar a mesma conversa. Ele precisa do código real de instalação do widget nesta página.

Coloque o campo na página

O HTML cria o campo e o botão de seta. Cole onde você quer que o visitante faça uma pergunta.

Código de exemplo · adapte ao seu site

Exemplo: campo de texto

Adapte o placeholder e o rótulo de acessibilidade ao seu site. Mantenha o limite de 2.000 caracteres.

html
<form id="robo-question-form">
  <div class="robo-question-row">
    <input
      id="robo-question"
      type="text"
      placeholder="Pergunte o que quiser"
      aria-label="Pergunte o que quiser"
      aria-describedby="robo-question-status"
      maxlength="2000"
      required
    >
    <button type="submit" aria-label="Enviar pergunta ao Robo">↑</button>
  </div>
  <p id="robo-question-status" role="status"></p>
</form>

Adicione as perguntas prontas

Esta parte é opcional. Coloque os botões logo depois de </form>. O texto visível em cada botão é a pergunta enviada ao Robo.

Código de exemplo · adapte ao seu site

Exemplo: três sugestões

Troque por perguntas sobre o negócio do cliente. Duplique ou remova botões conforme necessário. Mantenha type="button" e data-robo-question.

html
<div class="robo-question-suggestions" role="group" aria-label="Perguntas sugeridas">
  <button type="button" data-robo-question>O que o Robo faz?</button>
  <button type="button" data-robo-question>Como ensino o Robo?</button>
  <button type="button" data-robo-question>Como coloco no meu site?</button>
</div>

Dê uma aparência ao campo

O CSS controla cores, espaços e cantos arredondados. Este exemplo também distribui as sugestões em mais de uma linha em telas pequenas.

Código de exemplo · adapte ao seu site

Exemplo: visual do campo e dos botões

Cole no head da página. Em um editor exclusivo de CSS, retire as tags <style>. Ajuste cores e largura para combinar com seu site.

html + css
<style>
  #robo-question-form,
  .robo-question-suggestions {
    max-width: 760px;
    margin-inline: auto;
  }

  .robo-question-row {
    display: flex;
    gap: 8px;
    padding: 8px;
    border: 1px solid #d6d8d5;
    border-radius: 20px;
    background: #fff;
  }

  #robo-question {
    flex: 1;
    min-width: 0;
    padding: 12px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    color: #17251c;
    font: inherit;
    font-size: 16px;
  }

  .robo-question-row button {
    min-width: 48px;
    min-height: 48px;
    border: 0;
    border-radius: 12px;
    background: #315f43;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
  }

  #robo-question-status { margin: 8px 0; }

  .robo-question-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .robo-question-suggestions button {
    padding: 12px 18px;
    border: 1px solid #d6d8d5;
    border-radius: 999px;
    background: #fff;
    color: #17251c;
    font: inherit;
    cursor: pointer;
  }

  #robo-question:focus-visible,
  .robo-question-row button:focus-visible,
  .robo-question-suggestions button:focus-visible {
    outline: 3px solid #315f43;
    outline-offset: 3px;
  }
</style>

Conecte tudo ao widget

O JavaScript faz o campo e os botões funcionarem. Cole depois do campo e das sugestões, perto do fim do body.

Código de exemplo · adapte ao seu site

Exemplo: abrir a conversa com uma pergunta

Em um editor exclusivo de JavaScript, retire as tags <script> e execute depois que o HTML carregar. Inclua este script uma vez. Se o Robo ainda estiver carregando, ele mantém o texto e mostra um aviso.

html + js
<script>
  (() => {
    const form = document.getElementById("robo-question-form");
    const input = document.getElementById("robo-question");
    const status = document.getElementById("robo-question-status");
    if (!form || !input || !status) return;

    form.addEventListener("submit", (event) => {
      event.preventDefault();
      const message = input.value.trim();
      if (!message) return;

      const opened = window.OwariRobo?.open({
        target: "widget",
        message
      }) === true;

      if (!opened) {
        status.textContent = "O chat ainda não está disponível. Aguarde um instante e tente novamente. Sua pergunta continua aqui.";
        return;
      }

      input.value = "";
      status.textContent = "";
    });

    document.querySelectorAll("[data-robo-question]").forEach((button) => {
      button.addEventListener("click", () => {
        input.value = button.textContent.trim();
        form.requestSubmit();
      });
    });
  })();
</script>

Confira as formas de abrir

Na página publicada em HTTPS, digite uma pergunta e pressione Enter. Repita com a seta e depois toque em cada pergunta pronta. Confira também no celular e com o teclado.