Your Marketplace Website

> For the complete documentation index, see [llms.txt](https://docs.cloutly.com/reviews-sdk-for-marketplace-websites/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cloutly.com/reviews-sdk-for-marketplace-websites/widgets-sdk/custom-html.md).

# Custom HTML Review Widgets

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

```jsx
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.

```jsx
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
```