Skip to content
MagicFeedback SDK

Quickstart

You need two values from MagicFeedback:

  • APP_ID — your integration id
  • PUBLIC_KEY — your public key

1. Install

Section titled “1. Install”

See Installation for the full install steps.

Terminal window
npm install @magicfeedback/native

2. Mount a container

Section titled “2. Mount a container”

Place an empty <div> with an id wherever you want the survey to appear. The SDK will render into that container.

<div id="survey-root"></div>

The container can be anywhere — a full page, a modal, a drawer, a tab, a bottom sheet. See Rendering surfaces for patterns.

3. Initialize and render

Section titled “3. Initialize and render”

Bundler (Vite / Webpack / SPA)

Section titled “Bundler (Vite / Webpack / SPA)”
import magicfeedback from "@magicfeedback/native";
import "@magicfeedback/native/dist/styles/magicfeedback-default.css";


magicfeedback.init({ env: "prod" });


const form = magicfeedback.form("APP_ID", "PUBLIC_KEY");


await form.generate("survey-root", {
  addButton: true,
  addSuccessScreen: true,
});

Plain HTML

Section titled “Plain HTML”
<link rel="stylesheet" href="./node_modules/@magicfeedback/native/dist/styles/magicfeedback-default.css" />
<div id="survey-root"></div>
<script src="./node_modules/@magicfeedback/native/dist/magicfeedback-sdk.browser.js"></script>
<script>
  window.magicfeedback.init({ env: "prod" });
  const form = window.magicfeedback.form("APP_ID", "PUBLIC_KEY");
  form.generate("survey-root", { addButton: true, addSuccessScreen: true });
</script>

Try it before production

Section titled “Try it before production”

Use the dev environment plus dryRun to QA your survey without creating real feedback records.

magicfeedback.init({
  env: "dev",
  debug: true,
  dryRun: true,
});

dryRun: true loads and navigates the form normally, but skips the final submission to the API.

Resume an existing session

Section titled “Resume an existing session”

If you already have a session id (e.g. from an email link), render it directly:

const form = magicfeedback.session("SESSION_ID");
await form.generate("survey-root", { addButton: true });

Next steps

Section titled “Next steps”