<miso-query>
The box where the reader types a question. Pressing Enter or selecting the button sends it:
<miso-ask>
<miso-query></miso-query>
<miso-answer></miso-answer>
</miso-ask>
Containers
What the box does with the question depends on its container:
| Container | On submit | Placeholder | Button |
|---|---|---|---|
<miso-ask> | Asks the question. | "Ask a question" | send icon |
<miso-hybrid-search> | Searches, and answers the question. | None | search icon |
<miso-explore> | Opens the page that useLink returns. | "Ask a question" | search icon |
<miso-conversation> | Asks the next question in the open thread. | "Ask a question" | send icon |
To change the box, call useLayouts on the workflow of the container, under
the role query. For Ask, use client.ui.asks, the context, so that the box
of each follow-up gets the change too.
Options
Your options are merged over the defaults, so set only what you change.
client.ui.asks.useLayouts({
query: {
placeholder: "Ask about this week's news",
templates: { buttonText: "Ask", buttonIcon: "" },
},
});
| Option | What it does |
|---|---|
placeholder | The text in the empty box. |
templates.buttonText | The text of the button, before the icon. A string, or a function that gets (layout). Empty by default. |
templates.buttonIcon | The icon of the button: an icon name from the list below, your own HTML, or a function that gets (layout). "" removes the icon. |
clearOnSubmit | true empties the box after the question is sent. |
blurOnSubmit | false keeps the focus in the box after the question is sent. |
disableWhenOngoing | true turns the button off, and blocks Enter, while an answer is still on its way. |
className | The class of the box, in place of miso-search-box. |
<miso-conversation> sets clearOnSubmit, blurOnSubmit: false and
disableWhenOngoing by default, so the reader can type one question after
another. The other containers set none of them.
The icon names are send, search, triangle, triangle-eq, chevron,
chevron-negative, bulb, dots-vertical, plus, pencil, bell,
bell-fill and trash.
Write the markup yourself
Put your own markup inside <miso-query>. When the element has children, the
SDK keeps them and does not draw its own box:
<miso-ask>
<miso-query>
<div class="my-query">
<input type="text" data-role="input" placeholder="Ask a question">
<button type="submit" data-role="submit">Ask</button>
</div>
</miso-query>
<miso-answer></miso-answer>
</miso-ask>
- Mark the field with
data-role="input". The SDK reads the question from the first element with it. - Mark the button. A click on an element with
type="submit"ordata-role="submit"sends the question. Pressing Enter in the field sends it too. - Give the button
data-role="submit"if you usedisableWhenOngoing. That is the button the SDK turns off. - Leave out
<form>. The SDK does not stop a form from submitting, so the page reloads.
The placeholder and templates options have no effect on your own markup.
Autocomplete
Since 1.13.1
In <miso-explore>, the box can suggest questions as the reader types. Turn
it on for every unit on the page:
client.ui.explores.autocomplete.enable();
To turn it on for one unit, call autocomplete.enable() on that unit, such
as client.ui.explore for the default unit.
The suggestions come from the
query suggestion API
after the reader stops typing for 300 ms. Selecting one sends it as the
question. To change the wait, set autocomplete.debounce, in milliseconds:
client.ui.explores.useLayouts({
query: { autocomplete: { debounce: 150 } },
});
The suggestions show in an element with the class miso-autocomplete. Set
autocomplete.className to use your own class.
Next
- Ask — Quick Start: a box and an answer on one page.
- Explore — Quick Start: a box that sends the reader to your answers page.
<miso-answer>: the answer to the question.
