How to add Asklet to VitePress

Show Asklet at the end of every VitePress doc page with the doc-after layout slot.

Steps

01
Copy your snippet

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

Add .vitepress/theme/Feedback.vue with the iframe, keyed by route.path so each page gets its own survey (example below).
03
Put it in the doc-after slot

In .vitepress/theme/index.js, extend the default theme and render the component in the doc-after layout slot.
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.
The doc-after slot only exists on doc pages, so your home page and pages with layout: page stay without a survey.
Without cleanUrls, addresses end in .html. Patterns still match them: /guide/* covers /guide/getting-started.html.

The feedback component

Use the src from your own snippet.

<!-- .vitepress/theme/Feedback.vue -->
<script setup>
import { useRoute } from 'vitepress';

const route = useRoute();
</script>

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

The theme entry

If you already have a custom theme, add the doc-after slot to its Layout.

// .vitepress/theme/index.js
import { h } from 'vue';
import DefaultTheme from 'vitepress/theme';
import Feedback from './Feedback.vue';

export default {
  extends: DefaultTheme,
  Layout: () => h(DefaultTheme.Layout, null, { 'doc-after': () => h(Feedback) })
};