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 Aggregation API and display data however you want in your app.

React.js

import React from 'react'

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

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

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

const MyApp = () => {
  return (
    <MainApp>
      <head>
        <title>Your Marketplace Website</title>
      </head>
      <BusinessPage />
    </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 Business ID from slug `/business/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

PreviousGet Review Insights

Last updated 12 hours ago

hashtagReact.js

hashtagNext.js

React.js

Next.js