Getting Started

Welcome to Kommender! 👋🏼

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://uxdkhan.com/embed/SITE_ID" />

Multiple Routes

If you want to add feedback to multiple routes in a single site, forward a unique slug for that route.

<iframe src="https://uxdkhan.com/embed/SITE_ID/ROUTE" />

This is perfect for adding comments to a blog or product reviews.

Automatic Resizing

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://uxdkhan.com/embed/SITE_ID`}
  style={{
    width: '1px',
    minWidth: '100%'
  }}
/>

API

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://uxdkhan.com/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>
  ))}
}