How do I add a feedback widget to an Astro site?

Add the FeedbackJar script tag to your base Layout.astro inside the body. Use Astro's define:vars directive to pass your Widget ID from import.meta.env.PUBLIC_FEEDBACKJAR_ID into the inline script.

Does FeedbackJar work with Astro's static output mode?

Yes. FeedbackJar is a client-side widget with no server-side requirements. It works in Astro's static output mode (output: 'static'), hybrid mode, and server (SSR) mode.

Can I use FeedbackJar with React islands in Astro?

Yes. FeedbackJar runs outside the island architecture — it's a vanilla JS widget initialized in your Astro layout. It doesn't conflict with React, Vue, Svelte, or Solid islands.

How do I pass user data to FeedbackJar in Astro SSR?

In your Layout.astro frontmatter, fetch the user from your auth library using Astro.request. Pass the user object to your inline script using the define:vars directive, then call window.fj.identify() with the user data.

Other frameworks

✓ 1 minute setup

Easy

FeedbackJar + Astro

FeedbackJar integrates with Astro via a script tag in your base layout. Works with static sites, SSR mode, and any Astro UI framework (React, Vue, Svelte, Solid).

Get your Widget ID free → 7-day free trial · No credit card required

How to install FeedbackJar in Astro

Get your Widget ID

bash

# Sign up at app.feedbackjar.com
# Create a widget → copy your Widget ID

Add to your base Layout.astro

astro

---
// src/layouts/Layout.astro
const { feedbackjarId } = Astro.locals; // optional: pass from middleware
---
<html>
  <body>
    <slot />

    <script src="https://cdn.feedbackjar.com/sdk.js"></script>
    <script define:vars={{ widgetId: import.meta.env.PUBLIC_FEEDBACKJAR_ID }}>
      window.fj.init(widgetId);
    </script>
  </body>
</html>

→ Uses Astro's define:vars directive to pass env variables into inline scripts.

Add Widget ID to .env

bash

# .env
PUBLIC_FEEDBACKJAR_ID=your_widget_id

Identify users (optional, for SSR mode)

astro

---
// src/layouts/Layout.astro
import { getUser } from '../lib/auth';
const user = await getUser(Astro.request);
---
<script define:vars={{ user, widgetId: import.meta.env.PUBLIC_FEEDBACKJAR_ID }}>
  window.fj.init(widgetId);
  if (user) {
    window.fj.identify({ id: user.id, email: user.email });
  }
</script>

What you get

✓ Works with Astro static and SSR modes
✓ Uses define:vars for env variable injection
✓ Compatible with any Astro UI framework
✓ No JS framework required
✓ User identification in SSR layouts
✓ Minimal bundle impact

Add feedback to your Astro app today

Start Free Trial 7-day free trial · No credit card required

Frequently Asked Questions

Looking for the full technical reference? Read the Astro docs →