How to add Asklet to Astro

Add Asklet to Astro posts with a tiny component in your post layout.

Steps

01
Copy your snippet

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

Save the snippet as src/components/Feedback.astro.
03
Add it to your post layout

In the layout your posts use, such as src/layouts/BlogPost.astro, import the component and render <Feedback /> after <slot />.
04
Check it on your live site

Deploy to a domain you listed in Asklet and open a post. 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.
With view transitions (<ClientRouter />), Astro swaps in the new page's body on every navigation, so each page gets a fresh iframe and its own survey. Astro reloads iframes on navigation even with transition:persist, so there is nothing to gain from adding it.
Rendering the survey inside a React, Vue or Svelte island instead? Key the iframe by path, as in the React, Vue and Svelte guide.

The component

Use the src from your own snippet.

<!-- src/components/Feedback.astro -->
<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>