@empathyco/x-components 3.0.0-alpha.17 → 3.0.0-alpha.172

package/docs/build-search-ui/web-x-components-development-guide.md

@@ -0,0 +1,172 @@
+---
+title: Develop using the Interface X Components library
+tags:
+  - integration
+  - interface x components integration
+  - web integration
+  - x integration
+  - interface x
+  - x components library
+---
+
+# Develop using the Interface X Components library
+
+In this tutorial, you’ll learn the basics to integrate the Interface X Components library
+in your own project to craft enticing Vue search experiences for your commerce store in a matter of
+minutes.
+
+::: interact
+
+If you are looking to use the ready-to-go project Interface X Archetype as your starting
+point, see **[Develop using Interface X Archetype](web-archetype-development-guide.md)**.
+
+:::
+
+For this tutorial, the Empathy Search API is used, but you can use any search API. This step-by-step
+guide requires a knowledge of **JavaScript** and **Vue.js**.
+
+You can find the X Components library in the
+[Interface X open source project in GitHub](https://github.com/empathyco/x).
+
+::: note Before you begin
+
+To integrate the X Components in a frontend UI, you need:
+
+- **Empathy Search API** to retrieve search data (or any other search API)
+- A **search adapter** to communicate with the search API.
+- Your commerce store built on a **Vue** project, or on a **React** project using the
+  [React Wrapper](https://github.com/empathyco/x/tree/main/packages/react-wrapper).
+
+:::
+
+##### Steps to integrate the X Components in your project:
+
+1. Install **project dependencies**.
+2. Configure the **search adapter**.
+3. Configure the **xPlugin**.
+4. Install and **initialize the xPlugin**.
+
+## Installing the dependencies
+
+To build your search and discovery UI, the following project dependencies are required:
+
+- **x-components** library
+  ([`@empathyco/x-components`](https://github.com/empathyco/x/tree/main/packages/x-components)):
+  Interface X Components Vue.js library to implement out-of-the-box search UI components
+  in a couple of minutes.
+
+- **x-adapter-platform**
+  ([`@empathyco/x-adapter-platform`](https://github.com/empathyco/x/tree/main/packages/x-adapter-platform)):
+  A search adapter connector that tells the app how to communicate with the Empathy Search API
+  you’re using, translating the response into understandable information for X Components. If
+  you are not using the Empathy Search API, you need to build your own search adapter. In order to
+  build your own search adapter, you can either extend the **x-adapter-platform** or create a new
+  one from scratch using the
+  [`@empathyco/x-adapter`](https://github.com/empathyco/x/tree/main/packages/x-adapter) package.
+
+- **x-types**
+  ([`@empathyco/x-types`](https://github.com/empathyco/x/tree/main/packages/search-types)): The data
+  model used in the X Components to define types.
+
+Install the project dependencies via `npm` as follows:
+
+```batch
+//Install the dependencies via npm.
+npm install --save @empathyco/x-components @empathyco/x-types @empathyco/x-adapter-platform
+```
+
+## Configuring the search adapter
+
+You will need the search adapter in the [xPlugin configuration](#3-configure-the-plugin).
+
+There are two libraries for making it easier to consume search APIs. The
+[`@empathyco/x-adapter`](https://github.com/empathyco/x/tree/main/packages/x-adapter), which is the
+interface you can use to build your own adapter for other APIs, and the
+[`@empathyco/x-adapter-platform`](https://github.com/empathyco/x/tree/main/packages/x-adapter-platform),
+which is the implementation to consume the Empathy Search Platform API, and it can be extended in
+case your search API is similar to it.
+
+::: warning
+
+If you do not use the Empathy Search API, you need to build your own adapter.
+
+:::
+
+For more information, see the
+[Empathy Search Adapter](https://github.com/empathyco/x/tree/main/packages/x-adapter) and
+[Empathy Platform Search Adapter](https://github.com/empathyco/x/tree/main/packages/x-adapter-platform)
+libraries.
+
+## Configuring the plugin
+
+Plugins are self-contained code that usually add global-level functionality to Vue projects. They’re
+specifically objects that expose an `install` method, allowing you to keep your components clear and
+small.
+
+The xPlugin is designed to connect the X Components to the Vue components in your project.
+
+**Import** the xPlugin in your Vue instance.
+
+```typescript
+import Vue from 'vue';
+import { xPlugin } from '@empathyco/x-components';
+import { adapter } from './my-adapter';
+import { store } from './my-store';
+```
+
+Then, **configure** the xPlugin. It has two key options you need to configure:
+
+1. **Adapter**: A search adapter is required to connect and communicate with the search API. Here
+   you’re using the `XAdapterPlatform` to communicate specifically with the Empathy Search Platform
+   API. If you are not using the Empathy Search Platform API, you need to build your own adapter.
+   See [Configure the search adapter](#2-configure-the-search-adapter).
+
+2. **Store**: The Vuex store. If you use a store for Vuex, you need to provide the store you’re
+   currently using for your project to the Vue instance.
+
+   ::: warning
+
+   If you don’t provide any parameters for the `store`, a default store is created automatically.
+   Leave the `store` blank **only if you’re not using any store** for Vuex.
+
+   :::
+
+## Installing and initializing the plugin
+
+Finally, the last step is to install and initialize the xPlugin. You need to do this in the
+`main.ts` or `main.js file` of the project.
+
+```typescript
+//Initialize the plugin. Pass the search adapter and the store you use as parameters.
+Vue.use(xPlugin, { adapter, store });
+```
+
+::: develop Next steps
+
+Once you have integrated the Interface X Components in your project, you're ready to start
+building your search and discovery UI:
+
+- Change the **configuration of the [X Components](web-how-to-use-x-components-guide.md)** or create
+  new ones.
+- Adapt the
+  **[design system](https://github.com/empathyco/x/blob/main/packages/x-components/contributing/design-system.md)**
+  to your branding.
+
+:::
+
+<!-- Manage [internationalization options](https://github.com/empathyco/x/tree/main/packages/x-translations) to support different languages.-->
+
+</br>
+
+---
+
+</br>
+<VideoContent
+:source="$withBase('/assets/media/videos/How-to-use-X-components-in-a-real-project.mp4')"
+:poster="$withBase('/assets/media/videos/How-to-use-X-components-in-a-real-project.jpeg')"
+>
+
+Watch how our frontend Team Lead, [Iván Tajes](https://github.com/tajespasarela), integrates the
+Interface&nbsp;X&nbsp;Components in a project from scratch.
+
+</VideoContent>

package/docs/experience-search-and-discovery/README.md

@@ -0,0 +1,131 @@
+---
+title: Experience search & discovery
+---
+
+# Experience search & discovery
+
+Search inevitably is key when people look for specific products in an online store. It's the door
+to the entire product catalogue, so having an outstanding, well-structured, and optimized search UI
+is a must.
+
+However, it’s not enough. With the advanced features provided by some well-known search engines,
+shoppers need a new dimension to **connect effortlessly** to the most relevant products, enjoy a
+**smooth user experience**, and take advantage of **outstanding search and discovery capabilities**.
+
+<img :src="$withBase('/assets/media/intro_experience_and_search.svg')" alt="Experience search and discovery">
+<br/>
+
+## Interface X and Interface X for Apps, the solution
+
+Interface&nbsp;X and Interface&nbsp;X for Apps are a collection of libraries that lets you create a
+smooth, personalized search and discovery experience, while significantly minimizing development
+time. Interface&nbsp;X, and its version for native apps, will renew your search experience interface
+layer, rendering the magic of search and delighting your shoppers with all experiences in one:
+**user**, **search**, **navigation**, and **product discovery**.
+
+There are many things to think about when designing a UI for search and discovery to provide a
+consistent user experience and look-and-feel: every little design element, the layout structure,
+animation, component, configuration, and behavior count. Interface&nbsp;X and Interface&nbsp;X for
+Apps cover everything and even go beyond, thanks to their standalone, configurable building blocks
+that allow you to quickly construct the search UI for your store:
+**Interface&nbsp;X&nbsp;Components** and **Interface&nbsp;X&nbsp;Components for Apps**.
+
+### Mix and match your experience
+
+Each Interface&nbsp;X&nbsp;Component represents a graphical part of the UI, with
+its own unique view and behavior. They’ve been smartly designed to **work together yet
+independently**, so a single component adds real value to your UI by itself. The more components you
+add and combine, the more functionality you get.
+
+You can craft your own **UI bundle with the right components for your store**. There are numerous
+X&nbsp;Components to choose from, and the catalogue evolves quickly with new experiences.
+
+To help you discover the components and leverage the UI design process, most of the
+X&nbsp;Components are distributed into **modules** which are intended for different purposes:
+functional experience, interface design and behavior, web and design standardization… Just pick and
+choose the modules and components that best suit your needs.
+
+::: details What does X mean?
+
+- Lightweight libraries
+- Developer friendly. Quick & easy to install and configure
+- Standalone. Work individually or together
+- Out-of-the-box. Ready to go!
+- In your pocket. Multiple components at your disposal
+- Mix & match. Customize to satisfy any design or behavior requirement
+- Mobile-ready. Designed both for web and native apps
+- Adapt to different search services
+- Easy-to-use. Intuitive search and discovery
+
+:::
+
+#### Discover Interface X Components for web
+
+Check out these X&nbsp;Components for Vue.js applications. They’ll certainly come in handy if you
+want to make the difference!
+
+<CardCarousel :cards="[
+    'x_popular_searches',
+    'x_history_queries',
+    'x_my_history',
+    'x_id_results',
+    'x_search_box',
+    'x_query_suggestions',
+    'x_related_tags',
+    'x_next_queries',
+    'x_recommendations',
+    'x_empathize',
+    'x_results',
+    'x_facets']"
+/>
+
+::: interact  
+
+Check out the **Interface X for web [open-source project](https://github.com/empathyco/x)** on
+GitHub!
+
+:::
+
+#### Discover Interface X Components for Apps
+
+Check out the X&nbsp;Components available for Interface&nbsp;X for Apps, that can help you create
+your native app search solution.
+
+<CardCarousel :cards="[
+    'x_popular_searches',
+    'x_history_queries',
+    'x_my_history',
+    'x_id_results',
+    'x_search_box',
+    'x_query_suggestions',
+    'x_related_tags',
+    'x_next_queries',
+    'x_empathize',
+    'x_results',]"
+/>
+
+::: warning
+
+Some X&nbsp;Components are supported by Empathy Platform search and discovery features. If you’re
+using a different search engine, make sure it supports all the functionalities you need.
+
+:::
+
+## Try X Components to…
+
+- Surprise your shoppers by **rendering shopping-aimed search and discovery features** that
+  intuitively guide and inspire them with trends, suggestions, and recommendations, based on your
+  shoppers’ behavior.
+- Add a **predictive layer** to your search UI that gathers all search functionalities in one, from
+  autocomplete and autosuggest to ideas of what to look for next.
+- Delight your shoppers with an **elegant and multi-configurable SERP** to help them discover what
+  they’re exactly looking for.
+- Enhance the shopping experience by adding **additional features to the SERP**, such as add-to-cart
+  buttons or product rating information.
+
+::: interact
+
+Explore the Empathy Platform [interactive map](/explore-empathy-platform/diagram/interface/) for a
+sneak peak of the X&nbsp;Components available!
+
+:::

package/docs/experience-search-and-discovery/empathize.md

@@ -0,0 +1,102 @@
+---
+title: Empathize UI
+---
+
+# Empathize
+
+Empathize is a UI container, but not just any container. It’s the
+**[predictive layer](/explore-empathy-platform/overview/predictive-layer.md)** for your search
+experience that is usually displayed below the search box. Consider it the natural companion of the
+**[search box](search-box.md)**, featuring search suggestions and recommendations.
+
+![Empathize](~@assets/media/xcomponents_func_empathize.gif)
+
+One of the characteristics of Interface X Components is that you can place them
+wherever you want. However, you know that the placement of the search box in your shop matters. So,
+why have search suggestions and recommendations spread all over the page, far away from the search
+box? The Empathize container brings everything together so that your shoppers perceive a smooth,
+effortless search experience.
+
+## Use Empathize with...
+
+Being the face of your predictive layer, Empathize comes into play before the search process starts
+and only makes sense when used with other components.
+
+Thanks to the nature of Interface X Components, you can [mix and match the components](/explore-empathy-platform/experience-search-and-discovery/readme.md#mix-and-match-your-experience)  you use within
+Empathize. For example, provide shoppers with search ideas and use Empathize to display popular
+search terms and trending products. Anticipate your shoppers’ intent with recent searches and
+query suggestions. Or give shoppers access to their [complete search history](my-history.md) and let them control tracking search data. There are lots of handy possibilities that you might want to place close to the
+search box.
+
+**Combine Empathize with:**
+
+- [Popular Searches](popular-searches.md)
+- [Recommendations](recommendations.md)
+- [History Queries](history-queries.md)
+- [Query Suggestions](query-suggestions.md)
+- [Next Queries](next-queries.md)
+- [ID Results](id-results.md)
+
+## How it works...
+
+Empathize is an event-driven component. It's determined by events that make it react to shoppers'
+actions, such as clicks or keystrokes. That is the Empathize magic; the component listens by default
+to some events to expand the container and others to collapse it. However, this behavior is
+configurable.
+
+The Empathize container expands when:
+
+- The search box is focused.
+- The shopper clicks on the input field.
+- A query is being typed.
+
+Likewise, the Empathize closes when:
+
+- The shopper closes the Empathize layer.
+- A query suggestion is selected.
+- The shopper presses Enter.
+- The search box loses focus.
+
+Also, it can listen to scroll events to expand and collapse the layer when shoppers scroll up or
+down.
+
+### Extend the performance
+
+The Empathize container is collapsible so that it expands and collapses on shopper interaction. By
+default, this behaviour matches the search input focus: clicking the search input expands the
+Empathize container. Likewise, if the search input loses focus, e.g. the shopper clicks on a
+suggestion and launches the search, the Empathize container disappears.
+
+Alternatively, combine Empathize with one of the scroll components to make it react to scroll in
+addition to or replacing the search box focus. You may prefer to make it more accessible with the
+Keyboard Navigation component. Your shoppers can navigate the components in Empathize with the
+keyboard arrow keys.
+
+<!--
+**Enhance Empathize usability with...**
+- Keyboard scroll
+- Keyboard navigation
+-->
+
+<!--link to keyboard navigation components when available-->
+
+## Spot the difference
+
+Here, Empathize is the **predictive layer** holding the advanced search capabilities built in the
+back. However, in backend terms, Empathize is an Empathy Platform service, fed by a **batch
+application**, that uses the interaction data collected by the
+[Tagging microservices](/explore-empathy-platform/capture-shopper-interaction/) to build advanced
+search capabilities, such as Query Suggestions and Popular Searches. Don’t get confused!
+
+## Tailor the web experience
+
+- Customize content. Display whatever search-related suggestion components you need.
+- Determine when Empathize appears and disappears.
+- Animate how the component opens and closes.
+
+::: interact
+
+Want to know more? Learn how to [configure](/develop-empathy-platform/ui-reference/components/empathize/x-components.empathize.md) your web
+experience.
+
+:::

package/docs/experience-search-and-discovery/facets-and-filters.md

@@ -0,0 +1,152 @@
+---
+title: Facets & Filters UI
+---
+
+# Facets & Filters UI
+
+Facets and Filters allow your shoppers to organize your product catalogue in different categories
+and narrow the search results to better find what they are looking for. Shoppers can set filters
+according to the categories or facets defined in the faceted menu, which is usually located on the
+left or upper side of the search engine results page or product listing page.
+
+<img :src="$withBase('/assets/media/x-components_func_facets.gif')" alt="Facets"> <br>
+
+X&nbsp;Components for facets present how you have categorized your products, displaying the
+different aspects available (brand, price, color…), while the filter-related components render the
+values for those aspects that shoppers can use to filter by ("Nestlé", "Kellogg’s" for _brand_;
+“€0 - €10”, “€10 - €50” for _price_; “blue”, “black”, “white” for _color_), allowing you to
+determine how to display them.
+
+<!--Originally, the X&nbsp;Components for facets and filters were designed for **search**. However,
+since they can precisely organize and filter your product catalogue to bring out the products that
+best fit your shoppers’ needs, you can also use them for **catalogue navigation** and **product
+discovery**. You can guide shoppers through your product catalogue faster, allowing them to navigate
+and browse different product classifications directly from the faceted menu in your shop, without
+having to search.-->
+
+::: interact
+
+Can't quite capture the concept? Learn more about
+[Facets and Filters](../overview/facets-and-filters-overview.md).
+
+:::
+
+## Build a faceted experience with X Components
+
+There is no need to reinvent the wheel to design a good faceting experience, but rather it’s better
+to understand the shopper’s journey and the frontend options available.
+
+Facets and filters can display as different UI element types (select list, search, range…) using the
+numerous X&nbsp;Components available. Flexibly combine X&nbsp;Components to build the connection
+with the product attributes in your catalogue. **Guide** shoppers towards relevant results in record
+time, giving them the opportunity to establish a **dialogue** with your product catalogue and easily
+decide what results to display by adding and clearing filters, or make information on product
+results **clearer and more accessible**, meeting different types of faceting layouts.
+
+<img :src="$withBase('/assets/media/x-components_func_facets.png')" alt="Facets" />
+
+::: details Rendering facets and filters
+
+X&nbsp;Components for facets and filters not only enhances your shoppers’ experience by supporting
+and rendering faceted search and navigation, but also provides different ways to display a faceted
+experience:
+
+</br>
+
+- **Standard facets**: a single-select list that offers a way to describe a product attribute,
+  together with the values available to filter by. For example, a _Color_ facet can include values
+  such as “red”, “blue”, “white”, “black”, or “green”.
+- **Hierarchical facets**: present filter values organized hierarchically, providing a parent-child
+  filtering relationship. Shoppers can filter using the parent subfacet or choose the child subfacet
+  as a more precise filter. For example, the _Category_ facet in a jewellery store can display
+  “Button”, “Short”, and “Long” as child filters for the “Earrings” parent filter.
+- **Number range facets**: allow shoppers to select a range of numerical values and narrow the
+  results within those ranges. Intended for price or size facets that have numeric value type
+  attributes. For example, the _Price_ facet in a grocery store can display “< €0.99”, “€1 – €4.99”,
+  “€5 – €9.99”, or “€10 – €19.99”. Implement **editable number range facets** and let your shoppers
+  define the numerical ranges they want to filter by. Shoppers can type the desired price range to
+  filter by in the _From_ - _To_ or _Min_ - _Max_ input fields available.
+
+:::
+
+::: details Extending facets and filters UI
+
+Apart from the main X&nbsp;Components for facets and filters that render product categories and
+their corresponding attributes in different ways, there are components available offering advanced
+options to enhance the faceted experience.
+
+</br>
+
+- **Collapse & expand** to initially display facets collapsed on page load with a predetermined
+  number of filter values. Use a Show more button to expand the full list.
+- **Search box** to perform a text-based search on the filter values so that shoppers quickly find
+  the filters to apply to the results set.
+- **Selected filters list** to keep track of the shopper’s selection and understand the results
+  displayed. Selected filters can be displayed together under the same list or be organized by
+  facets. Shoppers can deselect any of the previously applied filters or clear all at once to try
+  different filtering values.
+- **Selected filters first** to change the order in which filters are initially displayed within a
+  facet so that the selected filters come first in the list. Note that the order of facets and
+  filters is determined by your Search microservice, usually showing the filters with the highest
+  number of products.
+- **Product count** to display the number of matches or occurrences next to the facet filter.
+  Shoppers can instantly see how many products each filter contains, offering a valuable insight on
+  your product catalog.
+- **Zero count** to only display filter values for those filters that **match a product result**,
+  omitting all those filters that have zero occurrences. For example, the query “skirts” in a retail
+  shop returns a large number of results for women and kids, but none for men. In this case, the
+  _Category_ facet only displays the filters “Woman”, “Girl”, and “Baby”.
+
+</br>
+
+Besides, you can use X&nbsp;Components to customize other attributes and behaviors. Transform a
+value returned from the Search microservice of “20 - 50” into “€20 - €50” or turn a numerical value
+into icons or images such as stars for average rating-based filtering, for example.
+
+</br>
+
+You can also change the default single-select behavior and activate **multi-select** controls so
+that shoppers can select more than one filter value at a time from the same facet to expand results.
+
+:::
+
+## Tailor the web experience
+
+**Layout, location, and display**:
+
+- Place the facets menu wherever you prefer. However, facets are commonly positioned in the left
+  sidebar or as top horizontal facets.
+- Hide or show the facets & filter menu when search results are displayed. Display facets and
+  filters as collapsed lists at first.
+- Animate the display of different elements: facets, filters, and related lists (e.g. selected
+  filters list).
+- Build the layout of facets and filters at your ease: from dropdowns and checkboxes to switches,
+  tags, and sliders.
+
+**Data and content**:
+
+- Select which facets defined in your product catalogue you want to display according to your
+  business strategy or your shoppers’ needs.
+- Configure the content of filters. Allow shoppers to filter results using text, icons, or
+  checkboxes.
+- Configure the content of related buttons (e.g. Show more button). Show whatever you need: text or
+  icons.
+- Customize labels in the facets and filters list. Add a custom title for facets, filters, and
+  related lists (e.g. selected filters list).
+- Customize facet data at your ease. You can opt to render facets defined in your product catalogue
+  automatically, display custom facets, or even render a mix of them.
+
+::: warning
+
+Make sure your current Search microservice is compatible with this kind of configuration.
+
+:::
+
+::: interact
+
+Want to know more? Learn how to [configure](/develop-empathy-platform/ui-reference/components/facets/) your web
+experience.
+
+:::
+
+

package/docs/experience-search-and-discovery/history-queries.md

@@ -0,0 +1,64 @@
+---
+title: History Queries UI
+---
+
+# History Queries UI
+
+The History Queries UI component displays the search history, allowing shoppers to check previous
+searches and revisit products they’ve viewed before in a few clicks.
+
+![History Queries](~@assets/media/xcomponents_func_historyqueries.gif)
+
+::: interact
+
+Can't quite capture the concept? Learn more about
+[History Queries](../features/history-queries-overview.md).
+
+:::
+
+## Tailor the web experience
+
+- Configure the position and place it wherever you prefer. Combine it with the
+  [Empathize](empathize.md) container to display suggestions under the search bar on shopper
+  interaction.
+- Show as many history suggestions as you want.
+- Choose the number of search records to store in the browser’s local storage to refresh the history
+  list.
+- Animate the display of History Queries at your ease.
+- Customize content. Show whatever you need: text, images, icons.
+- Display History Queries only from successful searches. No result, no search record stored. (Search
+  X module required.)
+- Configure clear buttons at your convenience. Let shoppers clear previous searches one-by-one,
+  all-at-once, or either way.
+- Display only the refined queries to match shopper intent. For example, if “dress” is the initial
+  search, and it’s narrowed down using “long dress”, the history queries list only displays “long
+  dress” since it represents the shopper’s real intention.
+
+::: interact
+
+Want to know more? Learn how to [configure](/develop-empathy-platform/ui-reference/components/history-queries/) your web
+experience.
+
+:::
+
+## Extend the performance
+
+You can extend search history performance by combining it with the [Next Queries](next-queries.md)
+component. All suggestions for shoppers about what to look next can be filtered against the
+shopper’s search history so that only those suggestions that haven’t been used before in that
+session will display.
+
+Combine History Queries with the [Search module](/develop-empathy-platform/ui-reference/components/search/) to ease shoppers' frustrations. That way, you can
+configure it to display only successful history searches.
+
+::: note Search history tracking
+
+Use the [My History](my-history.md) component to access and control search history. Shoppers can view a complete list of history queries and decide to stop saving search history. If search history is disabled, the History Queries list is cleared.
+
+::: 
+
+::: interact 
+
+To know more about which data is stored in the browser’s data storage, check out [Interface X data privacy and browser local storage](web-local-storage.md).
+
+:::

package/docs/experience-search-and-discovery/id-results.md

@@ -0,0 +1,45 @@
+---
+title: ID Results UI
+---
+
+# ID Results UI
+
+The Identifier Results UI component presents a type of search results intended for product reference
+codes. When shoppers start typing, a reference code query type is detected, and a list displays
+instantly with query-matching product results. When shoppers select an identifier result hint from
+the list, they go directly to the product detail page (PDP).
+
+<img :src="$withBase('/assets/media/xcomponents_func_idresults.gif')" alt="ID Results">
+
+:::warning
+
+ID Results are generated using a Search service that searches the product catalogue by ID. For a
+correct performance, make sure that your current search service supports this type of feature.
+
+:::
+
+::: interact
+
+Don't quite understand ID results? Learn more about
+[ID Results](../features/id-results-overview.md).
+
+:::
+
+## Tailor the web experience
+
+- Configure the position and place it wherever you prefer. Combine it with the
+  [Empathize](empathize.md) container display the ID Results below the search bar on shopper
+  interaction.
+- Show as many ID Results as you want.
+- Animate the display of ID Results at your ease.
+- Customize content. Show whatever you need: text, images, icons.
+- Extend the performance with [results-related components](product-results-ui.md).
+- Meet your own code reference conventions and standards with multiple product reference patterns.
+
+::: interact
+
+Want to know more? Learn how to [configure](/develop-empathy-platform/ui-reference/components/identifier-results/) your web
+experience.
+
+:::
+