Custom HTML Review Widgets

If you don't want to use the Enrich Review Widget view provided by Cloutly. You can design the review widgets yourself.

Here is a quick example of a DIY solution for review widgets using React.

Notice how you still perform an API call to the Aggreation API and display them however you would like on your site.

React.js

import React from 'react'

const SupplierPage = () => {
  const [reviews, setReviews] = React.useState([]);

  React.useEffect(() => {
    // ** 1
    // This call is your backend endpoint which pulls reviews 
    // from Cloutly API for the given vendor ID.
    getReviewsForSupplier("VENDOR_ID", options)
      .then((data) => setReviews(data));
  }, []);

 // ** 2
 // You can display reviews however you like using your own components
  return (
     <div>
       MY Supplier
       {reviews && <CustomReviewComponent reviews={reviews}/>}
     </div>
  );
}

const MyApp = () => {
  return (
    <MainApp>
      <head>
        <title>Your Marketplace Website</title>
      </head>
      <SupplierPage />
    </MainApp>
  );
};

Next.js

Example: Use getServerSideProps to render review data server-side dynamically.

import React from 'react'

function Page({ data }) {
  // Render review data...
}

// This gets called on every request
export async function getServerSideProps(context) {
  const { id } = context.params; // Get Supplier ID from slug `/vendor/1`

  // Fetch data from Cloutly API
  const reviews = await fetchReviews(id);

  // Pass data to the page via props
  return { props: { data: reviews } }
}

export default Page

PreviousEnriched Review Widgets UI

Last updated 2 years ago

hashtagReact.js

hashtagNext.js

React.js

Next.js