Skip to main content
Asklet
Sign in Start free
All integrations

How to add Asklet to React, Vue & Svelte

Embed Asklet in a single-page app - one iframe, no SDK.

Start free

Steps

  1. 01

    Copy your snippet

    In Asklet, open your website and click Copy website snippet at the top.

  2. 02

    Render it as a component

    Paste the iframe into the screen's markup. In JSX, write referrerPolicy and use a style object instead of the style string.

  3. 03

    Re-mount it on navigation

    Client-side routing doesn't reload the iframe, so key it by the current path (for example key={pathname}) so each screen gets its own survey.

  4. 04

    Check it on your live site

    Deploy to a domain you listed in Asklet and open a screen with the widget. 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.
  • Use path patterns such as /app/projects/*/settings for screens with ids in the address.
  • If your site sends a Content-Security-Policy header, allow https://asklet.io in frame-src, or the browser blocks the iframe.

React

With React Router, read the path from useLocation and use it as the key. Use the src from your own snippet.

import { useLocation } from 'react-router-dom';

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

Vue

With Vue Router, key the iframe by the route path.

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

Svelte and SvelteKit

In SvelteKit, wrap the iframe in a {#key} block on the page path.

<script>
  import { page } from '$app/state';
</script>

{#key page.url.pathname}
  <iframe
    src="https://asklet.io/embed/s/<your-site>"
    title="Feedback"
    width="100%"
    height="480"
    loading="lazy"
    referrerpolicy="unsafe-url"
    style="border: 0"
  ></iframe>
{/key}

Troubleshooting

Every screen shows the first screen's survey

The iframe is not re-mounting on navigation. Key it by the current path, as in the examples above.

The browser console says the frame was blocked

If your site sends a Content-Security-Policy header, allow https://asklet.io in frame-src, or the browser blocks the iframe.

Common questions

Is there an npm package?

No, and none is needed. The widget is an iframe, so it works with any framework and adds nothing to your bundle.

Do signed-in users stay anonymous?

Yes. The iframe runs on Asklet's domain and can't see your app's session, cookies or user id, so answers stay anonymous even inside a logged-in app.

Does it work with Next.js, Nuxt or SvelteKit?

Yes. Render the iframe like any other element and key it by the path. Next.js has its own guide.

Related guides

Other platforms

All integrations

Get your first answers today.

Set-up takes a few minutes, and the free plan covers one website or app.

Start free

Free plan, no card needed.

en