How to add Asklet to Next.js

Add Asklet to a Next.js site with a small client component - no npm package.

Steps

01
Copy your snippet

In Asklet, open your website and click Copy website snippet at the top.
02
Create a feedback component

Add a client component that renders the iframe and keys it by usePathname(), so each page gets its own survey after client-side navigation (example below).
03
Render it below your content

Add <Feedback /> to the layout or page that renders your posts or docs, after the content.
04
Check it on your live site

Deploy to a domain you listed in Asklet and open a page. Then click through to another one and check that its own survey loads too.

Your snippet looks like this

<iframe src="https://asklet.io/embed/s/<your-site>" title="Article feedback" width="100%" height="480" loading="lazy" referrerpolicy="unsafe-url" style="border:0"></iframe>

Keep referrerpolicy="unsafe-url" on the iframe - Asklet uses it to know which page the reader is on, so the right survey appears.
If your site sends a Content-Security-Policy header, allow https://asklet.io in frame-src, or the browser blocks the iframe.
With the Pages Router, take the path from useRouter().asPath (next/router) instead of usePathname().

The component

Use the src from your own snippet. In JSX the attribute is written referrerPolicy, and style takes an object.

// components/Feedback.jsx
'use client';

import { usePathname } from 'next/navigation';

export default function Feedback() {
  const pathname = usePathname();
  return (
    <iframe
      key={pathname}
      src="https://asklet.io/embed/s/<your-site>"
      title="Article feedback"
      width="100%"
      height="480"
      loading="lazy"
      referrerPolicy="unsafe-url"
      style={{ border: 0 }}
    />
  );
}