Conditional Display: Show Feedback at the Right Time

Not every user needs to see the feedback widget at all times. Showing feedback prompts at the right moment increases response rates and improves user experience. This guide covers techniques for conditionally displaying the Qaid feedback embed.

Why Conditional Display?

There are several reasons you might want to control when the feedback widget appears:

• Reduce noise for new users - Let users explore your app before asking for feedback
• Target specific audiences - Only show to logged-in users, paying customers, or beta testers
• Page-specific feedback - Collect feedback only on certain pages or features
• Avoid interruptions - Hide during critical flows like checkout or onboarding
• A/B testing - Show to a percentage of users to test engagement

JavaScript Initialization

Instead of using the auto-initializing script tag, initialize the embed programmatically when conditions are met:

<!-- Load the library without auto-init -->
<script src="https://cdn.qaid.dev/embed.js"></script>

<script>
  // Initialize only when your conditions are met
  if (shouldShowFeedback()) {
    window.qaid = new Qaid.QaidFeedback({
      apiKey: "your-api-key",
      position: "bottom-right"
    });
  }
</script>

This gives you full control over when and how the embed appears.

Showing Only for Logged-In Users

A common pattern is restricting feedback to authenticated users:

// Check your auth state
const user = await getCurrentUser();

if (user) {
  window.qaid = new Qaid.QaidFeedback({
    apiKey: "your-api-key",
    userId: user.id,
    userEmail: user.email
  });
}

Showing Only on Certain Pages

Limit feedback collection to specific pages or sections:

// Show only on dashboard pages
const allowedPaths = ["/dashboard", "/settings", "/projects"];

if (allowedPaths.some(path => window.location.pathname.startsWith(path))) {
  window.qaid = new Qaid.QaidFeedback({
    apiKey: "your-api-key"
  });
}

For more complex routing logic:

// Show on all pages except auth flows
const blockedPaths = ["/login", "/signup", "/reset-password", "/verify"];

const isBlockedPath = blockedPaths.some(path =>
  window.location.pathname.startsWith(path)
);

if (!isBlockedPath) {
  window.qaid = new Qaid.QaidFeedback({
    apiKey: "your-api-key"
  });
}

Hiding During Onboarding Flows

New users going through onboarding should focus on learning your product:

// Check if user has completed onboarding
const user = await getCurrentUser();

if (user && user.onboardingComplete) {
  window.qaid = new Qaid.QaidFeedback({
    apiKey: "your-api-key",
    userId: user.id
  });
}

You can also destroy an existing embed when entering an onboarding flow:

function startOnboarding() {
  // Remove feedback widget during onboarding
  if (window.qaid) {
    window.qaid.destroy();
    window.qaid = null;
  }

  // Begin onboarding...
  showOnboardingModal();
}

function completeOnboarding() {
  // Re-initialize after onboarding
  window.qaid = new Qaid.QaidFeedback({
    apiKey: "your-api-key"
  });
}

The destroy() Method

The destroy() method completely removes the embed from the page, cleaning up all event listeners and DOM elements:

const embed = new Qaid.QaidFeedback({
  apiKey: "your-api-key"
});

// Later, when you need to remove it
embed.destroy();

Use cases for destroy():

• User logs out - Remove the widget and user context
• Entering sensitive areas - Hide during checkout or account deletion
• SPA navigation - Clean up when navigating away from feedback-enabled sections

// Example: Remove on logout
async function logout() {
  if (window.qaid) {
    window.qaid.destroy();
    window.qaid = null;
  }

  await signOut();
  redirect("/login");
}

Combining Conditions

Real applications often combine multiple conditions:

async function initializeFeedback() {
  const user = await getCurrentUser();
  const path = window.location.pathname;

  // Must be logged in
  if (!user) return;

  // Must have completed onboarding
  if (!user.onboardingComplete) return;

  // Must not be on blocked pages
  const blockedPaths = ["/checkout", "/delete-account"];
  if (blockedPaths.some(p => path.startsWith(p))) return;

  // Optional: Only show to a percentage of users
  if (user.id % 100 >= 50) return; // 50% rollout

  window.qaid = new Qaid.QaidFeedback({
    apiKey: "your-api-key",
    userId: user.id,
    userEmail: user.email
  });
}

initializeFeedback();

Summary

Conditional display helps you collect feedback from the right users at the right time:

• Use programmatic initialization instead of auto-init for full control
• Filter by authentication to get feedback from engaged users
• Filter by page to focus on specific features
• Use destroy() to remove the embed, then reinitialize when needed
• Combine conditions for sophisticated targeting

By showing the feedback widget strategically, you’ll get higher quality feedback and a better user experience.