From ad2ab3a9d033a7eabb9f7de2c4d079cb8ea4946b Mon Sep 17 00:00:00 2001
From: herrardo <gerardov@empathy.co>
Date: Mon, 23 Oct 2023 15:26:50 +0200
Subject: [PATCH] docs(integration): update integration documentation for query
 preview with filters

---
 .../web-archetype-integration-guide.md        | 58 ++++++++++++++++++-
 1 file changed, 55 insertions(+), 3 deletions(-)

diff --git a/packages/x-components/static-docs/build-search-ui/web-archetype-integration-guide.md b/packages/x-components/static-docs/build-search-ui/web-archetype-integration-guide.md
index dcfd0493b9..7457d5bb68 100644
--- a/packages/x-components/static-docs/build-search-ui/web-archetype-integration-guide.md
+++ b/packages/x-components/static-docs/build-search-ui/web-archetype-integration-guide.md
@@ -319,9 +319,14 @@ functions to integrate Interface&nbsp;X in your website. You can access these fu
 ### Dynamic query results preview
 
 The `queriesPreview` parameter settings can be changed to dynamically preview product results from
-the queries you define according to your brand's strategy. Use the `setSnippetConfig` function in
-the [`X API`](#x-api) object to determine the queries to be previewed dynamically depending on the
-section the shopper is visiting in your commerce store, for instance, or any other scenario.
+the queries you define according to your brand's strategy.
+
+You may set the `queriesPreview` in two ways:
+
+- In the initialization object as parameter.
+- Later on , using the `setSnippetConfig` function in the [`X API`](#x-api) object to determine the
+  queries to be previewed dynamically depending on the section the shopper is visiting in your
+  commerce store, for instance, or any other scenario.
 
 The following example shows you how to change dynamically the preview of query results in the _kids_
 and _adult_ sections:
@@ -353,3 +358,50 @@ and _adult_ sections:
   }
 </script>
 ```
+
+#### Adding filters
+
+The `queriesPreview` accept additional parameters that allow to filter the result set. See the
+following example:
+
+```html
+<script>
+  InterfaceX.setSnippetConfig({
+    queriesPreview: [
+      {
+        query: 'backpack',
+        title: 'Back to School!',
+        filters: ['brand:acme', 'collection:summer']
+      }
+    ]
+  });
+</script>
+```
+
+::: note
+
+The syntax to each filter is the same one as the one sent to the search request when selecting a
+filter in the interface.
+
+:::
+
+#### Adding extra params
+
+On top of that, extra parameters can be added to the search request of the `queriesPreview`, for
+instance:
+
+```html
+<script>
+  InterfaceX.setSnippetConfig({
+    queriesPreview: [
+      {
+        query: 'backpack',
+        title: 'Back to School!',
+        extraParams: {
+          sort: 'price desc'
+        }
+      }
+    ]
+  });
+</script>
+```