Owari Labs
English
Theme

Owari Robo · Documentation

Question field and suggestions

Put a text field in the page itself, like on the Robo website. Visitors can type a question or tap a suggestion. Both open the same widget with that question.

For anyone editing the website
See how it worksIllustrative demo. Try the buttons: nothing is sent to Robo.
Your website

How can we help?

A conversation starts with a question.

Your assistantExample

Hello! How can I help?

What services do you offer?

In a new conversation, Robo asks for your consent before sending the question.

That question appears in the widget. The conversation continues there.

Install the widget first

The field is another way to start the same chat. It needs the real installation code from the operator on this page.

Place the field on the page

HTML creates the field and the arrow button. Paste it where you want visitors to ask a question.

Example code · adapt to your website

Example: text field

Change the placeholder and accessible label to match your site. Keep the 2,000-character limit.

html
<form id="robo-question-form">
  <div class="robo-question-row">
    <input
      id="robo-question"
      type="text"
      placeholder="Ask anything"
      aria-label="Ask anything"
      aria-describedby="robo-question-status"
      maxlength="2000"
      required
    >
    <button type="submit" aria-label="Send question to Robo">↑</button>
  </div>
  <p id="robo-question-status" role="status"></p>
</form>

Add ready-made questions

This part is optional. Place the buttons just after </form>. Each button's visible text is the question sent to Robo.

Example code · adapt to your website

Example: three suggestions

Replace these with questions about your customer's business. Duplicate or remove buttons as needed. Keep type="button" and data-robo-question.

html
<div class="robo-question-suggestions" role="group" aria-label="Suggested questions">
  <button type="button" data-robo-question>What does Robo do?</button>
  <button type="button" data-robo-question>How do I teach Robo?</button>
  <button type="button" data-robo-question>How do I add it to my site?</button>
</div>

Choose the appearance

CSS controls the colors, spacing and rounded corners. This example also makes the suggestions wrap on small screens.

Example code · adapt to your website

Example: field and button styles

Paste into the page head. In a CSS-only editor, omit the <style> tags. Adjust the colors and width to match your 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>

Connect it to the widget

JavaScript makes the field and buttons work. Paste it after the field and suggestions, near the end of body.

Example code · adapt to your website

Example: open the chat with a question

In a JavaScript-only editor, omit the <script> tags and run after the page HTML loads. Include this script once. If Robo is still loading, it keeps the text and shows a message.

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 = "Chat is not available yet. Wait a moment and try again. Your question is still here.";
        return;
      }

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

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

Check all the ways to open it

On the published HTTPS page, type a question and press Enter. Repeat with the arrow, then try every suggested question. Check the phone layout and keyboard navigation too.