Welcome to Quick Feedback! 👋🏼
To get started adding feedback to your site, retrieve the site ID from the URL and place this iframe inside your site.
<iframe src="https://quickfeedback.digital/embed/SITE_ID" />
If you want to add feedback to multiple routes in a single site, forward a unique slug for that route.
<iframe src="https://quickfeedback.digital/embed/SITE_ID/ROUTE" />
This is perfect for adding comments to a blog or product reviews.
When embedding your feedback iframe, you might want it to automatically resize the height to its contents. This can be achieved using iframe-resizer.
For example, if you are using React, you can add iframe-resizer-react and do something like this. This library is 5.8kB minified + gzipped with no dependencies.
<IframeResizer
checkOrigin={false}
title="Comments"
src={`https://quickfeedback.digital/embed/SITE_ID`}
style={{
width: '1px',
minWidth: '100%'
}}
/>
If you'd like to completely customize the look of your feedback, you can use our API.
Simply make a GET request to /api/feedback/SITE_ID.
Here's an example using React and SWR.
import useSWR from 'swr'
const fetcher = (...args) => fetch(...args).then(res => res.json())
function Feedback () {
const API = 'https://quickfeedback.digital/api/feedback/SITE_ID';
const { data, error } = useSWR(API, fetcher)
if (error) return <div>Failed to load</div>
if (!data) return <div>Loading...</div>
return {data.feedback.map(feedback => (
<p>{feedback.author}</p>
<p>{feedback.createdAt}</p>
<p>{feedback.text}</p>
))}
}
If you would like to check the complete working product, you can take a look at the live demo below. Simple go to the following URL Quick Feedback Demo
Simple Example
<div className="flex">
<div>
<iframe src="https://quickfeedback.digital/embed/SITE ID" />
</div>
<div>
<IframeResizer
checkOrigin={false}
title="Comments"
src={`https://quickfeedback.digital/embed/SITE ID`}
style={{
width: '1px',
minWidth: '100%',
minHeight: '100%',
}}
/>
</div>
</div>
Cheers, happy building 👋, by Rokas Rudzianskas ❤️