Custom Modal Content: Tailor the Feedback Form

When a user clicks one of the feedback buttons, a modal appears to collect additional context. This modal is your opportunity to guide users, reinforce your brand voice, and gather the specific information you need. Let’s explore how to customize every aspect of the feedback modal.

Default Modal Structure

The feedback modal consists of several key elements:

1. Title - A thank-you message confirming the feedback was received
2. Subtitle - A prompt encouraging users to add more detail
3. Textarea - Where users type their message (with placeholder text)
4. Submit Button - Primary action to send the feedback with a message
5. Skip Button - Secondary action to submit feedback without a message

Here’s what the default modal looks like:

Default Modal

Click a button to see the standard modal

Loading embed...

By default, the modal displays:

• Title: “Thank you for your feedback!”
• Subtitle: “Would you like to add a message to help us understand your feedback better?”
• Placeholder: “Optional: Tell us more about your experience…”
• Submit Button: “Submit”
• Skip Button: “Skip”

Customizing Text with the text Configuration

The text configuration option lets you override any text label in the modal. Here are the modal-specific properties:

Property	Default	Description
modalTitle	”Thank you for your feedback!”	The main heading in the modal
modalSubtitle	”Would you like to add a message…”	Explanatory text below the title
placeholder	”Optional: Tell us more…”	Placeholder text in the textarea
submitButton	”Submit”	Text on the primary action button
skipButton	”Skip”	Text on the secondary action button

Example: Product Feedback Form

Product Feedback

Customized for product teams

Loading embed...

new QaidFeedback({
  endpoint: '/api/feedback',
  text: {
    modalTitle: "We appreciate your input!",
    modalSubtitle: "Help our product team understand what you experienced.",
    placeholder: "Describe what happened, what you expected, or what could be improved...",
    submitButton: "Send Feedback",
    skipButton: "Not now"
  }
});

Example: Bug Report Focus

Bug Report Style

Optimized for collecting bug reports

Loading embed...

new QaidFeedback({
  endpoint: '/api/feedback',
  text: {
    modalTitle: "Thanks for reporting this issue",
    modalSubtitle: "The more detail you provide, the faster we can fix it.",
    placeholder: "Steps to reproduce: 1) ... 2) ... 3) ...",
    submitButton: "Report Bug",
    skipButton: "Skip details"
  }
});

Example: Minimal & Direct

Minimal Style

Short and to the point

Loading embed...

new QaidFeedback({
  endpoint: '/api/feedback',
  text: {
    modalTitle: "Got it!",
    modalSubtitle: "Anything else?",
    placeholder: "Type here...",
    submitButton: "Done",
    skipButton: "Nope"
  }
});

Modal Positioning

The feedback modal intelligently positions itself relative to the selected element (when targeting is enabled) or near the feedback buttons (when skipTargeting: true).

Positioning Logic

1. Below preferred - The modal tries to appear below the target element first
2. Above fallback - If there’s not enough space below, it appears above
3. Viewport clamping - The modal never extends outside the visible area
4. Arrow pointing - A small arrow points to the exact click location

The modal maintains an 8px gap from the target element and 16px padding from viewport edges.

Modal Width

You can control the modal width with the modalWidth option:

new QaidFeedback({
  endpoint: '/api/feedback',
  modalWidth: 500  // Default is 400
});

Wider modals work well when you need more space for detailed feedback or longer placeholder text.

Styling the Modal with CSS

While the modal’s structure is fixed, you can customize its appearance using CSS. The modal uses these class names:

/* Modal backdrop */
.qaid-backdrop {
  background: rgba(0, 0, 0, 0.3);  /* Use backdropOpacity config instead */
}

/* Modal container */
.qaid-modal {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Modal title */
.qaid-modal h3 {
  color: #1a1a1a;
  font-size: 1.125rem;
  font-weight: 600;
}

/* Modal subtitle */
.qaid-modal p {
  color: #666;
  font-size: 0.875rem;
}

/* Textarea */
.qaid-modal textarea {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  resize: vertical;
}

/* Submit button */
.qaid-modal button[type="submit"] {
  /* Inherits positive color from config */
}

/* Skip button */
.qaid-modal button:not([type="submit"]) {
  color: #666;
}

Configuration-Based Styling

Several modal styles can be set through configuration without CSS:

new QaidFeedback({
  endpoint: '/api/feedback',
  // Modal width in pixels
  modalWidth: 400,
  // Backdrop opacity (0-1)
  backdropOpacity: 0.3,
  // Font for all text
  fontFamily: 'Inter, system-ui, sans-serif',
  // Base font size
  fontSize: 16,
  // Colors affect modal buttons
  colors: {
    positive: '#22c55e',  // Submit button color for positive feedback
    negative: '#ef4444'   // Submit button color for negative feedback
  }
});

Custom Styled

Modified with configuration options

Loading embed...

Required vs Optional Message Field

By default, the message field is optional - users can click “Skip” to submit their thumbs up/down without adding text. This reduces friction and increases feedback volume.

The placeholder text makes this clear with the default “Optional: Tell us more…” prefix. You can reinforce or change this expectation:

Making It Feel Required

While you can’t technically require a message (users can always skip), you can encourage responses:

new QaidFeedback({
  endpoint: '/api/feedback',
  text: {
    modalSubtitle: "Please tell us more so we can take action.",
    placeholder: "We need details to investigate this...",
    skipButton: "Submit without details"
  }
});

Emphasizing It’s Optional

For higher completion rates, make optional status very clear:

new QaidFeedback({
  endpoint: '/api/feedback',
  text: {
    modalSubtitle: "Optionally add context (or just skip ahead).",
    placeholder: "No pressure - only if you have time!",
    skipButton: "Skip"
  }
});

Combining Modal Customization with Other Features

The modal text works together with other embed features:

With Screenshot Capture

When screenshots are enabled, the modal context helps users understand what’s being captured:

new QaidFeedback({
  endpoint: '/api/feedback',
  captureScreenshot: true,
  text: {
    modalTitle: "Screenshot captured!",
    modalSubtitle: "Add notes to explain what you see in the screenshot.",
    placeholder: "Point out what's wrong or what you'd like to change..."
  }
});

With Custom Branding

Combine text customization with visual branding:

Branded Experience

Text + visual customization

Loading embed...

new QaidFeedback({
  endpoint: '/api/feedback',
  colors: {
    positive: "#a78bfa",
    negative: "#f472b6"
  },
  text: {
    modalTitle: "You're awesome!",
    modalSubtitle: "Help us make this even better.",
    placeholder: "Your ideas matter to us...",
    submitButton: "Send love",
    skipButton: "Skip for now"
  }
});

Script Tag Data Attributes

All text options are available as data attributes for script tag installation:

<script
  src="https://unpkg.com/@qaiddev/thumbs-embed"
  data-endpoint="/api/feedback"
  data-modal-title="We value your feedback!"
  data-modal-subtitle="Tell us what you think."
  data-placeholder="Share your experience..."
  data-submit-button="Send"
  data-skip-button="Skip"
  data-modal-width="450"
  data-backdrop-opacity="0.4"
></script>

Best Practices

1. Keep titles short - Users scan, so make titles 3-6 words
2. Be specific in subtitles - Guide users toward useful feedback
3. Use action verbs - “Send Feedback” is clearer than “OK”
4. Match your brand voice - Casual apps can use casual language
5. Consider your audience - B2B may prefer formal; consumer apps can be playful
6. Test skip button copy - “Skip” vs “Not now” vs “No thanks” affect click rates

The modal is often the last touchpoint before feedback is submitted. Thoughtful customization here can significantly improve both the quantity and quality of feedback you receive.