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.

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 grab the script from your feed admin dashboard. You can insert this either directly on you 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 manage 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 first element inside the element defined in the “his” parameter.
PREPEND: The icon will be prepended as the last 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.

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.

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');
}

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

Here is a list of the variaous options.

Background (“bgc”): The background color of the widget. Default is #f0f2f5.
Upload area background (“ubc”): The background color of the upload area. Default is #f0f2f5.
Upload area hover background (“uhbc”): The background color of the upload area when hovered. Default is #f5f7fa.
Button background (“bbgc”): The background color of the button. Default is #FAE1F7.
Button hover background (“bhb”): The background color of the button when hovered. Default is #F7D6F9.
Button text color (“bc”): The text color of the button. Default is #000000.
Button text hover color (“bch”): The text color of the button when hovered. Default is #000000.
Button border (“bb”): The border of the button. Default is rounded-full.
Button border color (“btbc”): The border color of the button. Default is empty.
Border color (“bdc”): The border color of the widget. Default is #636363.
Border hover color (“bdhc”): The border color of the widget when hovered. Default is #ffc0cb.
Upload border style (“bds”): The border style of the upload area. Default is 0.
Upload inner style (“bis”): The inner style of the upload area. Default is 0.

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

Product title options

Product title color (“ptc”): The color of the product title. Default is #000000.
Product title weight (“ptw”): The weight of the product title. Default is 700.
Product title font size (“ptf”): The font size of the product title. Default is 0.875rem.
Product title font (“ptff”): The font of the product title. Default is Arial.
Product title line height (“ptlh”): The line height of the product title. Default is 1.25rem.

Product button options

Button title color (“btc”): The color of the button title. Default is #e5e7eb.
Button title weight (“btw”): The weight of the button title. Default is 400.
Button title font size (“btf”): The font size of the button title. Default is 0.875rem.
Button title font (“btff”): The font of the button title. Default is Arial.
Button title line height (“btlh”): The line height of the button title. Default is 1.25rem.

Product price options

Price background (“pb”): The background color of the price. Default is #f0f2f5.
Price color (“pc”): The color of the price. Default is #000000.
Price weight (“pw”): The weight of the price. Default is 400.
Price font size (“pf”): The font size of the price. Default is 1rem.
Price font (“pff”): The font of the price. Default is Arial.
Price line height (“plh”): The line height of the price. Default is 1.5rem.

Product sales price options

Sale price background (“spb”): The background color of the sale price. Default is #f0f2f5.
Sale price color (“spc”): The color of the sale price. Default is #000000.
Sale price weight (“spw”): The weight of the sale price. Default is 400.
Sale price font size (“spf”): The font size of the sale price. Default is 1rem.
Sale price font (“spff”): The font of the sale price. Default is Arial.
Sale price line height (“splh”): The line height of the sale price. Default is 1.5rem.