atomic-smart-snippet

This is for:

Developer
In this article

The atomic-smart-snippet component displays the excerpt of a document that would be most likely to answer a particular query.

You can style the snippet by inserting a template element as follows:

<atomic-smart-snippet>
  <template>
    <style>
      b {
        color: blue;
      }
    </style>
  </template>
</atomic-smart-snippet>

Properties

Property Attribute Description Type Default

collapsedHeight

collapsed-height

When the answer is partly hidden, how much of its height (in pixels) should be visible.

number

180

headingLevel

heading-level

The heading level to use for the question at the top of the snippet, from 1 to 5.

number

0

maximumHeight

maximum-height

The maximum height (in pixels) a snippet can have before the component truncates it and displays a "show more" button.

number

250

snippetCollapsedHeight

snippet-collapsed-height

number | undefined

snippetMaximumHeight

snippet-maximum-height

number | undefined

snippetStyle

snippet-style

Sets the style of the snippet.

Example:

smartSnippet.snippetStyle = `
  b {
    color: blue;
  }
`;

string | undefined

tabsExcluded

tabs-excluded

The tabs on which this smart snippet must not be displayed. This property should not be used at the same time as tabs-included.

Set this property as a stringified JSON array, e.g.,

 <atomic-smart-snippet tabs-excluded='["tabIDA", "tabIDB"]'></atomic-smart-snippet>

If you don’t set this property, the smart snippet can be displayed on any tab. Otherwise, the smart snippet won’t be displayed on any of the specified tabs.

string | string[]

'[]'

tabsIncluded

tabs-included

The tabs on which the smart snippet can be displayed. This property should not be used at the same time as tabs-excluded.

Set this property as a stringified JSON array, e.g.,

 <atomic-smart-snippet tabs-included='["tabIDA", "tabIDB"]'></atomic-smart-snippet snippet>

If you don’t set this property, the smart snippet can be displayed on any tab. Otherwise, the smart snippet can only be displayed on the specified tabs.

string | string[]

'[]'

Slots

Slots let you write custom HTML at a specific place inside a web component.

Slot Description

source-anchor-attributes

Lets you pass attributes down to anchor elements, overriding other attributes. To be used exclusively in anchor elements, such as: <a slot="source-anchor-attributes" target="_blank"></a>.

Shadow Parts

Part Description

answer

The container displaying the full document excerpt.

body

The body of the smart snippet, containing the truncated answer and the show more or show less button.

feedback-banner

The feedback banner underneath the source.

feedback-buttons

The wrapper around the buttons after the inquiry.

feedback-dislike-button

The button allowing the end user to signal that the excerpt wasn’t useful.

feedback-explain-why-button

The button a user can press to provide detailed feedback.

feedback-inquiry

The message asking the end user to provide feedback on whether the excerpt was useful.

feedback-inquiry-and-buttons

A wrapper around the feedback inquiry and the feedback buttons.

feedback-like-button

The button allowing the end user to signal that the excerpt was useful.

feedback-thank-you

The message thanking the end user for providing feedback.

feedback-thank-you-container

The wrapper around the 'thank you' message and feedback button.

footer

The footer underneath the answer.

question

The header displaying the question that is answered by the found document excerpt.

show-less-button

The show less button.

show-more-button

The show more button.

smart-snippet

The wrapper of the entire smart snippet.

source-title

The title of the document the excerpt is from.

source-url

The URL to the document the excerpt is from.

truncated-answer

The container displaying only part of the answer.