Implementation

The Google Reviews Widget fetches and displays customer reviews from Google Business profiles using the RapidAPI platform. It features real-time data fetching, intelligent caching, responsive layouts, and multiple display modes. The widget automatically handles API authentication, data processing, and error states while providing smooth animations and interactive elements.

API Configuration

The widget requires proper API credentials to function:

• API Key: Set in config.apiKey - obtain from RapidAPI dashboard
• RapidAPI Host: local-business-data.p.rapidapi.com
• Business ID: Google's unique identifier found in config.businessId
• Place ID: Alternative identifier in config.placeId for review links
• API Headers:
  • X-RapidAPI-Key - your API key (never expose publicly)
  • X-RapidAPI-Host - the API host endpoint

Configuration Object

Core settings control widget behavior and appearance:

• Display Settings:
  • reviewsPerPage: 3 - number of reviews per page (desktop)
  • maxReviewLength: 150 - character limit before truncation
  • minRating: 0 - filter reviews by minimum star rating
  • showAuthorImages: true - display reviewer profile photos
  • showReviewImages: 'both' - options: 'both', 'carousel', 'lightbox', 'none'
• API Settings:
  • limit: 20 - maximum reviews to fetch
  • region: 'us' - geographic region code
  • language: 'en' - content language
  • sortBy: 'most_relevant' - options: 'most_relevant', 'newest', 'highest', 'lowest'
• Auto-scroll Configuration:
  • autoScroll: false - enable automatic review cycling
  • scrollSpeed: 5000 - milliseconds between transitions
• Navigation Options:
  • navPosition: 'dots-arrows-side' - layout for navigation controls
  • Available positions: 'dots-arrows-side', 'arrows-above-dots', 'arrows-below-dots', 'dots-only', 'arrows-only', 'none'

Data Fetching

The widget makes two API calls to gather complete business information:

• Business Details Endpoint:
  • URL: /business-details?business_id={id}
  • Retrieves overall rating, review count, and business metadata
  • Parameters: extract_emails_and_contacts=true
• Business Reviews Endpoint:
  • URL: /business-reviews?business_id={id}
  • Fetches individual review data with author information
  • Includes review text, ratings, timestamps, and photos
• Error Handling:
  • 10-second timeout with Promise.race()
  • Graceful fallback for partial data failures
  • User-friendly error messages for connection issues

Caching System

Built-in caching reduces API calls and improves performance:

• Cache Configuration:
  • cacheDuration: 24 * 60 * 60 * 1000 - 24-hour cache lifetime
  • Separate caches for details and reviews data
  • Automatic cache invalidation on expiry
• Cache Keys:
  • Format: grev_{businessId}_{dataType}
  • Stored with timestamp for expiration checking
  • JSON serialization for complex data structures
• LocalStorage Management:
  • Try-catch blocks handle storage quota errors
  • Automatic cleanup of expired entries
  • Fallback to fresh API calls if cache fails

Response Data Processing

The widget normalizes various API response formats:

• Review Data Mapping:
  • author_name - fallbacks: reviewer_name, name, 'Anonymous'
  • rating - normalized to 1-5 scale
  • review_datetime_utc - converted to relative time strings
  • review_text - sanitized and truncated as needed
  • review_photos - array of image URLs
• Verification Status:
  • Checks for author_id or reviewer_id
  • Displays verification badge for confirmed reviewers

Responsive Behavior

The widget adapts layout and functionality based on screen size:

• Desktop Mode (>768px):
  • Grid layout with flex: 0 0 calc(100% / 3)
  • Transform-based sliding with translateX()
  • Multiple reviews visible simultaneously
• Mobile Mode (≤768px):
  • Single review per screen with flex: 0 0 100%
  • Native scroll with scroll-snap-type: x mandatory
  • Touch-optimized with -webkit-overflow-scrolling: touch
  • Hidden scrollbars for cleaner appearance
• Resize Handling:
  • Debounced resize listener with 250ms delay
  • Recalculates pages and positions on viewport change
  • Maintains current review position when possible

Modal Implementation

Full review details open in an overlay modal:

• Modal Features:
  • Full review text without truncation
  • Larger profile photos (60x60px)
  • Complete timestamp with formatted date
  • All review photos displayed
• Interaction Handling:
  • Click outside to close functionality
  • Body scroll lock with overflow: hidden
  • Escape key support (when implemented)

Navigation System

Multiple navigation patterns support different use cases:

• Navigation Elements:
  • Previous/Next buttons with disabled states
  • Dot indicators with active highlighting
  • Automatic page calculation based on viewport
• Mobile Optimizations:
  • Dots hidden on mobile with @media (max-width: 768px)
  • Scroll position sync with page indicators
  • Touch gesture support for swiping

Error States

Comprehensive error handling ensures graceful degradation:

• API Errors:
  • Network timeout after 10 seconds
  • Invalid API key detection
  • Rate limit handling
• Data Errors:
  • Empty response handling
  • Malformed data validation
  • Missing required fields fallbacks
• User Feedback:
  • Loading spinner during data fetch
  • Clear error messages for users
  • Retry suggestions where appropriate

Performance Optimizations

Built-in features enhance widget performance:

• Render Optimization:
  • DOM updates batched with innerHTML
  • Event delegation for click handlers
  • CSS transforms for smooth animations
• Memory Management:
  • Cleanup of timers on navigation
  • Proper event listener removal
  • Limited DOM node creation

Security Considerations

Important security practices for production use:

• API Key Protection:
  • Never expose API keys in client-side code
  • Use environment variables or server-side proxy
  • Implement domain restrictions on API dashboard
• Content Sanitization:
  • HTML encoding for user-generated content
  • XSS prevention in review text display
  • Safe URL handling for external links