Custom Button Icons

Each button’s icon is a string of HTML: an <svg>, or an emoji. The widget puts the same icon in the badge at the top of the message box, which flips between up and down.

Option	Script attribute	Replaces
positiveIcon	data-positive-icon	The thumbs-up, and the badge when it reads “up”
negativeIcon	data-negative-icon	The thumbs-down, and the badge when it reads “down”
feedbackIcon	data-feedback-icon	The one button in single-button mode, and its badge
recordIcon	none	The record button, when video is on

Use your own SVG

const heart =
  "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z";

new QaidFeedback({
  endpoint: "https://qaid.dev/api/feedback",
  apiKey: "YOUR_PROJECT_KEY",
  positiveIcon: `<svg viewBox="0 0 24 24" fill="currentColor"><path d="${heart}"/></svg>`,
  negativeIcon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="${heart}"/></svg>`,
  colors: { positive: "#db2777", negative: "#4b5563" },
});

Draw with currentColor and the icon takes the button’s text colour, which on the default buttons turns white on hover.

How big it draws depends on the buttons:

1. On the default buttons, the widget sizes every SVG to 18, 24 or 32 pixels, following buttonSize. width and height on the SVG are ignored.
2. With your own buttonClass, an SVG with no width and no qaid-icon class draws at 18, 24 or 32 pixels, following buttonSize. This needs thumbs-embed 1.8.0 or later. A width on the SVG, or a size in your CSS, wins. The badge is not sized for you; see Custom button styles.

Check each icon at 18 and at 32 pixels. Detail that reads large can vanish small.

Use an emoji

Pass the emoji itself. The widget sizes it to match the button, so it needs no wrapper or font size.

new QaidFeedback({
  endpoint: "https://qaid.dev/api/feedback",
  apiKey: "YOUR_PROJECT_KEY",
  positiveIcon: "🚀",
  negativeIcon: "🐢",
});

Emoji look different on each system. Check them on the phones and computers your visitors use.

Change the single-button and record icons

The single button and the record button take icons the same way.

new QaidFeedback({
  endpoint: "https://qaid.dev/api/feedback",
  apiKey: "YOUR_PROJECT_KEY",
  singleButton: true,
  feedbackIcon: "💬",
  captureVideo: true,
  recordIcon: "🎥",
});

With a script tag, set it with data-record-icon (thumbs-embed 1.9.0 or later):

<script
  src="https://unpkg.com/@qaiddev/thumbs-embed/dist/embed.js"
  defer
  data-api-key="YOUR_PROJECT_KEY"
  data-endpoint="https://qaid.dev/api/feedback"
  data-capture-video="true"
  data-record-icon="🎥"
></script>

Set icons from a script tag

Wrap the attribute in single quotes so the SVG’s double quotes survive:

<script
  src="https://unpkg.com/@qaiddev/thumbs-embed/dist/embed.js"
  defer
  data-api-key="YOUR_PROJECT_KEY"
  data-endpoint="https://qaid.dev/api/feedback"
  data-positive-icon='<svg viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="9"/></svg>'
  data-negative-icon="🐢"
></script>

Presets on the Customize page carry their own icons, and the snippet it builds escapes them for you. See The Embed Customizer.

Keep icons safe and labelled

The widget inserts the string as HTML. Use only icons you wrote or trust, and never build one from a visitor’s input or from the page address.

A screen reader reads the button’s label, not its icon: “Send positive feedback”, “Send negative feedback”, “Send feedback” and “Record a screen recording” by default. An emoji icon needs nothing extra. To reword the labels, see Text customization.