Visual Search Widgets

<script 
  src="https://cdn.uselayers.com/widget/layers-widget.js" 
  data-api-key="YOUR_LAYERS_API_KEY" 
  module
></script>

<template id="custom-image-search-template">
  <div class="custom-content">
    <p>Take a photo or upload an image to find similar products.</p>
    <div class="sample-images">
      <img src="/sample1.jpg" alt="Sample 1" />
      <img src="/sample2.jpg" alt="Sample 2" />
    </div>
  </div>
</template>

<layers-image-search-toggle template-id="custom-image-search-template"></layers-image-search-toggle>

<layers-image-search-reference-image src="/path/to/image.jpg">
  <img src="/path/to/image.jpg" alt="Click to search for similar items" />
</layers-image-search-reference-image>

document.querySelector('layers-image-search-toggle')
  .addEventListener('layers-image-search-area-selected', (event) => {
    const selectedArea = event.detail;
    console.log('Area selected:', selectedArea);
    // Perform custom actions with the selected area
  });

<layers-similar-products-toggle product-id="1234567890">
  <script type="layers/filter-groups">
    {
      "conditional": "AND",
      "expressions": [
        {
          "property": "price",
          "operator": "greater_than",
          "values": [50]
        },
        {
          "property": "tags",
          "operator": "in",
          "values": ["sale", "new"]
        }
      ]
    }
  </script>
</layers-similar-products-toggle>

<layers-similar-products-preview product-id="1234567890" limit="4">
  <script type="layers/filter-groups">
    {
      "conditional": "AND",
      "expressions": [
        {
          "property": "price",
          "operator": "greater_than",
          "values": [50]
        },
        {
          "property": "tags",
          "operator": "in",
          "values": ["sale", "new"]
        }
      ]
    }
  </script>
</layers-similar-products-preview>

// Update theme properties
window.Layers.widgetManager.updateTheme({
  '--layers-widget-color-primary': '#ff4500',
  '--layers-widget-color-text': '#333333',
  '--layers-widget-font-family': 'Helvetica, Arial, sans-serif'
});

// Update translations for the image search widget
window.Layers.widgetManager.updateTranslations('image-search', {
  modal: {
    header: {
      title: 'Find Products Using an Image'
    }
  },
  steps: {
    upload: {
      title: 'Upload a Photo'
    }
  }
});

// Subscribe to analytics events
window.Layers.analytics.subscribe((eventType, data) => {
  console.log(`Event: ${eventType}`, data);
  
  // Example integration with Google Analytics 4
  if (typeof gtag === 'function') {
    gtag('event', eventType, {
      ...data,
      event_category: 'Layers Visual Search'
    });
  }
});

window.Layers.widgetManager.configure({
  debug: true
});