{"id":7941,"date":"2021-01-05T15:21:30","date_gmt":"2021-01-05T18:21:30","guid":{"rendered":"https:\/\/impresee.com\/?page_id=7941"},"modified":"2023-09-05T17:12:24","modified_gmt":"2023-09-05T20:12:24","slug":"integrating-impresee-using-impresees-snippet","status":"publish","type":"page","link":"https:\/\/impresee.com\/es\/integrating-impresee-using-impresees-snippet\/","title":{"rendered":"Integrating Impresee using Impresee&#8217;s snippet"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; da_disable_devices=&#8221;off|off|off&#8221; global_colors_info=&#8221;{}&#8221; da_is_popup=&#8221;off&#8221; da_exit_intent=&#8221;off&#8221; da_has_close=&#8221;on&#8221; da_alt_close=&#8221;off&#8221; da_dark_close=&#8221;off&#8221; da_not_modal=&#8221;on&#8221; da_is_singular=&#8221;off&#8221; da_with_loader=&#8221;off&#8221; da_has_shadow=&#8221;on&#8221;][et_pb_row column_structure=&#8221;3_4,1_4&#8243; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;3_4&#8243; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h1 class=\"flex-auto min-width-0 mb-2 mb-md-0 mr-0 mr-md-2 gh-header-title\">Integraci\u00f3n mediante el snippet de Impresee<\/h1>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p class=\" translation-block\"><strong>Este documento describe c\u00f3mo integrar el <em>snippet de Impresee<\/em> en tu tienda en l\u00ednea, junto con todas las opciones que se pueden utilizar para configurarlo.<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p>[\/et_pb_text][et_pb_text module_id=&#8221;basics&#8221; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h2>Lo esencial<\/h2>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p>El snippet de Impresee es un peque\u00f1o c\u00f3digo en <em>Javascript<\/em> que tiene todo lo necesario para integrar los servicios de b\u00fasqueda de Impresee en cualquier e-commerce. Incluye las siguientes funcionalidades:<\/p>\n<ul>\n<li>Canvas de dibujo<\/li>\n<li>Opci\u00f3n para cargar im\u00e1genes desde el sistema de archivos o directamente desde la c\u00e1mara<\/li>\n<li>Un modal que muestra la imagen cargada, y que permite cortarla<\/li>\n<li>Ejecuta b\u00fasquedas visuales<\/li>\n<li>Ejecuta b\u00fasqueda instant\u00e1neas<\/li>\n<li>Muestra resultados de b\u00fasqueda<\/li>\n<li>Pantalla de b\u00fasqueda instant\u00e1nea<\/li>\n<li>Modo de b\u00fasqueda completa, con filtros, ordenamiento y opciones de paginamiento<\/li>\n<\/ul>\n<p>El snippet funciona cargando todo el c\u00f3digo necesario para realizar las b\u00fasquedas visuales y por texto en el navegador. Para operar, capturar\u00e1 los clics en los botones configurados para activar cada tipo de b\u00fasqueda.<\/p>\n<p>[\/et_pb_text][et_pb_text module_id=&#8221;integration&#8221; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h2>Integraci\u00f3n<\/h2>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p class=\" translation-block\">El snippet debe integrarse en cualquier vista de la tienda en l\u00ednea donde se habilitar\u00e1n las funciones de Impresee. Generalmente basta con agregar el c\u00f3digo al lado de la barra de b\u00fasqueda. Adem\u00e1s, los botones que activan cada tipo de b\u00fasqueda deben agregarse al sitio <strong>(esto debe hacerse s\u00f3lo si la b\u00fasqueda por texto est\u00e1 deshabilitada, en caso contrario es opcional)<\/strong>. A continuaci\u00f3n se muestra un ejemplo de c\u00f3mo podr\u00eda verse el snippet:<\/p>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; text_text_color=&#8221;#000000&#8243; background_color=&#8221;rgba(239,240,241,0)&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;0px|0px|0px|0px|false|false&#8221; global_colors_info=&#8221;{}&#8221;]<script src=\"https:\/\/gist.github.com\/CamilaAlvarez\/c62918177fe529873385bc376ce254e3.js\"><\/script>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p class=\" translation-block\"><strong><code>_wssee<\/code><\/strong> es una variable javascript que contiene la configuraci\u00f3n de Impresee, la cual est\u00e1 disponible a nivel de ventana. Las propiedades de este objeto indican qu\u00e9 tipo de servicios de b\u00fasqueda se habilitar\u00e1n y c\u00f3mo se mostrar\u00e1n los resultados. Este objeto cuenta con diferentes llaves que te permitir\u00e1n personalizar el proceso de b\u00fasqueda y los resultados. S\u00f3lo se requiere una llave,  <strong><code>setup<\/code><\/strong>. El valor asignado a <strong><code>setup<\/code><\/strong> es un objeto que describe c\u00f3mo se activar\u00e1 la b\u00fasqueda, sus aplicaciones Impresee y otras cosas como el color principal de los resultados y el contenedor de la grilla de resultados. Para habilitar el servicio de b\u00fasqueda por imagen, debe incluir una clave <strong><code>photoButton<\/code><\/strong> (la clase CSS del bot\u00f3n que activar\u00e1 la b\u00fasqueda visual) y una llave <strong> <code>photoApp<\/code><\/strong> (su aplicaci\u00f3n de b\u00fasqueda por imagen de Impresee) en <strong><code>setup<\/code><\/strong>. Para habilitar el servicio de b\u00fasqueda por dibujo, debe incluir una llave <strong><code>sketchButton<\/code><\/strong> (la clase CSS del bot\u00f3n que activar\u00e1 la b\u00fasqueda por boceto) y una <strong><code>sketchApp<\/code><\/strong> (su aplicaci\u00f3n de b\u00fasqueda por dibujo de Impresee) en <strong><code>setup<\/code><\/strong>. Por ejemplo, supongamos que tienes dos botones como se muestra a continuaci\u00f3n y deseas configurar la b\u00fasqueda por imagen y la b\u00fasqueda por dibujo.<\/p>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<script src=\"https:\/\/gist.github.com\/CamilaAlvarez\/7547b4f47bde3ecb0fbcc9bb4ebc7ed0.js\"><\/script>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p class=\" translation-block\">Lo que debes hacer es crear <strong><code>_wssee<\/code><\/strong>, y asignar la llave <strong><code>setup<\/code><\/strong> c\u00f3mo se muestra abajo, incluyendo las llaves para <strong><code>photo<\/code><\/strong> y <strong><code>sketch<\/code><\/strong><\/p>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; link_option_url=&#8221;#configuration&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p>\n<script src=\"https:\/\/gist.github.com\/CamilaAlvarez\/3df5812ff6c50cdd68390bf0e80ed5ec.js\"><\/script>\n<\/p>\n<p>[\/et_pb_text][et_pb_text module_id=&#8221;configuration&#8221; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h2>Configuraci\u00f3n<\/h2>\n<p>&nbsp;<\/p>\n<p>[\/et_pb_text][et_pb_text module_id=&#8221;general&#8221; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h3>Opciones generales<\/h3>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p class=\" translation-block\">La variable <strong><code>setup<\/code><\/strong> acepta opciones extra, las que permiten personalizar c\u00f3mo se muestran los resultados, su disposici\u00f3n y m\u00e1s:<\/p>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<pre><code>| Option                   | Description                                                                                                                            | Type        | Default                   | Example                                                     |\n|--------------------------|----------------------------------------------------------------------------------------------------------------------------------------|-------------|---------------------------|-------------------------------------------------------------|\n| `loadAfterPageRender`    | Indicates whether the code should be loaded before, or after the whole site loads (useful when search buttons are created dynamically) | `boolean`   | `false`                   | `true`                                                      |\n| `container`              | Selector of the DOM element that'll contain the search results                                                                         | `string`    | `null`                    | `.container`                                                |\n| `mainColor`              | Main color of the search interface, which can be seen on the buttons                                                                   | hex value   | `#9CD333`                 | #999999                                                     |\n| `afterLoadResults`       | Function that is called after results are added into the DOM                                                                           | `function`  | `function(searchType) {}` | `function(searchType) {   console.log('results'); }`        |\n| `beforeLoadResults`      | Function that is called before results are added into the DOM                                                                          | `function`  | `function(searchType) {}` | `function(searchType) {   console.log('before results'); }` |\n| `onSearchFailed`         | Function called when a search fails                                                                                                    | `function`  | `function() {}`           | `function() {   console.log('search failed'); }`            |\n| `onCloseResults`         | Function called when results are closed                                                                                                | `function`  | `function() {}`           | `function() {   console.log('search closed'); }`            |\n| `addSearchDataToUrl`     | Add search related data to the URL, this allows reloading the search when refreshing the webpage                                       | `boolean`   | `false`                   | `true`                                                      |\n| `onlyCameraAsInput`      | Used in mobile devices to only allow the usage of images only taken directly from the camera                                           | `boolean`   | `false`                   | `true`                                                      |\n| `disableImageCrop`       | Used to disable the image crop screen. When true, the user is no loner given the option to crop the query                              | `boolean`   | `false`                   | `true`                                                      |\n| `numberFractionDigits`   | Number of fraction digits to be included in prices                                                                                     | `int`       | `2`                       | `0`                                                         |\n| `decimalSeparator`       | Char used to separate fraction digits from the whole number                                                                            | `char`      | `,`                       | `.`                                                         |\n| `thousandsSeparator`     | Char used to separate thousands from the whole number                                                                                  | `char`      | `.`                       | `,`                                                         |\n| `currencySymbolAtTheEnd` | Indicates whether the currency symbol should be at the back of the price or not                                                        | `boolean`   | `false`                   | `true`                                                      |\n| `colorOnSale`            | Color of the \"On Sale\" label that appears when products are on sale                                                                    | `hex value` | `#FF0000`                 | `#9CD333`                                                   |\n| `useDetection`           | Indicate whether to sue detection or not (Note: use true ONLY if you selected fashion &amp; apparel)                                       | `bool`      | `false`                   | `true`                                                      |\n| `displayOnSaleProducts`  | Show \"On sale\" sign on products with a discount                                                                                        | `bool`      | `true`                    | `false`                                                     |\n| `currencySymbolAtTheEnd` | Place currency symbol at the end of the price (right side)                                                                             | `bool`      | `false`                   | `true`                                                      |\n| `customGoogleAnalytics`  | Google analytics code, used to register search events                                                                                  | `string`    | ``                        | `UA-XXXXX-Y`                                                |<\/code><\/pre>\n<p>[\/et_pb_text][et_pb_text module_id=&#8221;text&#8221; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h3>B\u00fasqueda por texto<\/h3>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p>Para configurar y habilitar la b\u00fasqueda por texto o la funci\u00f3n de b\u00fasqueda instant\u00e1nea, tambi\u00e9n debe incluir una llave <strong><code>searchByText<\/code><\/strong> , la que tiene 3 campos obligatorios:<\/p>\n<ol>\n<li><strong><code>useText<\/code><\/strong>: booleano que indica si la b\u00fasqueda instant\u00e1nea estar\u00e1 habilitada o no en el sitio (por ejemplo, true)<\/li>\n<li><strong><code>searchBarSelector<\/code><\/strong>: selector del input que corresponde a la barra de b\u00fasqueda del sitio, donde los usuarios pueden escribir (por ejemplo #searchbar)<\/li>\n<li><strong><code>fullTextSearchContainerSelector<\/code><\/strong>: selector del contenedor de los resultados de b\u00fasqueda. Estos resultados contienen filtros, paginaci\u00f3n y m\u00e1s (por ejemplo #root)<\/li>\n<\/ol>\n<p class=\" translation-block\">La llave <strong><code>searchByText<\/code><\/strong> tambi\u00e9n incluye campos opcionales, descritos abajo:<\/p>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<pre><code>| Option                            | Description                                                                                                                                                                                                 | Type        | Default                   | Example                                                                 |\n|-----------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------|---------------------------|-------------------------------------------------------------------------|\n| `searchDelayMilis`                | The delay in milliseconds between the latest user input and the execution of the search result.                                                                                                             | `int`       | `300`                     | `100`                                                                   |\n| `pressSeeAll`                     | Function that is executed when the user presses the \"see all results buttons\" or presses enter on the search input                                                                                          | `function`  | `function (queryText) {}` | `function(queryText) { window.location.href = \"?IText=\" + queryText; }` |\n| `onCloseResults`                  | Function that is executed when the user closes the full results screen                                                                                                                                      | `function ` | `function () {}`          | `function () { console.log('closing results') }`                        |\n| `onOpenDropDownResults`           | Function that is executed when the Instant Search dropdown appears, that is when a user clicks on the search bar                                                                                            | `function ` | `function () {}`          | `function () { console.log('opening dropdown') }`                       |\n| `onCloseResults`                  | Function that is executed when the Instant Search dropdown is closed                                                                                                                                        | `function`  | `function () {}`          | `function () { console.log('closing dropdown') }`                       |\n| `fullTextSearchContainerSelector` | Selector of the DOM element that will contain the search results grid                                                                                                                                       | `string`    | `null`                    | `.container`                                                            |\n| `computeTopFromElement`           | Selector of the DOM element to be used when position the search results grid vertically (usually it should be to site's header)                                                                             | `string`    | `null`                    | `header`                                                                |\n| `instantFull`                     | Tells the snippet to load the results from the full search without reloading the site  (we recommend to set this option to true and use the  `computeTopFromElement` to locate the grid in a nice position) | `bool`      | `false`                   | `true`                                                                  |\n| `useButtonAsSearchBar`            | Displays a button in the lower left corner of the site, which will work as a search bar. Recommended for sites with no search bar                                                                           | `bool`      | `false`                   | `true`                                                                  |\n| `useText`                         | Use search by text feature                                                                                                                                                                                  | `bool`      | `true`                    | `false`                                                                 |\n| `searchBarSelector`               | Search bar selector                                                                                                                                                                                         | `string`    | `[name=q]`                | `[name=q],input[name=s]`                                                |\n| `buttonSearchBarLocation`         | Position of the floating button. Possible values: BOTTOM_LEFT, TOP_LEFT, MIDDLE_LEFT, BOTTOM_RIGHT, TOP_RIGHT, MIDDLE_RIGHT                                                                                 | `string`    | `BOTTOM_LEFT`             | `TOP_RIGHT`                                                             |\n                                            <\/code><\/pre>\n<p>&nbsp;<\/p>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p class=\" translation-block\"><em><strong>Nota:<\/strong><\/em> Los resultados de b\u00fasqueda completos se cargar\u00e1n cuando el fragmento de Impresee encuentre un par\u00e1metro de consulta <strong><code>IText<\/code><\/strong>. Es por eso que recomendamos configurar la funci\u00f3n <strong><code>pressSeeAll<\/code><\/strong> en<\/p>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<script src=\"https:\/\/gist.github.com\/CamilaAlvarez\/2b61b70333b244c61b8494e86220fba7.js\"><\/script>[\/et_pb_text][et_pb_text module_id=&#8221;labels&#8221; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h3>Etiquetas<\/h3>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p class=\" translation-block\">El objeto <strong><code>_wssee<\/code><\/strong> tambi\u00e9n tiene una llave opcional <strong><code>texts<\/code><\/strong>, que corresponde a un objeto, que permite la personalizaci\u00f3n de etiquetas textuales que aparecen en pantalla, canvas, pantalla de recorte, entre otros.<\/p>\n<p class=\" translation-block\">Con esto <strong><code>_wssee<\/code><\/strong> se puede ver como sigue:<\/p>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<script src=\"https:\/\/gist.github.com\/CamilaAlvarez\/17ccbed4b9d989b16ea5918eba5a73f9.js\"><\/script>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p class=\" translation-block\">Las llaves disponibles para <strong><code>texts<\/code><\/strong> se muestran abajo:<\/p>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<pre><code>| Key                          | Description                                                                                                                | Default                                                         |\n|------------------------------|----------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------|\n| `searchResultsTitle`         | Title of the grid that contains the search results                                                                         | Search results                                                  |\n| `searchButtonLabel`          | Label of any search button                                                                                                 | Search                                                          |\n| `oops`                       | Surprise exclamation used when an error occurs                                                                             | Oops ...                                                        |\n| `error`                      | Header of the error screen                                                                                                 | We didn't expect this at all.                                   |\n| `errorDescription`           | Message displayed on the error screen                                                                                      | It seems our system is overheating, please try again later.     |\n| `dragAndDropImageTitle`      | Header of the drag and drop image screen                                                                                   | Drag &amp; Drop an image or just click here                         |\n| `dragAndDropImageMessage`    | Message displayed on the drag and drop image screen                                                                        | Upload the image you'd like to use to search                    |\n| `customSelectionSearchLabel` | Message displayed when re-cropping a query                                                                                 | Custom search                                                   |\n| `startWriting`               | Message displayed before the user starts typing in the Instant Search dropdown                                             | Start typing to search                                          |\n| `currencySymbol`             | Currency symbol used when displaying prices                                                                                | $                                                               |\n| `searchByPhoto`              | Search by photo label that appears on the Instant Search dropdown                                                          | Search by photo                                                 |\n| `searchBySketch`             | Search by drawing label that appears on the Instant Search dropdown                                                        | Search by drawing                                               |\n| `seeAllResults`              | See all results label that appears on the Instant Search dropdown after results are painted on the screen                  | See all results                                                 |\n| `noMatchingResult`           | Text that appears when no results match                                                                                    | We couldn't find any results for:                               |\n| `onSale`                     | On sale label used on products that are on sale                                                                            | On sale                                                         |\n| `resultsTitleforTextSearch`  | Header for the full text search results screen (Desktop)                                                                   | Search results for                                              |\n| `numberResultsTitle`         | Header that displays the number of results (Desktop). If you decide to modify this text, please keep the placeholder ({1}) | Displaying {1} results                                          |\n| `resultsTitleForMobile`      | Header for the full text search results screen (Mobile) If you decide to modify this text, please keep the placeholders    | Displaying {1} results for \\\"{2}\\\"                              |\n| `filtersTitle`               | Header for the filter column (Mobile)                                                                                      | Filters                                                         |\n| `clearFilters`               | Clear filters button label                                                                                                 | Clear filters                                                   |\n| `sortBy`                     | Sort by select label                                                                                                       | Sort by                                                         |\n| `applyFilters`               | Apply filters button label (Mobile only)                                                                                   | Apply                                                           |\n| `tryAgainWhenNoResults`      | Label that motivates users to keep searching when no results match                                                         | Why don't you try drawing or taking a picture of what you want? |<\/code><\/pre>\n<p>[\/et_pb_text][et_pb_text module_id=&#8221;hints&#8221; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h3>Hints<\/h3>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<ul>\n<li class=\" translation-block\">La clase CSS <strong><code>ImpreseeHide<\/code><\/strong> se puede utilizar para ocultar elementos. Un detalle interesante es que cuando se cierran los resultados de la b\u00fasqueda, nuestro sistema encontrar\u00e1 todos los elementos con esta clase y eliminar\u00e1 la clase de ellos. Esto le permite ocultar ciertos elementos al mostrar los resultados. Esto puede resultar \u00fatil cuando se utiliza la opci\u00f3n <strong><code>container<\/code><\/strong>.<\/li>\n<li class=\" translation-block\">Si decides utilizar la clase <strong><code>ImpreseeHide<\/code><\/strong> te recomendamos que utilices las funciones <strong><code>beforeLoadResults<\/code><\/strong> o <strong><code>afterLoadResults<\/code><\/strong> para localizar los objetos a ocultar. Tambi\u00e9n puedes agregar la clase <strong><code>ImpreseeHide<\/code><\/strong> a esos elementos dentro de cualquiera de estas funciones.<\/li>\n<li>The <strong><code>beforeLoadResults<\/code><\/strong> y <strong><code>afterLoadResults<\/code><\/strong> receive the search type as a parameter, this means that you can customize the look and feel of Instant search, search by sketch and search by photo separately. The search types of these kinds of search are:\n<ul>\n<li>Instant search: <strong><code>instant search<\/code><\/strong><\/li>\n<li>Full search by text: <strong><code>text<\/code><\/strong><\/li>\n<li>Search by photo: <strong><code>photo<\/code><\/strong><\/li>\n<li>Search by drawing: <strong><code>sketch<\/code><\/strong><\/li>\n<\/ul>\n<\/li>\n<li class=\" translation-block\">Si decides insertar los resultados de la b\u00fasqueda en alg\u00fan lugar de su sitio, toma en cuenta que esto podr\u00eda fallar si el contenedor oculta el contenido desbordado (CSS <code><strong>overflow:hidden<\/strong><\/code>). Puedes usar la funci\u00f3n <strong><code>beforeLoadResults<\/code><\/strong> para modificar el comportamiento de desbordamiento del contenedor y luego puede usar la funci\u00f3n <strong><code>onCloseResults<\/code><\/strong>. funcionar para que vuelva a la normalidad.<\/li>\n<\/ul>\n<p>Si tienes alguna pregunta sobre la integraci\u00f3n a trav\u00e9s de este snippet, comun\u00edcate con <a href=\"mailto:support@impresee.com\">support@impresee.com<\/a><\/p>\n<p>[\/et_pb_text][\/et_pb_column][et_pb_column type=&#8221;1_4&#8243; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_button button_url=&#8221;#basics&#8221; button_text=&#8221;Basics&#8221; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; custom_button=&#8221;on&#8221; button_text_color=&#8221;#000000&#8243; button_bg_color=&#8221;rgba(0,0,0,0)&#8221; button_border_width=&#8221;0px&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_button][et_pb_button button_url=&#8221;#integration&#8221; button_text=&#8221;Integration&#8221; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; custom_button=&#8221;on&#8221; button_text_color=&#8221;#000000&#8243; button_bg_color=&#8221;rgba(0,0,0,0)&#8221; button_border_width=&#8221;0px&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_button][et_pb_button button_url=&#8221;#configuration&#8221; button_text=&#8221;Configuration&#8221; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; custom_button=&#8221;on&#8221; button_text_color=&#8221;#000000&#8243; button_bg_color=&#8221;rgba(0,0,0,0)&#8221; button_border_width=&#8221;0px&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_button][et_pb_button button_url=&#8221;#general&#8221; button_text=&#8221;General options&#8221; button_alignment=&#8221;left&#8221; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; custom_button=&#8221;on&#8221; button_text_color=&#8221;#000000&#8243; button_bg_color=&#8221;rgba(0,0,0,0)&#8221; button_border_width=&#8221;0px&#8221; button_font=&#8221;|300|||||||&#8221; button_use_icon=&#8221;off&#8221; custom_margin=&#8221;|||30px|false|false&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_button][et_pb_button button_url=&#8221;#text&#8221; button_text=&#8221;Search by text&#8221; button_alignment=&#8221;left&#8221; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; custom_button=&#8221;on&#8221; button_text_color=&#8221;#000000&#8243; button_bg_color=&#8221;rgba(0,0,0,0)&#8221; button_border_width=&#8221;0px&#8221; button_font=&#8221;|300|||||||&#8221; button_use_icon=&#8221;off&#8221; custom_margin=&#8221;|||30px|false|false&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_button][et_pb_button button_url=&#8221;#labels&#8221; button_text=&#8221;Labels&#8221; button_alignment=&#8221;left&#8221; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; custom_button=&#8221;on&#8221; button_text_color=&#8221;#000000&#8243; button_bg_color=&#8221;rgba(0,0,0,0)&#8221; button_border_width=&#8221;0px&#8221; button_font=&#8221;|300|||||||&#8221; button_use_icon=&#8221;off&#8221; custom_margin=&#8221;|||30px|false|false&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_button][et_pb_button button_url=&#8221;#hints&#8221; button_text=&#8221;Hints&#8221; button_alignment=&#8221;left&#8221; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; custom_button=&#8221;on&#8221; button_text_color=&#8221;#000000&#8243; button_bg_color=&#8221;rgba(0,0,0,0)&#8221; button_border_width=&#8221;0px&#8221; button_font=&#8221;|300|||||||&#8221; button_use_icon=&#8221;off&#8221; custom_margin=&#8221;|||30px|false|false&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_button][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>","protected":false},"excerpt":{"rendered":"<p>Integration via the Impresee SnippetThis document describes how you can integrate the Impresee snippet into your online store, and also all the options you can use to configure it. &nbsp;BasicsThe Impresee snippet is a short piece of code written in Javascript that has all the necessary to integrate an e-commerce site with Impresee\u2019s search services. [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"<!-- wp:paragraph -->\n<p>The Impresee snippet is a short piece of code written in <em>Javascript<\/em> that has all the necessary to integrate an e-commerce site with Impresee\u2019s search services. The functionalities it includes are the following:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>A drawing canvas<\/li><li>Option to upload images from the filesystem or directly from a camera<\/li><li>A modal window that displays the uploaded image, which allows cropping the picture<\/li><li>Performing visual searches<\/li><li>Performing instant searches<\/li><li>Displaying search results<\/li><li>Instant search screen<\/li><li>Full search screen, with filters, ordering and pagination options<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>The snippet works by loading all the code that is necessary to perform the visual searches into the browser. To operate, the snippet will capture the clicks on the buttons that are set to activate each type of visual search.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Integration<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>The snippet must be integrated into any view of the online store where Impresee\u2019s features are to be enabled. Generally, it is enough to add the code next to the search bar.<br>In addition, the buttons that trigger each type of search must be added into the site (this must be done only if the <code>search by text<\/code> is disabled, it is otherwise optional).<br>An example of how the snippet could look like is shown below:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code>&lt;!-- Impresee code--&gt;\n&lt;script type=\"text\/javascript\"&gt;\n      window._wssee = window._wssee || &#91;];\n      window._wssee.push({\n        setup: {\n          photoButton: \"search-by-photo\", \n          photoApp: \"your_search_by_image_code\",\n          sketchButton: \"search-by-sketch\", \n          sketchApp: \"your_search_by_drawing_code\",\n          loadAfterPageRender: true,\n          useDetection: false,\n          addSearchDataToUrl: false,\n          displayOnSaleProducts: true,\n          onlyCameraAsInput: false,\n          disableImageCrop: false,\n          mainColor: \"#bababa\",\n          numberFractionDigits: 2,\n          thousandsSeparator: \".\",\n          decimalSeparator: \",\",\n          currencySymbolAtTheEnd: false,\n          colorOnSale: \"#ff0000\",\n          customGoogleAnalytics: \"YOU GOOGLE ANALYTICS CODE OR EMPTY\",\n          afterLoadResults: function (searchType) { },\n          beforeLoadResults: function (searchType) { },\n          onSearchFailed: function () { },\n          onCloseResults: function () { },\n        },\n        searchByText: {\n          useText: true,\n          searchBarSelector: \"&#91;name=q],input&#91;name=s]\",\n          textSearchApp: 'your_search_by_text_code',\n          searchDelayMilis: 300,\n          fullTextSearchContainerSelector: \"body\",\n          computeTopFromElement: \"header,.header\",\n          useButtonAsSearchBar: true,\n          buttonSearchBarLocation: \"BOTTOM_LEFT\",\n          pressSeeAll: function(queryText) {\n          },\n          onCloseResults: function() {\n          },\n          onOpenDropDownResults: function() {\n          },\n        },\n        texts: {\n          currencySymbol : \"$\",\n          searchResultsTitle : \"Search results\",\n          searchButtonLabel : \"Search\",\n          oops : \"Oops...\",\n          error : \" We didn't expect this at all.\",\n          errorDescription : \"It seems our system is overheating, please try again later.\",\n          dragAndDropImageTitle : \"Drag &amp; Drop an image or just click here\",\n          dragAndDropImageMessage : \"Upload the image you'd like to use to search\",\n          customSelectionSearchLabel : \"Custom search\",\n          recommendedCategories : \"Recommended categories\",\n          startWriting : \"Start typing to search\",\n          seeAllResults : \"See all results\",\n          noMatchingResult : \"We couldn't find any results for: \",\n          onSale : \"On sale\",\n          searchRecommendedProducts: \"Recommended products\",\n          numberResultsTitle : \"Displaying {1} results\",\n          resultsTitleForMobile : \"Displaying {1} results for \"{2}\"\",\n          filtersTitle : \"Filters\",\n          clearFilters : \"Clear filters\",\n          sortBy : \"Sort by\",\n          applyFilters : \"Apply\",\n          tryAgainWhenNoResults : \"Why don't you try drawing or taking a picture of what you want?\",\n          searchByPhoto: \"Search by image\",\n          searchBySketch: \"Search by drawing\",\n          resultsTitleforTextSearch: \"Search results for\"\n        },\n      });\n    var impresee = document.createElement(\"script\");\n    impresee.type = \"text\/javascript\";\n    impresee.async = true;\n    impresee.src = \"https:\/\/cdn.impresee.com\/snippet\/v4.4\/impresee.min.js\";\n    var first = document.getElementsByTagName(\"script\")&#91;0];\n    first.parentNode.insertBefore(impresee, first);\n&lt;\/script&gt;\n&lt;!-- End Impresee code--&gt;<\/code><\/pre>\n<!-- \/wp:code -->\n\n<!-- wp:paragraph -->\n<p><code>_wssee<\/code> is a javascript object variable that contains Impresee\u2019s configuration, which is available at window level. The properties of this object indicate what kind of search services will be enabled and how the results will be displayed.<br>This object has different keys that will allow you to customize the search process and results. There is only one key that is required, which is the <code>setup<\/code> key. The value assigned to <code>setup<\/code> is an object that describes how the search will be triggered, your Impresee applications, and other things such as the main color of the results and the container of the grid of results.<br>To enable the search-by-picture service you must include a <code>photoButton<\/code> key (the CSS class of the button that'll trigger the visual search), and a <code>photoApp<\/code> key (your Impresee search-by-picture application) properties in <code>setup<\/code>.<br>To enable the search-by-sketch service you must include a <code>sketchButton<\/code> key (the CSS class of the button that'll trigger the search by sketch), and a <code>sketchApp<\/code> key (your Impresee search-by-sketch application) properties in <code>setup<\/code>.<br>For example, suppose that you have two buttons as shown below, and you wish to configure both search-by-picture and search-by-sketch.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code>&lt;img class=\"search-by-photo\" src=\"img\/photo.svg\"\/&gt;\n&lt;img class=\"search-by-sketch\" src=\"img\/sketch.svg\"\/&gt;<\/code><\/pre>\n<!-- \/wp:code -->\n\n<!-- wp:paragraph -->\n<p>What you have to do is create the <code>_wssee<\/code>, and assign a <code>setup<\/code> key as shown below object and add both a <code>photo<\/code> and a <code>sketch<\/code> properties, as shown below<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code>      window._wssee = window._wssee || &#91;];\n      window._wssee.push({\n        setup: {\n          photoButton: \"search-by-photo\",\n          sketchButton: \"search-by-sketch\",\n          photoApp: \"da59c2aa-3c29-4f75-9c9d-4dce8de8a022\",\n          sketchApp: \"69d39983-d67e-4959-8fb1-ffb86fec25eb\" \n        }\n      });<\/code><\/pre>\n<!-- \/wp:code -->\n\n<!-- wp:paragraph -->\n<p>The <code>setup<\/code> variable accepts extra optional properties, these options allows you to customize how the results will be displayed, how the layout will look, and more:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code>| Option                   | Description                                                                                                                            | Type        | Default                   | Example                                                     |\n|--------------------------|----------------------------------------------------------------------------------------------------------------------------------------|-------------|---------------------------|-------------------------------------------------------------|\n| `loadAfterPageRender`    | Indicates whether the code should be loaded before, or after the whole site loads (useful when search buttons are created dynamically) | `boolean`   | `false`                   | `true`                                                      |\n| `container`              | Selector of the DOM element that'll contain the search results                                                                         | `string`    | `null`                    | `.container`                                                |\n| `mainColor`              | Main color of the search interface, which can be seen on the buttons                                                                   | hex value   | `#9CD333`                 | #999999                                                     |\n| `afterLoadResults`       | Function that is called after results are added into the DOM                                                                           | `function`  | `function(searchType) {}` | `function(searchType) {   console.log('results'); }`        |\n| `beforeLoadResults`      | Function that is called before results are added into the DOM                                                                          | `function`  | `function(searchType) {}` | `function(searchType) {   console.log('before results'); }` |\n| `onSearchFailed`         | Function called when a search fails                                                                                                    | `function`  | `function() {}`           | `function() {   console.log('search failed'); }`            |\n| `onCloseResults`         | Function called when results are closed                                                                                                | `function`  | `function() {}`           | `function() {   console.log('search closed'); }`            |\n| `addSearchDataToUrl`     | Add search related data to the URL, this allows reloading the search when refreshing the webpage                                       | `boolean`   | `false`                   | `true`                                                      |\n| `onlyCameraAsInput`      | Used in mobile devices to only allow the usage of images only taken directly from the camera                                           | `boolean`   | `false`                   | `true`                                                      |\n| `disableImageCrop`       | Used to disable the image crop screen. When true, the user is no loner given the option to crop the query                              | `boolean`   | `false`                   | `true`                                                      |\n| `numberFractionDigits`   | Number of fraction digits to be included in prices                                                                                     | `int`       | `2`                       | `0`                                                         |\n| `decimalSeparator`       | Char used to separate fraction digits from the whole number                                                                            | `char`      | `,`                       | `.`                                                         |\n| `thousandsSeparator`     | Char used to separate thousands from the whole number                                                                                  | `char`      | `.`                       | `,`                                                         |\n| `currencySymbolAtTheEnd` | Indicates whether the currency symbol should be at the back of the price or not                                                        | `boolean`   | `false`                   | `true`                                                      |\n| `colorOnSale`            | Color of the \"On Sale\" label that appears when products are on sale                                                                    | `hex value` | `#FF0000`                 | `#9CD333`                                                   |\n| `useDetection`           | Indicate whether to sue detection or not (Note: use true ONLY if you selected fashion &amp; apparel)                                       | `bool`      | `false`                   | `true`                                                      |\n| `displayOnSaleProducts`  | Show \"On sale\" sign on products with a discount                                                                                        | `bool`      | `true`                    | `false`                                                     |\n| `currencySymbolAtTheEnd` | Place currency symbol at the end of the price (right side)                                                                             | `bool`      | `false`                   | `true`                                                      |\n| `customGoogleAnalytics`  | Google analytics code, used to register search events                                                                                  | `string`    | ``                        | `UA-XXXXX-Y`                                                |<\/code><\/pre>\n<!-- \/wp:code -->\n\n<!-- wp:paragraph -->\n<p>To configure and enable the search by text or instant search functionality you also need to include a <code>searchByText<\/code> key, which has three required fields:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><li><code>useText<\/code>: boolean that indicates whether or not the instant search will be enabled on the site (e.g. true)<\/li><li><code>searchBarSelector<\/code>: selector of the input part of search bar of the site, where people can actually type (e.g. #searchbar)<\/li><li><code>fullTextSearchContainerSelector<\/code>: selector of the container that will hold the full results. These are the ones that feature filters, pagination and more! (e.g. #root)<\/li><\/ol>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>The <code>searchByText<\/code> also has optional key values, which are described below:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code>| Option                            | Description                                                                                                                                                                                                 | Type        | Default                   | Example                                                                 |\n|-----------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------|---------------------------|-------------------------------------------------------------------------|\n| `searchDelayMilis`                | The delay in milliseconds between the latest user input and the execution of the search result.                                                                                                             | `int`       | `300`                     | `100`                                                                   |\n| `pressSeeAll`                     | Function that is executed when the user presses the \"see all results buttons\" or presses enter on the search input                                                                                          | `function`  | `function (queryText) {}` | `function(queryText) { window.location.href = \"?IText=\" + queryText; }` |\n| `onCloseResults`                  | Function that is executed when the user closes the full results screen                                                                                                                                      | `function ` | `function () {}`          | `function () { console.log('closing results') }`                        |\n| `onOpenDropDownResults`           | Function that is executed when the Instant Search dropdown appears, that is when a user clicks on the search bar                                                                                            | `function ` | `function () {}`          | `function () { console.log('opening dropdown') }`                       |\n| `onCloseResults`                  | Function that is executed when the Instant Search dropdown is closed                                                                                                                                        | `function`  | `function () {}`          | `function () { console.log('closing dropdown') }`                       |\n| `fullTextSearchContainerSelector` | Selector of the DOM element that will contain the search results grid                                                                                                                                       | `string`    | `null`                    | `.container`                                                            |\n| `computeTopFromElement`           | Selector of the DOM element to be used when position the search results grid vertically (usually it should be to site's header)                                                                             | `string`    | `null`                    | `header`                                                                |\n| `instantFull`                     | Tells the snippet to load the results from the full search without reloading the site  (we recommend to set this option to true and use the  `computeTopFromElement` to locate the grid in a nice position) | `bool`      | `false`                   | `true`                                                                  |\n| `useButtonAsSearchBar`            | Displays a button in the lower left corner of the site, which will work as a search bar. Recommended for sites with no search bar                                                                           | `bool`      | `false`                   | `true`                                                                  |\n| `useText`                         | Use search by text feature                                                                                                                                                                                  | `bool`      | `true`                    | `false`                                                                 |\n| `searchBarSelector`               | Search bar selector                                                                                                                                                                                         | `string`    | `&#91;name=q]`                | `&#91;name=q],input&#91;name=s]`                                                |\n| `buttonSearchBarLocation`         | Position of the floating button. Possible values: BOTTOM_LEFT, TOP_LEFT, MIDDLE_LEFT, BOTTOM_RIGHT, TOP_RIGHT, MIDDLE_RIGHT                                                                                 | `string`    | `BOTTOM_LEFT`             | `TOP_RIGHT`                                                             |<\/code><\/pre>\n<!-- \/wp:code -->\n\n<!-- wp:paragraph -->\n<p><em><strong>Note:<\/strong><\/em> The full search results will be loaded when Impresee's snippet finds an <code>IText<\/code> query param. This is why we recommend the <code>pressSeeAll<\/code> function to be set to<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code>function (queryText) {\n    window.location.href = \"?IText=\" + queryText;\n}<\/code><\/pre>\n<!-- \/wp:code -->\n\n<!-- wp:paragraph -->\n<p>The <code>_wssee<\/code> object also has an optional key <code>texts<\/code>, which corresponds an object, that allows the customization of textual labels that appear on screen, such as in the canvas, crop screen, among others.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>With this <code>_wssee<\/code> can look as follows:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code>      window._wssee = window._wssee || &#91;];\n      window._wssee.push({\n        setup: {\n          \/\/useDetection: true,\n          photoButton: \"search-by-photo\",\n          sketchButton: \"search-by-sketch\",\n          photoApp: \"your_search_by_image_code\",\n          sketchApp: \"your_search_by_drawing_code\",\n          container: \"#root\",\n          mainColor: \"#999999\",\n          addSearchDataToUrl: true,\n        },\n        searchByText: {\n          useText: true,\n          searchBarSelector: \"&#91;name=q],input&#91;name=s]\",\n          textSearchApp: 'your_search_by_text_code',\n        },\n        texts: {\n          goToProductDetailsButtonLabel: \"See more\",\n          searchResultsTitle: \"Search results\",\n          searchButtonLabel: \"Search\"\n        }\n      });<\/code><\/pre>\n<!-- \/wp:code -->\n\n<!-- wp:paragraph -->\n<p>The available keys for <code>texts<\/code> are shown below:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code>| Key                          | Description                                                                                                                | Default                                                         |\n|------------------------------|----------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------|\n| `searchResultsTitle`         | Title of the grid that contains the search results                                                                         | Search results                                                  |\n| `searchButtonLabel`          | Label of any search button                                                                                                 | Search                                                          |\n| `oops`                       | Surprise exclamation used when an error occurs                                                                             | Oops ...                                                        |\n| `error`                      | Header of the error screen                                                                                                 | We didn't expect this at all.                                   |\n| `errorDescription`           | Message displayed on the error screen                                                                                      | It seems our system is overheating, please try again later.     |\n| `dragAndDropImageTitle`      | Header of the drag and drop image screen                                                                                   | Drag &amp; Drop an image or just click here                         |\n| `dragAndDropImageMessage`    | Message displayed on the drag and drop image screen                                                                        | Upload the image you'd like to use to search                    |\n| `customSelectionSearchLabel` | Message displayed when re-cropping a query                                                                                 | Custom search                                                   |\n| `startWriting`               | Message displayed before the user starts typing in the Instant Search dropdown                                             | Start typing to search                                          |\n| `currencySymbol`             | Currency symbol used when displaying prices                                                                                | $                                                               |\n| `searchByPhoto`              | Search by photo label that appears on the Instant Search dropdown                                                          | Search by photo                                                 |\n| `searchBySketch`             | Search by drawing label that appears on the Instant Search dropdown                                                        | Search by drawing                                               |\n| `seeAllResults`              | See all results label that appears on the Instant Search dropdown after results are painted on the screen                  | See all results                                                 |\n| `noMatchingResult`           | Text that appears when no results match                                                                                    | We couldn't find any results for:                               |\n| `onSale`                     | On sale label used on products that are on sale                                                                            | On sale                                                         |\n| `resultsTitleforTextSearch`  | Header for the full text search results screen (Desktop)                                                                   | Search results for                                              |\n| `numberResultsTitle`         | Header that displays the number of results (Desktop). If you decide to modify this text, please keep the placeholder ({1}) | Displaying {1} results                                          |\n| `resultsTitleForMobile`      | Header for the full text search results screen (Mobile) If you decide to modify this text, please keep the placeholders    | Displaying {1} results for \"{2}\"                              |\n| `filtersTitle`               | Header for the filter column (Mobile)                                                                                      | Filters                                                         |\n| `clearFilters`               | Clear filters button label                                                                                                 | Clear filters                                                   |\n| `sortBy`                     | Sort by select label                                                                                                       | Sort by                                                         |\n| `applyFilters`               | Apply filters button label (Mobile only)                                                                                   | Apply                                                           |\n| `tryAgainWhenNoResults`      | Label that motivates users to keep searching when no results match                                                         | Why don't you try drawing or taking a picture of what you want? |<\/code><\/pre>\n<!-- \/wp:code -->\n\n<!-- wp:paragraph -->\n<p>Impresee offers a Snap the look feature. In order to enable this functionality you only need to add a <code>useDetection<\/code> key in the <code>setup<\/code> object inside <code>_wssee<\/code>, and assign it a value of <code>true<\/code>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Remember that this feature is only available for apparel-based catalogs!<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Hints<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:list -->\n<ul><li>The CSS class <code>ImpreseeHide<\/code> can be used to hide elements. One interesting detail is that when the search results are closed, our system will find all elements with this class and remove the class from them. This allows you to hide certain elements when displaying the results. This can be useful when using the <code>container<\/code> option.<\/li><li>If you decide to use the <code>ImpreseeHide<\/code> class we recommend that you use the <code>beforeLoadResults<\/code> or the <code>afterLoadResults<\/code> functions to locate the elements you wish to hide. You can also add the <code>ImpreseeHide<\/code> class to those elements inside of any of these functions.<\/li><li>The <code>beforeLoadResults<\/code> and <code>afterLoadResults<\/code> receive the search type as a parameter, this means that you can customize the look and feel of Instant search, search by sketch and search by photo separately. The search types of these kinds of search are:<\/li><li>Instant search: <code>instant search<\/code><\/li><li>Full search by text: <code>text<\/code><\/li><li>Search by photo: <code>photo<\/code><\/li><li>Search by drawing: <code>sketch<\/code><\/li><li>If you decide to embed the search results somewhere in your site, please take into consideration that this might fail if the container hides the overflowing content (CSS <code>overflow:hidden<\/code>). You can use the <code>beforeLoadResults<\/code> function to modify the overflow behavior of the container, and then you can use the <code>onCloseResults<\/code> function to have it back to normal.<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>If you have any question regarding integration via this snippet, please contact <a href=\"mailto:support@impresee.com\">support@impresee.com<\/a><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><\/p>\n<!-- \/wp:paragraph -->","_et_gb_content_width":"","footnotes":""},"class_list":["post-7941","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Integrating Impresee using Impresee&#039;s snippet &#8211; Impresee: Search bar and navigation solutions for eCommerce<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/impresee.com\/es\/integrating-impresee-using-impresees-snippet\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Integrating Impresee using Impresee&#039;s snippet &#8211; Impresee: Search bar and navigation solutions for eCommerce\" \/>\n<meta property=\"og:description\" content=\"Integration via the Impresee SnippetThis document describes how you can integrate the Impresee snippet into your online store, and also all the options you can use to configure it. &nbsp;BasicsThe Impresee snippet is a short piece of code written in Javascript that has all the necessary to integrate an e-commerce site with Impresee\u2019s search services. [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/impresee.com\/es\/integrating-impresee-using-impresees-snippet\/\" \/>\n<meta property=\"og:site_name\" content=\"Impresee: Search bar and navigation solutions for eCommerce\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/impresee\/\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-05T20:12:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/impresee.com\/wp-content\/uploads\/2019\/01\/favicon-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"200\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@impresee\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo estimado de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"13 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/impresee.com\/integrating-impresee-using-impresees-snippet\/\",\"url\":\"https:\/\/impresee.com\/integrating-impresee-using-impresees-snippet\/\",\"name\":\"Integrating Impresee using Impresee's snippet &#8211; Impresee: Search bar and navigation solutions for eCommerce\",\"isPartOf\":{\"@id\":\"https:\/\/impresee.com\/#website\"},\"datePublished\":\"2021-01-05T18:21:30+00:00\",\"dateModified\":\"2023-09-05T20:12:24+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/impresee.com\/integrating-impresee-using-impresees-snippet\/#breadcrumb\"},\"inLanguage\":\"es-CL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/impresee.com\/integrating-impresee-using-impresees-snippet\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/impresee.com\/integrating-impresee-using-impresees-snippet\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/impresee.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Integrating Impresee using Impresee&#8217;s snippet\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/impresee.com\/#website\",\"url\":\"https:\/\/impresee.com\/\",\"name\":\"Impresee\",\"description\":\"AI search bar, filters and discount games for eCommerce to get more visitors, increase conversion and get repeat sales. Available for Shopify, Woocomerce, Magento and others\",\"publisher\":{\"@id\":\"https:\/\/impresee.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/impresee.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es-CL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/impresee.com\/#organization\",\"name\":\"Impresee\",\"url\":\"https:\/\/impresee.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es-CL\",\"@id\":\"https:\/\/impresee.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/impresee.com\/wp-content\/uploads\/2019\/01\/logo_color_negro_sf_web-e1547827174322.png\",\"contentUrl\":\"https:\/\/impresee.com\/wp-content\/uploads\/2019\/01\/logo_color_negro_sf_web-e1547827174322.png\",\"width\":400,\"height\":152,\"caption\":\"Impresee\"},\"image\":{\"@id\":\"https:\/\/impresee.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/impresee\/\",\"https:\/\/x.com\/impresee\",\"https:\/\/www.instagram.com\/impresee.ai\/\",\"https:\/\/www.linkedin.com\/company\/impresee\",\"https:\/\/www.youtube.com\/channel\/UC5ZniKfJGvG8t4GrOOgYczA\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Integrating Impresee using Impresee's snippet &#8211; Impresee: Search bar and navigation solutions for eCommerce","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/impresee.com\/es\/integrating-impresee-using-impresees-snippet\/","og_locale":"es_ES","og_type":"article","og_title":"Integrating Impresee using Impresee's snippet &#8211; Impresee: Search bar and navigation solutions for eCommerce","og_description":"Integration via the Impresee SnippetThis document describes how you can integrate the Impresee snippet into your online store, and also all the options you can use to configure it. &nbsp;BasicsThe Impresee snippet is a short piece of code written in Javascript that has all the necessary to integrate an e-commerce site with Impresee\u2019s search services. [&hellip;]","og_url":"https:\/\/impresee.com\/es\/integrating-impresee-using-impresees-snippet\/","og_site_name":"Impresee: Search bar and navigation solutions for eCommerce","article_publisher":"https:\/\/www.facebook.com\/impresee\/","article_modified_time":"2023-09-05T20:12:24+00:00","og_image":[{"width":200,"height":200,"url":"https:\/\/impresee.com\/wp-content\/uploads\/2019\/01\/favicon-1.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@impresee","twitter_misc":{"Tiempo estimado de lectura":"13 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/impresee.com\/integrating-impresee-using-impresees-snippet\/","url":"https:\/\/impresee.com\/integrating-impresee-using-impresees-snippet\/","name":"Integrating Impresee using Impresee's snippet &#8211; Impresee: Search bar and navigation solutions for eCommerce","isPartOf":{"@id":"https:\/\/impresee.com\/#website"},"datePublished":"2021-01-05T18:21:30+00:00","dateModified":"2023-09-05T20:12:24+00:00","breadcrumb":{"@id":"https:\/\/impresee.com\/integrating-impresee-using-impresees-snippet\/#breadcrumb"},"inLanguage":"es-CL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/impresee.com\/integrating-impresee-using-impresees-snippet\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/impresee.com\/integrating-impresee-using-impresees-snippet\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/impresee.com\/"},{"@type":"ListItem","position":2,"name":"Integrating Impresee using Impresee&#8217;s snippet"}]},{"@type":"WebSite","@id":"https:\/\/impresee.com\/#website","url":"https:\/\/impresee.com\/","name":"Impresee","description":"AI search bar, filters and discount games for eCommerce to get more visitors, increase conversion and get repeat sales. Available for Shopify, Woocomerce, Magento and others","publisher":{"@id":"https:\/\/impresee.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/impresee.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es-CL"},{"@type":"Organization","@id":"https:\/\/impresee.com\/#organization","name":"Impresee","url":"https:\/\/impresee.com\/","logo":{"@type":"ImageObject","inLanguage":"es-CL","@id":"https:\/\/impresee.com\/#\/schema\/logo\/image\/","url":"https:\/\/impresee.com\/wp-content\/uploads\/2019\/01\/logo_color_negro_sf_web-e1547827174322.png","contentUrl":"https:\/\/impresee.com\/wp-content\/uploads\/2019\/01\/logo_color_negro_sf_web-e1547827174322.png","width":400,"height":152,"caption":"Impresee"},"image":{"@id":"https:\/\/impresee.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/impresee\/","https:\/\/x.com\/impresee","https:\/\/www.instagram.com\/impresee.ai\/","https:\/\/www.linkedin.com\/company\/impresee","https:\/\/www.youtube.com\/channel\/UC5ZniKfJGvG8t4GrOOgYczA"]}]}},"_links":{"self":[{"href":"https:\/\/impresee.com\/es\/wp-json\/wp\/v2\/pages\/7941","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/impresee.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/impresee.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/impresee.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/impresee.com\/es\/wp-json\/wp\/v2\/comments?post=7941"}],"version-history":[{"count":30,"href":"https:\/\/impresee.com\/es\/wp-json\/wp\/v2\/pages\/7941\/revisions"}],"predecessor-version":[{"id":12871,"href":"https:\/\/impresee.com\/es\/wp-json\/wp\/v2\/pages\/7941\/revisions\/12871"}],"wp:attachment":[{"href":"https:\/\/impresee.com\/es\/wp-json\/wp\/v2\/media?parent=7941"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}