{"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\">Integration via the Impresee Snippet<\/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><strong>This document describes how you can integrate the <em>Impresee snippet<\/em> into your online store, and also all the options you can use to configure it.<\/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>Basics<\/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>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<ul>\n<li>A drawing canvas<\/li>\n<li>Option to upload images from the filesystem or directly from a camera<\/li>\n<li>A modal window that displays the uploaded image, which allows cropping the picture<\/li>\n<li>Performing visual searches<\/li>\n<li>Performing instant searches<\/li>\n<li>Displaying search results<\/li>\n<li>Instant search screen<\/li>\n<li>Full search screen, with filters, ordering and pagination options<\/li>\n<\/ul>\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<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>Integration<\/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>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. In addition, the buttons that trigger each type of search must be added into the site <strong>(this must be done only if the <code>search by text<\/code> is disabled, otherwise it is optional)<\/strong>. An example of how the snippet could look like is shown below:<\/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><strong><code>_wssee<\/code><\/strong> 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. 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 <strong><code>setup<\/code><\/strong> key. The value assigned to <strong><code>setup<\/code><\/strong> 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. To enable the search-by-picture service you must include a <strong><code>photoButton<\/code><\/strong> key (the CSS class of the button that&#8217;ll trigger the visual search), and a <strong><code>photoApp<\/code><\/strong> key (your Impresee search-by-picture application) properties in <strong><code>setup<\/code><\/strong>. To enable the search-by-sketch service you must include a <strong><code>sketchButton<\/code><\/strong> key (the CSS class of the button that&#8217;ll trigger the search by sketch), and a <strong><code>sketchApp<\/code><\/strong> key (your Impresee search-by-sketch application) properties in <strong><code>setup<\/code><\/strong>. 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<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>What you have to do is create the <strong><code>_wssee<\/code><\/strong>, and assign a <strong><code>setup<\/code><\/strong> key as shown below object and add both a <strong><code>photo<\/code><\/strong> and a <strong><code>sketch<\/code><\/strong> properties, as shown below<\/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>Configuration<\/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>General options<\/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>The <strong><code>setup<\/code><\/strong> 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<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>Search by text<\/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>To configure and enable the search by text or instant search functionality you also need to include a <strong><code>searchByText<\/code><\/strong> key, which has three required fields:<\/p>\n<ol>\n<li><strong><code>useText<\/code><\/strong>: boolean that indicates whether or not the instant search will be enabled on the site (e.g. true)<\/li>\n<li><strong><code>searchBarSelector<\/code><\/strong>: selector of the input part of search bar of the site, where people can actually type (e.g. #searchbar)<\/li>\n<li><strong><code>fullTextSearchContainerSelector<\/code><\/strong>: selector of the container that will hold the full results. These are the ones that feature filters, pagination and more! (e.g. #root)<\/li>\n<\/ol>\n<p>The <strong><code>searchByText<\/code><\/strong> also has optional key values, which are described below:<\/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><em><strong>Note:<\/strong><\/em> The full search results will be loaded when Impresee&#8217;s snippet finds an <strong><code>IText<\/code><\/strong> query param. This is why we recommend the <strong><code>pressSeeAll <\/code><\/strong> function to be set to<\/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>Labels<\/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>The <strong><code>_wssee<\/code><\/strong> object also has an optional key <strong><code>texts<\/code><\/strong>, 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<p>With this <strong><code>_wssee<\/code><\/strong> can look as follows:<\/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>The available keys for <strong><code>texts<\/code><\/strong> are shown below:<\/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>The CSS class <strong><code>ImpreseeHide<\/code><\/strong> 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 <strong><code>container<\/code><\/strong> option.<\/li>\n<li>If you decide to use the <strong><code>ImpreseeHide<\/code><\/strong> class we recommend that you use the <strong><code>beforeLoadResults<\/code><\/strong> or the <strong><code>afterLoadResults<\/code><\/strong> functions to locate the elements you wish to hide. You can also add the <strong><code>ImpreseeHide<\/code><\/strong> class to those elements inside of any of these functions.<\/li>\n<li>The <strong><code>beforeLoadResults<\/code><\/strong> and <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>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><strong>overflow:hidden<\/strong><\/code>). You can use the <strong><code>beforeLoadResults<\/code><\/strong> function to modify the overflow behavior of the container, and then you can use the <strong><code>onCloseResults<\/code><\/strong> function to have it back to normal.<\/li>\n<\/ul>\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<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}]}}