Response Events

These events are triggered by backend responses and contain instructions or suggestions from the API server.

These props are available for each event:

• campaignTypeId
• campaignTypeName
• widgetId (if exists)
• widgetVersion

Some events have additional props, summarized in the table below.

Name	Description	Available on	Props
vviinnSearchSuccess	Triggered when the API successfully returns search results. Emitted for visual search (VPS), text search (TPS), and product listing page requests. Provides access to results data for custom UI implementations.	vviinn-vps-button (Search Button) vviinn-text-search (Search Bar) vviinn-results (Product List) vviinn-cropper (Cropper)	results — array of results dynamicFilters — available filters detectedObjects — detected search areas (visual search only) requestId — unique request identifier query — search query text (text search only) storeName — emitted for "widget" or "components"
vviinnRedirect	Triggered before an automatic redirect. This happens when the API returns a suggested redirect URL (auto-suggest for text search, or after an image upload for visual search), or when results-page-url is set and the user initiates a text or image search from a different page. Automatically redirects unless intercepted by calling event.preventDefault() (e.g., for SPA routing).	vviinn-text-search (Search Bar) vviinn-vps-button (Search Button)	url — redirect URL source — "text-search", "visual-search", or "auto-suggest" query — search query (text search and auto-suggest) searchId — search ID (image search)
vviinnNoResult	Triggered when an error has occurred after: - Product AI recommendation request - Visual search request (image upload, crop, rotate, select object) - Text search request - Product listing page request - Image validation (wrong format)	vviinn-vpr-widget (Recommendation Widget) vviinn-vps-button (Search Button) vviinn-text-search (Search Bar) vviinn-results (Product List) vviinn-cropper (Cropper)	Additional props for image upload errors: reason — error type (e.g., "invalid_file_type") errorCode — error code errorMessage — human-readable error message (only for validation errors)

Examples

Basic usage of redirect event

document.addEventListener("vviinnRedirect", ({ detail }) => {
  console.log(detail);
  // Widget will automatically redirect unless intercepted
});

// Output (auto-suggest):
{
  "url": "https://www.my-site.de/sansibar",
  "source": "auto-suggest",
  "query": "sansibar",
  "campaignTypeId": "TPS",
  "campaignTypeName": "Text Product Search",
  "widgetId": "my-search-widget",
  "widgetVersion": "2.205.0"
}

// Output (text search with results-page-url):
{
  "url": "https://www.my-site.de/results?query=shoes",
  "source": "text-search",
  "query": "shoes",
  "campaignTypeId": "TPS",
  "campaignTypeName": "Text Product Search",
  "widgetVersion": "2.205.0"
}

// Output (image search with results-page-url):
{
  "url": "https://www.my-site.de/results?searchId=abc-123",
  "source": "visual-search",
  "searchId": "abc-123",
  "campaignTypeId": "VPS",
  "campaignTypeName": "Visual Search",
  "widgetVersion": "2.205.0"
}

Intercept redirect

You can intercept the redirect by calling event.preventDefault() to handle navigation yourself.

document.addEventListener("vviinnRedirect", (event) => {
  event.preventDefault();

  const { url, query } = event.detail;

  // Your custom logic: SPA routing, analytics, confirmation dialogs, etc.
  myRouter.push(url);
});

Basic usage of search success event

document.addEventListener("vviinnSearchSuccess", ({ detail }) => {
  console.log(detail);
  // Use results data for custom UI implementation
});

// Output example (Visual Search):
{
  "results": [
    {
      "productId": "12345",
      "title": "Product Name",
      "price": { "actual": { "amount": 29.99 } },
      "image": { "url": "https://..." }
      // ... more product fields
    }
    // ... more products
  ],
  "dynamicFilters": [
    {
      "kind": "color",
      "values": [
        { "value": "red", "count": 15 },
        { "value": "blue", "count": 8 }
      ]
    }
  ],
  "detectedObjects": [
    { "left": 0.1, "top": 0.2, "width": 0.3, "height": 0.4 }
  ],
  "requestId": "abc123-def456",
  "storeName": "widget",
  "campaignTypeId": "VPS",
  "campaignTypeName": "Visual Search",
  "widgetVersion": "2.208.0"
}

Basic usage of no result event

document.addEventListener("vviinnNoResult", ({ detail }) => {
  console.log(detail);
  // Handle error - show notification, retry, etc.
});

// Output:
{
  "campaignTypeId": "TPS",
  "campaignTypeName": "Text Product Search",
  "widgetId": "my-search-widget",
  "widgetVersion": "2.208.0"
}