<miso-ask>
The container of the Ask workflow. Miso elements inside it show the data of one question and its answer:
<miso-ask>
<miso-query></miso-query>
<miso-answer></miso-answer>
<miso-sources></miso-sources>
</miso-ask>
A page can have more than one <miso-ask> for the same question. Each one
connects the elements in it to the same workflow, so you can put the parts of
an answer in different places in the page.
To build a whole Ask page, see Ask — Quick Start.
Elements
| Element | Shows |
|---|---|
<miso-affiliation> | The affiliate products that come with the answer. |
<miso-answer> | The generated answer. |
<miso-error> | The error message shown when the workflow fails. |
<miso-feedback> | The buttons that rate the answer. |
<miso-follow-up-questions> | The suggested follow-up questions. |
<miso-images> | The images that come with the answer. |
<miso-query> | The query box. |
<miso-question> | The question being answered. |
<miso-reasoning> | The reasoning given while the answer is generated. |
<miso-related-resources> | The articles related to the question. |
<miso-sources> | The articles cited by the answer. |
<miso-query-suggestions> also works here, but it is deprecated. Use
<miso-follow-up-questions>.
Attributes
parent-question-id
Connects the container to the follow-up of a question. Without it, the container shows the first question on the page.
<miso-ask parent-question-id="0e1f2a3b-4c5d-…">
<miso-question></miso-question>
<miso-answer></miso-answer>
</miso-ask>
The value is the question ID of the question before it. The followUp()
template sets it for you. See
Ask — UI Customization.
workflow
workflow="active" connects the container to the latest question that the
reader asked, the first one or a follow-up. When the reader asks a follow-up,
the container moves to it. Use it for a part of the page that always shows
the newest answer, such as a list of its sources in a side column:
<miso-ask workflow="active" logo="false">
<miso-sources></miso-sources>
</miso-ask>
Set it in the HTML, and leave out parent-question-id.
logo
Controls the Miso logo at the end of the container.
| Value | The logo shows |
|---|---|
| Attribute left out | When the container holds <miso-answer>, once the answer starts to arrive. |
true | Once the answer starts to arrive. |
false | Never. |
Any other value is an error. To turn the logo off in every <miso-ask>:
client.ui.asks.useLayouts({
container: { logo: false },
});
visible-when
Shows the container only in the states it names. It also works on an element inside the container.
| Value | Shows the element when |
|---|---|
initial | The workflow has not sent a request yet. |
loading | The request is out, and no data has arrived. |
ready | The data is arriving or has arrived. |
ongoing | The data is still arriving. |
done | All the data has arrived. |
erroneous | The request failed. |
empty | No Miso element in the container has data. |
nonempty | At least one Miso element in the container has data. |
- Separate values with spaces to show the element in any of them:
visible-when="initial loading". - Join a state to
emptyornonemptywith+to need both:visible-when="ready+empty". - Only the Miso elements that show data count toward
emptyandnonempty. The query box and the buttons do not. - The SDK shows the element with
display: block !important. To lay it out as a flex row or a grid, putvisible-whenon a wrapper around it.
Next
- Ask — UI Customization — the parts and the order of the Ask page.
- Ask — Events — run your own code at each step of a question.
