Image Search

Koral image search widget is a powerful tool that allows users to search for products using images rather than text. This creates a more intuitive and engaging shopping experience.

This widget is designed to be easy to use and integrate into your website or application. It provides a seamless experience for users, allowing them to upload images and receive relevant search results in real-time.

Product Feed Requirements

To power the recommendations returned by the widget we rely on a standard Google Shopping feed that follows the Google Merchant Center product data specification. Supplying the feed in that format ensures we receive every attribute (id, title, price, availability, image link, etc.) we need for indexing. If you already maintain a Shopping feed for Google Ads or Performance Max, you can reuse the same feed URL here—just make sure it stays synchronized with your catalog updates.

Key Features

• Image Upload: Users can upload images directly from their device or use images from the web.
• Real-time Search: The widget provides real-time search results as users upload images.
• Customizable: The widget can be customized to match the look and feel of your website or application.

Setup

In order to use our Image search widget you can grab the script from your feed admin dashboard. You can insert this directly on your HTML page. The script should be placed close to the end of the body tag. This will prevent the script from blocking other critical resources from loading.

You can also use your tag manager such as Google Tag Manager to add the script to your page. This is a good option if you want to manage the script from a single place and not have to worry about adding it to every page.

The script looks like this:

<script>
  (function () {
    const script = document.createElement('script');
    script.src =
      'https://script.koral.nu/dist/index.js?searchId=11111111-2222-3333-4444-555555555555&his=.search-wrapper .expander&hisi=APPEND&display=SA';
    document.body.appendChild(script);
  })();
</script>

This will load the Koral script and add the image search widget to your page.

Customization

You can customize the script by modifying the parameters in the URL. Below you can read about the different parameters you can set.

Icon control

You can control the icon that is shown in the header and the bottom right of the window.

You can customize the widget’s appearance and behavior by modifying the parameters in the script URL. These parameters can be set in the feed admin dashboard.

Most importantly you can define if you want to use the image icon at the bottom right of the window, the search icon in the header or both.

This is managed using the “display” parameter. The display options are:

• SA: Show the search icon in the header
• SB: Show the image icon in the bottom right of the window
• S: Show the icon in both the header and the bottom right of the window.
• N: Do not show any icon.

If you chose to activate the header icon, there are a few extra parameters you need to set. These are “his” and “hisi”. The “his” parameter is used to define the HTML DOM element that the icons should be injected besides or into. The “hisi” parameter defines how the search icon is set. The options are:

• APPEND: The icon will be appended as the last element inside the element defined in the “his” parameter.

• PREPEND: The icon will be prepended as the first element inside the element defined in the “his” parameter.

• INSERT_AFTER: The icon will be inserted after the element defined in the “his” parameter.

• INSERT_BEFORE: The icon will be inserted before the element defined in the “his” parameter.

• sih: Enable slide out on header icon. Options are “true” or “false”.

Again all of this can be managed via the feed admin dashboard. Reach out to our customer enablement team if you need help with this.

Language

The widget interface (titles, buttons, helper texts, etc.) can be displayed in different languages using the “lang” parameter.

The supported values are:

• da: Danish (default)
• sv: Swedish
• no: Norwegian
• fi: Finnish

If the parameter is omitted, or set to an unsupported value, the widget falls back to Danish (da).

To switch the language, add the lang parameter to the script URL. For example, to display the widget in Swedish:

<script>
  (function () {
    const script = document.createElement('script');
    script.src =
      'https://script.koral.nu/dist/index.js?searchId=11111111-2222-3333-4444-555555555555&his=.search-wrapper .expander&hisi=APPEND&display=SA&lang=sv';
    document.body.appendChild(script);
  })();
</script>

As with the other parameters, the language can also be set from the feed admin dashboard.

Market

If your product feed is a multi market feed, you can use the “market” parameter to define which market the search results should be loaded from. Products that are not sold in the selected market are filtered out of the results, and the price, currency, link, title and description are shown for that market.

The value is a two-letter ISO country code matching one of the markets in your feed, for example:

• dk: Denmark
• se: Sweden
• no: Norway
• fi: Finland

To set the market, add the market parameter to the script URL. For example, to load data from the Swedish market:

    <script> (function() { const script = document.createElement('script'); script.src = 'https://script.koral.nu/dist/index.js?searchId=11111111-2222-3333-4444-555555555555&his=.search-wrapper .expander&hisi=APPEND&display=SA&market=se'; document.body.appendChild(script); })(); </script>

If the parameter is omitted, the results are served from the feed’s primary market. For feeds with a single market the parameter has no effect and can be left out.

As with the other parameters, the market can also be set from the feed admin dashboard.

Self managed buttons

In case you want to use your own buttons to trigger the image search, you can use the these functions to control the widget:

// Open the modal
KoralModal.open();

// Close the modal
KoralModal.close();

// Check if modal is currently open
if (KoralModal.isOpen()) {
    console.log('Modal is open');
}

Widget display colors

You can customize the widget’s appearance and behavior by modifying the parameters in the script URL. These parameters can be managed using the feed admin dashboard.

Here is a list of the various options.

Widget options

Parameter	Description	Default
bgc	Background color of the widget	#f0f2f5
ubc	Background color of the upload area	#f0f2f5
uhbc	Background color of the upload area when hovered	#f5f7fa
bbgc	Background color of the button	#FAE1F7
bhb	Background color of the button when hovered	#F7D6F9
bc	Text color of the button	#000000
bch	Text color of the button when hovered	#000000
bb	Border of the button	rounded-full
btbc	Border color of the button	None
bdc	Border color of the widget	#636363
bdhc	Border color of the widget when hovered	#ffc0cb
bds	Border style of the upload area	0
bis	Inner style of the upload area	0

If you are using the default product teaser card, you can also customize the following options:

Product title options

Parameter	Description	Default
ptc	Color of the product title	#000000
ptw	Weight of the product title	700
ptf	Font size of the product title	0.875rem
ptff	Font of the product title	Arial
ptlh	Line height of the product title	1.25rem

Product button options

Parameter	Description	Default
btc	Color of the button title	#e5e7eb
btw	Weight of the button title	400
btf	Font size of the button title	0.875rem
btff	Font of the button title	Arial
btlh	Line height of the button title	1.25rem

Product price options

Parameter	Description	Default
pb	Background color of the price	#f0f2f5
pc	Color of the price	#000000
pw	Weight of the price	400
pf	Font size of the price	1rem
pff	Font of the price	Arial
plh	Line height of the price	1.5rem

Product sales price options

Parameter	Description	Default
spb	Background color of the sale price	#f0f2f5
spc	Color of the sale price	#000000
spw	Weight of the sale price	400
spf	Font size of the sale price	1rem
spff	Font of the sale price	Arial
splh	Line height of the sale price	1.5rem