How to add Asklet to Docusaurus

Show Asklet at the end of every Docusaurus doc by wrapping the doc footer.

Steps

01
Copy your snippet

In Asklet, open your website and click Copy website snippet at the top.
02
Wrap the doc footer

In your site folder, run npm run swizzle @docusaurus/theme-classic DocItem/Footer -- --wrap and confirm when it asks. Docusaurus creates src/theme/DocItem/Footer/index.js, which still renders the original footer.
03
Add the iframe

Render the iframe after the original footer, as in the example below. Keying it by the current path gives each doc its own survey when readers move between docs.
04
Check it on your live site

Deploy to a domain you listed in Asklet and open a doc. 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.
Docusaurus counts DocItem/Footer as an internal component, so the swizzle command asks you to confirm (or takes --danger). A wrapper only adds to the original footer, so it is less likely to break than an ejected copy, but check the survey after each Docusaurus upgrade.
Blog posts use their own layout. To ask on them too, wrap BlogPostItem/Footer the same way.

The wrapped footer

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

// src/theme/DocItem/Footer/index.js
import React from 'react';
import Footer from '@theme-original/DocItem/Footer';
import { useLocation } from '@docusaurus/router';

export default function FooterWrapper(props) {
  const { pathname } = useLocation();
  return (
    <>
      <Footer {...props} />
      <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 }}
      />
    </>
  );
}

Different questions for sections and versions

Docs live under /docs/ by default, so the website's default survey or a pattern such as /docs/** covers them all. Add more specific patterns where you want other questions:

/docs/api/** for the API reference
/docs/guides/** for tutorials and how-tos
/docs/next/** for the unreleased version

Common questions

Is there a Docusaurus plugin?

No, and none is needed. The widget is one iframe in a wrapped component, so there is nothing to install or keep updated.

Does it work with versioned docs?

Yes. Each version has its own path prefix, such as /docs/next/, so a pattern can give each version its own survey, and results show which pages the answers came from.

Will it slow down my docs?

No. The iframe loads lazily, when a reader scrolls near the end of a doc, and adds no script to your bundle.