Displaying Product Reviews in Webflow with a Cloudflare Worker

Webflow's CMS is excellent for content-driven sites, but two hard limits make product reviews genuinely difficult to implement natively. This tutorial walks through the full solution: a Cloudflare Worker that handles fetching, caching, and filtering — paired with a JavaScript star rating widget that injects into your product pages without touching Webflow's editor.

Webflow's CMS has two limitations that make product reviews tricky:

export default {
  async fetch(request, env) {
    const API_TOKEN = env.API_TOKEN;
    const REVIEWS_COLLECTION_ID = env.REVIEWS_COLLECTION_ID;
    const PRODUCTS_COLLECTION_ID = env.PRODUCTS_COLLECTION_ID;

    const allowedOrigins = [
      'https://your-site.webflow.io',
      'https://www.yoursite.com',
    ];
    const origin = request.headers.get('Origin');
    const allowedOrigin = allowedOrigins.includes(origin) ? origin : allowedOrigins[0];

    const headers = {
      'Authorization': `Bearer ${API_TOKEN}`,
      'accept': 'application/json',
      'content-type': 'application/json'
    };

    const corsHeaders = {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': allowedOrigin
    };

    if (request.method === 'OPTIONS') {
      return new Response(null, {
        headers: {
          'Access-Control-Allow-Origin': allowedOrigin,
          'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
          'Access-Control-Allow-Headers': 'Content-Type'
        }
      });
    }

    // POST — create a new review
    if (request.method === 'POST') {
      const body = await request.json();
      const { name, product, reviewTitle, review, rating } = body;

      const productRes = await fetch(
        `https://api.webflow.com/v2/collections/${PRODUCTS_COLLECTION_ID}/items?live=true&limit=100`,
        { headers }
      );
      const productData = await productRes.json();
      const productItem = productData.items.find(item => item.fieldData.slug === product);

      const createRes = await fetch(
        `https://api.webflow.com/v2/collections/${REVIEWS_COLLECTION_ID}/items`,
        {
          method: 'POST',
          headers,
          body: JSON.stringify({
            fieldData: {
              name,
              'review-title': reviewTitle,
              review,
              rating: Number(rating),
              product: productItem.id,
              slug: `${product}-${Date.now()}`,
              'submitted-at': new Date().toISOString(),
              approved: false
            }
          })
        }
      );

      const created = await createRes.json();

      if (created.id) {
        const cache = caches.default;
        await cache.delete(new Request('https://cache.internal/all-reviews'));
        return new Response(JSON.stringify({ success: true }), { headers: corsHeaders });
      }
    }

    // GET — fetch and filter reviews
    const url = new URL(request.url);
    const slugsFilter = url.searchParams.get('slugs');
    const slugFilter = url.searchParams.get('slug');

    const cache = caches.default;
    const cacheKey = new Request('https://cache.internal/all-reviews');
    let allReviews = null;

    const cached = await cache.match(cacheKey);
    if (cached) {
      allReviews = await cached.json();
    } else {
      // Build id → slug map from Products collection
      const productRes = await fetch(
        `https://api.webflow.com/v2/collections/${PRODUCTS_COLLECTION_ID}/items?live=true&limit=100`,
        { headers }
      );
      const productData = await productRes.json();
      const idToSlug = {};
      (productData.items ?? []).forEach(item => {
        idToSlug[item.id] = item.fieldData.slug;
      });

      // Paginate all reviews (bypasses 100-item CMS cap)
      let reviewItems = [];
      let offset = 0;
      while (true) {
        const res = await fetch(
          `https://api.webflow.com/v2/collections/${REVIEWS_COLLECTION_ID}/items?live=true&limit=100&offset=${offset}`,
          { headers }
        );
        const data = await res.json();
        reviewItems = reviewItems.concat(data.items ?? []);
        if (reviewItems.length >= data.pagination.total) break;
        offset += 100;
      }

      allReviews = reviewItems.map(item => ({
        ...item,
        fieldData: {
          ...item.fieldData,
          'product-slug': idToSlug[item.fieldData['product']] ?? item.fieldData['product']
        }
      }));

      await cache.put(cacheKey, new Response(JSON.stringify(allReviews), {
        headers: { 'Content-Type': 'application/json', 'Cache-Control': 'max-age=86400' }
      }));
    }

    const slugArray = slugFilter ? [slugFilter] : slugsFilter.split(',').map(s => s.trim());
    const result = allReviews.filter(r => slugArray.includes(r.fieldData['product-slug']));

    return new Response(JSON.stringify(result), { headers: corsHeaders });
  }
};

wrangler secret put API_TOKEN
wrangler secret put REVIEWS_COLLECTION_ID
wrangler secret put PRODUCTS_COLLECTION_ID

<div class="rating-container" data-rating="">
  <div class="star-rating"></div>
  <div class="rating-label"></div>
</div>
<style>
  .rating-container { display: flex; gap: 12px; align-items: center; }
  .star-rating { display: inline-flex; gap: 4px; }
  .rating-star { color: #fbbf24; }
  .rating-star--empty { color: #d1d5db; }
</style>

async function injectRatings(items) {
  const unprocessed = [...items].filter(el => !el.dataset.rated);
  if (!unprocessed.length) return;

  const slugs = unprocessed
    .map(el => el.querySelector('a')?.href.split('/').filter(Boolean).pop())
    .filter(Boolean);

  const res = await fetch(`https://your-worker.workers.dev?slugs=${slugs.join(',')}`);
  const reviewItems = await res.json();

  const reviewsByProduct = {};
  reviewItems.forEach(item => {
    const slug = item.fieldData['product-slug'];
    if (!reviewsByProduct[slug]) reviewsByProduct[slug] = [];
    reviewsByProduct[slug].push({ rating: Number(item.fieldData['rating']) });
  });

  unprocessed.forEach(productEl => {
    const slug = productEl.querySelector('a')?.href.split('/').filter(Boolean).pop();
    const reviews = reviewsByProduct[slug] || [];
    const ratingContainer = productEl.querySelector('.rating-container');
    if (!ratingContainer) return;

    productEl.dataset.rated = 'true';

    if (!reviews.length) { ratingContainer.style.display = 'none'; return; }

    const avg = reviews.reduce((sum, r) => sum + r.rating, 0) / reviews.length;
    renderStars(ratingContainer, avg, reviews.length);
  });
}

function renderStars(container, avg, count) {
  const starContainer = container.querySelector('.star-rating');
  const label = container.querySelector('.rating-label');
  let stars = '';
  for (let i = 1; i <= 5; i++) {
    stars += i <= avg
      ? '<span class="rating-star">★</span>'
      : '<span class="rating-star rating-star--empty">★</span>';
  }
  starContainer.innerHTML = stars;
  if (label) label.textContent = `${avg.toFixed(1)} (${count} Reviews)`;
}

document.addEventListener('DOMContentLoaded', async () => {
  const productList = document.querySelector('#product-list');
  if (!productList) return;
  await injectRatings(productList.querySelectorAll('.w-dyn-item'));

  new MutationObserver(async () => {
    await injectRatings(productList.querySelectorAll('.w-dyn-item'));
  }).observe(productList, { childList: true, subtree: true });
});

document.addEventListener('DOMContentLoaded', async () => {
  const slug = window.location.pathname.split('/').filter(Boolean).pop();
  if (!slug) return;

  const ratingContainer = document.querySelector('.rating-container');
  if (!ratingContainer) return;

  const res = await fetch(`https://your-worker.workers.dev?slug=${slug}`);
  const reviewItems = await res.json();

  if (!reviewItems.length) {
    ratingContainer.querySelector('.rating-label').textContent = 'No reviews yet';
    return;
  }

  const avg = reviewItems.reduce((sum, r) => sum + Number(r.fieldData['rating']), 0) / reviewItems.length;
  const starContainer = ratingContainer.querySelector('.star-rating');
  const label = ratingContainer.querySelector('.rating-label');

  let stars = '';
  for (let i = 1; i <= 5; i++) {
    stars += i <= avg
      ? '<span class="rating-star">★</span>'
      : '<span class="rating-star rating-star--empty">★</span>';
  }
  starContainer.innerHTML = stars;
  label.textContent = `${avg.toFixed(1)} (${reviewItems.length} Reviews)`;
});

<form id="review-form">
  <input type="text" name="name" placeholder="Your name" required />
  <input type="text" name="reviewTitle" placeholder="Review title" required />
  <textarea name="review" placeholder="Write your review" required></textarea>
  <div id="star-picker"></div>
  <input type="hidden" name="rating" />
  <input type="hidden" name="product" value="YOUR-PRODUCT-SLUG" />
  <button type="submit">Submit Review</button>
</form>
<div id="review-form-success" style="display:none">
  Thanks for your review! It will appear once approved.
</div>

const form = document.querySelector('#review-form');
const ratingInput = form.querySelector('[name="rating"]');
const starPicker = document.querySelector('#star-picker');
let selectedRating = 0;

for (let i = 1; i <= 5; i++) {
  const star = document.createElement('span');
  star.dataset.value = i;
  star.textContent = '★';
  star.style.cursor = 'pointer';
  star.style.color = '#d1d5db';
  starPicker.appendChild(star);
}

const stars = starPicker.querySelectorAll('span');

stars.forEach(star => {
  star.addEventListener('mouseover', () => {
    const val = Number(star.dataset.value);
    stars.forEach(s => s.style.color = Number(s.dataset.value) <= val ? '#fbbf24' : '#d1d5db');
  });
  star.addEventListener('mouseout', () => {
    stars.forEach(s => s.style.color = Number(s.dataset.value) <= selectedRating ? '#fbbf24' : '#d1d5db');
  });
  star.addEventListener('click', () => {
    selectedRating = Number(star.dataset.value);
    ratingInput.value = selectedRating;
  });
});

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  if (!selectedRating) { alert('Please select a star rating.'); return; }

  const res = await fetch('https://your-worker.workers.dev', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      name: form.querySelector('[name="name"]').value,
      product: form.querySelector('[name="product"]').value,
      reviewTitle: form.querySelector('[name="reviewTitle"]').value,
      review: form.querySelector('[name="review"]').value,
      rating: selectedRating
    })
  });

  const data = await res.json();
  if (data.success) {
    form.style.display = 'none';
    document.querySelector('#review-form-success').style.display = 'block';
  } else {
    alert('Something went wrong, please try again.');
  }
});