Review Widget

The embedded review widget displays your latest reviews in a floating panel that visitors can access from any page.

Enabling the Widget

1. Go to Trustie > Designer > Widget
2. Check Enable Review Widget
3. Configure position and content
4. Save changes

The widget appears on all public pages by default.

Widget Position

Vertical Position

Horizontal Position

Most sites use Right + Middle or Right + Bottom.

Widget Content

Reviews to Display

Content Options

Widget Styling

Colors

Set widget colors in Trustie > Designer > Colours > Widget Colours:

Tab Appearance

Animation

Widget Shortcode

You can also embed the widget content inline:

[trustie_widget_reviews limit="5"]

This displays the same content without the floating panel.

Mobile Behavior

The widget automatically adjusts for mobile:

• Tab moves to bottom on narrow screens
• Panel opens as full-width overlay
• Touch-friendly close button
• Respects reduced-motion preferences

Disable on Mobile

If the widget feels intrusive on mobile:

1. Go to Trustie > Designer > Widget
2. Check Hide on Mobile
3. Set breakpoint (default: 768px)

Page Targeting

Show on Specific Pages

By default, the widget appears everywhere. To limit it:

1. Go to Trustie > Designer > Widget
2. Under Page Targeting, select Show only on:
3. Choose pages:

– Home page
– Product pages
– Cart/Checkout
– Custom pages (by URL)

Hide on Specific Pages

Alternatively, hide the widget on certain pages:

1. Select Hide on:
2. Enter page URLs or patterns
3. Use for wildcards (e.g., /checkout/)

Accessibility (WCAG 2.1 AA)

The widget meets WCAG 2.1 Level AA accessibility standards:

• Keyboard navigable (Tab to open, Escape to close)
• Visible focus indicators on all controls using your brand’s primary colour
• Screen reader announcements for form submissions (success and error)
• Descriptive aria-labels on filter buttons (“Show all reviews”, “Show Google reviews”, etc.)
• Decorative avatars hidden from screen readers
• :focus-visible ensures keyboard users see focus rings while mouse users don’t
• Respects prefers-reduced-motion
• Sufficient color contrast (check your colors!)

Performance

The widget is lightweight:

• ~15KB JavaScript (gzipped)
• Reviews load asynchronously
• Cached for 1 hour
• No impact on Core Web Vitals

Lazy Loading

Reviews load only when the widget is opened:

1. Page loads with just the tab
2. User clicks tab
3. Reviews fetch via AJAX
4. Content displays

This keeps initial page load fast.

Troubleshooting

Widget not appearing

1. Is it enabled? Check Trustie > Designer > Widget
2. Are you logged in? Widget may hide for admins
3. Check page targeting settings
4. View page source for trustie-widget container

Widget overlaps content

Adjust the position:

• Change vertical position
• Add CSS margin to your content
• Use z-index to layer correctly

.trustie-pro-widget {
    z-index: 9998;
}

Reviews not loading

1. Check browser console for errors
2. Verify reviews exist and are approved
3. Check AJAX endpoint is accessible
4. Disable caching plugins temporarily

Styling conflicts

If your theme overrides widget styles:

.trustie-pro-widget * {
    all: revert;
}

Or increase specificity:

body .trustie-pro-widget__panel .trustie-review-card {
    / your overrides /
}

CSS Classes

For custom styling, the widget uses these classes: