Explore — Related Questions

Change where a related question takes the reader, and how each question looks.

<miso-related-questions> lists the questions as links. Below we open your answers page in the same tab, and then write the markup of a question.

You need a working Explore page first. See Explore — Quick Start.

Open the answers page in the same tab

A selected question opens the URL that your useLink function returns, in a new tab. To open it in the same tab, pass open: false as the second argument:

client.ui.explore.useLink(
  (question) => `/ask.html?q=${encodeURIComponent(question)}`,
  { open: false },
);

Call useLink before start().

Change how a question looks

Each question is drawn by the question template. Give your own with useLayouts, under the role related_questions. data.text is the question. Start the markup with tagPair, which returns the opening and closing tag of the item. The tags carry the link and the attributes that the SDK uses to handle the selection and to record clicks.

function renderQuestion(layout, state, data) {
  const { tagPair, escapeHtml } = layout.templates.helpers;
  const [openTag, closeTag] = tagPair(layout, data);
  return openTag +
    `<span class="my-question-text">${escapeHtml(data.text)}</span>` +
    '<span class="my-question-arrow" aria-hidden="true">→</span>' +
    closeTag;
}

client.ui.explore.useLayouts({
  related_questions: { templates: { question: renderQuestion } },
});

Call useLayouts before start(). Style the classes in your own CSS.

More than one unit on a page

Set the options on client.ui.explores, the context, to reach every Explore unit on the page:

client.ui.explores.useLayouts({
  related_questions: { templates: { question: renderQuestion } },
});

If it does not work

Next

• UI Customization — change the parts around the questions, and when they show.
• Events — run your own code when the reader picks a question.
• API Configuration — how many questions, and which articles they come from.