Product Comparison

The widget includes a comparison feature that allows analyzing up to 4 products side by side, with intelligent pros and cons analysis.

Features

• Compare up to 4 products simultaneously
• Side-by-side specifications table
• AI Analysis with pros/cons (Growth+ plans)
• Persistence in sessionStorage
• Responsive interface (cards on mobile, table on desktop)

How to Use

Adding to Comparison

Users can add products from search results:

1. Hover over a product
2. Click the comparison icon (or "Compare" button)
3. Product is added to the comparison panel

Comparison Panel

• Appears at the bottom of the screen
• Shows thumbnails of added products
• Click "Compare" to see full table

Product Limit

The limit is 4 products. If the user tries to add more, a message indicates the limit has been reached.

Persistence

Comparison products are automatically saved in sessionStorage:

• Restored on page reload
• Cleared when browser closes

Disable Persistence

NeuroonWidget.init({
  persistence: {
    comparison: false, // Default: true
  },
});

AI Analysis

On Growth and higher plans, comparison includes automatic intelligent analysis:

Analysis Content

Section	Description
Pros	Advantages of each product
Cons	Disadvantages of each product
Best for	Ideal use case
Verdict	Recommendation based on products

Analysis is automatically generated when the user opens the comparison table with 2 or more products.

Responding to Clicks

To execute logic when the user clicks on a product (including from comparison), use the onResultClick callback:

NeuroonWidget.init({
  callbacks: {
    onResultClick: (product) => {
      console.log('User clicked:', product.name);

      // Analytics
      gtag('event', 'select_item', {
        item_id: product.id,
        item_name: product.name,
        price: product.price,
      });
    },
  },
});

Available Callbacks

Callbacks are the only way to respond to widget events. See the callbacks documentation for all available options.

Customization

Translations

NeuroonWidget.init({
  translations: {
    comparison: {
      title: 'Your comparison',
      addProduct: 'Add another product',
      removeProduct: 'Remove',
      maxProducts: 'You can compare up to {max} products',
      clearAll: 'Clear all',
      compare: 'Compare now',
      comparing: 'Comparing {count} products',

      // AI Analysis
      aiAnalysis: 'Smart analysis',
      pros: 'Strengths',
      cons: 'Weaknesses',
      bestFor: 'Ideal for',
      verdict: 'Conclusion',

      // Table
      specifications: 'Specifications',
      differences: 'View differences',
      similarities: 'View similarities',
    },
  },
});

Styles

/* Comparison panel */
.neuroon-widget {
  --nrn-comparison-bg: 30 41 59;
  --nrn-comparison-border: 51 65 85;
}

/* Comparison indicator on products */
.neuroon-widget {
  --nrn-compare-badge: 168 85 247; /* Purple */
}

Accessibility

The comparison table meets WCAG 2.2 AA:

• Full keyboard navigation
• Table headers with scope
• ARIA announcements for actions
• Verified color contrast

Next Steps

• AI Assistant - More about AI analysis
• Accessibility - WCAG details
• Callbacks - Respond to widget events