Skip to content
Koral Documentation

Discovery

Here you can find information about how to implement discovery based on visual similarity using Koral’s API and widget.

In order to use the discovery feature, you need to add our search script to your website. This script will enable the discovery functionality and allow you to customize its appearance and behavior. To activate discovery you have to add the discovery url parameter to the search script. You can see an example below.

    <script> (function() { const script = document.createElement('script'); script.src = 'https://script.koral.nu/dist/index.js?searchId=11111111-2222-3333-4444-555555555555&discovery=true'; document.body.appendChild(script); })(); </script>

When the script has been set up you can start using the discovery feature. This feature will activate the search widget using the clicked image as the reference for its search. It will display a list of similar products in the same way as if the user had uploaded an image. This will help users discover products and increase engagement on your website.

Setup

Section titled “Setup”

To activate discovery on an image you can use the data-koral-discovery attribute on the images you would like to enable the feature on. This gives you a lot of flexibility over where the feature is applied. The value of this attribute should just be “true”. The data attribute should be placed as close to the image as possible. This will help our script to find the image and apply the discovery feature on it.

<div data-koral-discovery="true"></div>

If you need to move the search discovery icon up in the DOM tree, you can use a data-lift-levels attribute. This attribute will move the icon up in the DOM tree. The value of this attribute should be a number. The number defines how many levels up in the DOM tree the icon should be moved. This can be useful if you have a complex DOM structure and you need to move the icon to a higher level in order to avoid other links or buttons.

<div data-koral-discovery="true" data-lift-levels="2"></div>

Customization

Section titled “Customization”

There are a few parameters that you can set to customize the discovery feature. These parameters can be set in the feed admin dashboard.

You can manage the position of the search discovery icon on the product card using these parameters:

  • posX: The horizontal position of the icon. Options are “left”, “right”, “center”.
  • posY: The vertical position of the icon. Options are “top”, “bottom”, “middle”.
  • offsetX: The horizontal offset of the icon. This is a pixel value.
  • offsetY: The vertical offset of the icon. This is a pixel value.