Direct Answers on Vertical Search - Built In Support (Winter '21 Release)

Product/Library Releases & New Features Winter '21 Release
1

Direct Answers are now available in Vertical Search as part of the Answers Hitchhiker Theme. Direct Answers on vertical search was previously released as a feature you could add custom to your Answers experience, so we’re excited to have it built into the UI by default as part of the theme!

A direct answer is a concise result like a phone number, calorie count, or another piece of information that addresses the query’s intent. Direct Answers can also easily be surfaced in Vertical Search for any vertical that has Direct Answers configured.

|624x363.017738408859
|624x363.0177384088591600×926 135 KB

To learn more about Direct Answers, check out the Direct Answers unit.

Upgrade Implications:

:spiral_calendar: This feature is available in Early Access. Here’s how to use the Early Access branches of the Theme and SDK!

Net-new verticals you add to your experiences will have the Direct Answer component and partials commented out by default when you use the Jambo Command “Add Vertical”. Comment these in to use this feature.

To add Direct Answers to existing verticals, either 1) add the component to the config.json file and add the partials to the page.html.hbs file or 2) re-add the vertical and comment in the component and partials.

Option 1: Add the Direct Answers components to an existing page.

  1. Add the DirectAnswer configuration to the config.json file for that page:
 "componentSettings": {
    "DirectAnswer": {
      "types": {
        "FEATURED_SNIPPET": {
          "cardType": "documentsearch-standard"
        },
        "FIELD_VALUE": {
          "cardType": "allfields-standard"
        }
      }
    },
// other components here
  1. Add the three Direct Answers partials below to the page.html.hbs file for the vertical you want to use Direct Answers on.
  • Add the directanswerscards partial {{> directanswercards/all }} below the {{> cards/all }} partial.
  • Add the direct answer script {{> templates/vertical-standard/script/directanswer }} below the navigation script partial.
  • Add the direct answer markup {{> templates/vertical-standard/markup/directanswer }} before the spell check markup partial.

Replace vertical-standard with the page template used for this vertical. To see where to place these partials in the file, navigate to the page templates (theme/answers-hitchhiker-theme/templates), find the template you want, and open the page.html.hbs file.

If you are using the vertical-standard page template, the page.html.hbs file will look something like the below, with the new partials bolded.

{{#> layouts/html }}
  {{#> script/core }}
    {{> cards/all }}
    {{> directanswercards/all }}
    {{!-- {{> templates/vertical-standard/collapsible-filters/page-setup }} --}}
    {{> templates/vertical-standard/script/appliedfilters }}
    {{> templates/vertical-standard/script/verticalresultscount }}
    {{> templates/vertical-standard/script/searchbar }}
    {{> templates/vertical-standard/script/spellcheck }}
    {{> templates/vertical-standard/script/navigation }}
    {{> templates/vertical-standard/script/directanswer }}
    {{> templates/vertical-standard/script/verticalresults }}
    {{> templates/vertical-standard/script/pagination }}
    {{> templates/vertical-standard/script/locationbias }}
    …
    <div class="Answers-container Answers-resultsWrapper">
      {{> templates/vertical-standard/markup/directanswer }}
      {{> templates/vertical-standard/markup/spellcheck }}
      <div class="Answers-resultsHeader">
        {{> templates/vertical-standard/markup/verticalresultscount }}
        {{> templates/vertical-standard/markup/appliedfilters }}
     …

…

Option 2: Re-create the vertical page

Alternatively, you can re-add the vertical you want Direct Answers on using the Jambo Command “Add Vertical”. Navigate to the page.json file and comment in the DirectAnswer component above. Navigate to the page.html.hbs file and comment in the three Direct Answers partials above. vertical-standard will be filled in with the page template used for this vertical.