The Embed Customizer

Every project has a Customize button in its header. It opens the Embed Customizer: controls on the left, and on the right a live preview of the feedback buttons, the snippet that installs them, and the same pair for quests. Any project member can use it, on any plan.

Save your settings

Save, at the top of CONTROLS, stores every control and the FOLLOW-UP QUESTS links with the project, so the page opens where anyone on the team left it. The two quest pickers are not saved. Leave with unsaved changes and the page asks first. Your site only changes when you paste a new snippet.

Start from a preset

A preset is a finished look: CSS, a button class, a pair of icons and two colours. Four of them also change the words. There are 17, from Default and Minimal to Neon, Command Console and Retro Pixel.

1. Pick one

   Click a card under Presets. The THUMBS PREVIEW redraws in it.

2. Try it out

   Press a thumb in the preview. It behaves just as it will on your site.

A preset sets both colours, the size and all six text labels. Where it has no value of its own, that field goes back to the default, so nothing from the last preset stays behind. Position, the switches and the modal settings are left alone. See Getting started with themes for the full list.

Save a theme to use again

Signed in, the Theme heading has a Save Theme button. Name the theme and it joins Your Themes, a strip above the presets. Themes belong to your account, so they show up on every project’s Customize page.

Saved in a theme	Not saved
CSS, button class, icons	Marker and Annotation colours
Positive and Negative colours	Position, direction and offsets
Size	Every on/off switch
The six text labels	Modal width, backdrop, font, z-index

Click a saved theme to load it. The button then reads Apply, which overwrites the theme, next to Save New, which saves a copy. Hover a card for its × (delete) and globe (share) buttons. Browse Public Themes opens the community gallery. The first pick of a theme loads it and saves a copy to Your Themes; pick it again, or pick one of your own, and it selects the theme you already have. See the theme gallery.

Set the colours

Under Colors, use the swatch or type a value.

Control	What it paints
Positive	Thumbs-up hover, the thumbs-up targeting reticle, the modal badge on a thumbs-up
Negative	The same for thumbs-down, and the reticle for the single button
Marker	Submit button, focus rings, the ring on the picked element
Annotation	The first pen colour in the markup editor. Empty means Marker

The full list of surfaces, and what no colour setting reaches, is in Brand color matching.

Place the buttons

1. Pick a corner

   Choose it under Position, or click one of the four corner brackets in the preview.

2. Line them up

   Direction H puts the buttons in a row, V stacks them. Size is S, M or L (36, 48 or 64 pixels).

3. Nudge them

   X and Y set the gap from the edges, 0 to 100 pixels. The default is 16.

More on corners, offsets and page containers is in Position and placement.

Turn features on

The switches under Position & Style each add one attribute to the snippet.

Switch	What it does
Skip Targeting	A click opens the message box straight away. No pointing at the page
Incognito	Buttons stay invisible until hovered or focused. Phones have no hover
Video	Adds a record button. Recordings need Pro
Redaction	With Video on, the visitor clicks areas to blur before recording
Hide Thumbs	Leaves only the record button, so it needs Video on. Browsers that can’t record, most phones among them, show no buttons
Hide Dismiss	Removes the × that lets a visitor hide the widget for good
Hide Confirmation	Closes the box on send, with no “Thank you!” screen
Single Button	One neutral Feedback button instead of thumbs up and down
Annotate	Skips targeting, takes a screenshot and opens the markup editor

There is no screenshot switch. Annotate is the only setting here that takes one; for a plain screenshot, add data-capture-screenshot="true" to the snippet yourself (Screenshot capture). There is no console switch either: the widget always sends recent console messages. On the Free plan the server drops screenshots and console messages, and refuses video.

Size the modal and the type

Under Modal & Typography: Width (300 to 600 pixels), Backdrop (how dark the page behind the box gets, 0 to 100%), Font Size (12 to 24 pixels, which scales every text inside), z-index, and Font Family. On a phone the box is a sheet across the bottom of the screen, so Width does not apply there.

Change the words

Click Text Labels to open six fields: Tooltip, Modal Title, Modal Subtitle, Placeholder, Submit Btn and Skip Btn. The message box has one button: it shows the Skip Btn text until the visitor types, then the Submit Btn text.

The screen-reader labels and the words on the “Thank you!” and “Message not sent” screens are not here. They are set in code; see Text customization.

Open a quest after a thumb

The FOLLOW-UP QUESTS panel links Thumbs up, Thumbs down or After video to one of your published quests, which then opens in place of the message box. Link thumbs buttons to quests walks through it.

Preview a quest in a theme

The lower half of the page is for the quests embed. Under QUEST PREVIEW, Quest theme picks one of your quest themes and Preview quest picks a published quest; the preview draws that quest in that theme. QUEST CODE then installs it. Its theme URL carries the project key, so a private theme works on your own sites.

QUEST CODE also takes the colours, modal width, backdrop and font from the controls above. It does not take the preset’s CSS or icons.

Copy the snippet

THUMBS CODE has two forms. Switch between them with Script and ESM, then click Copy. Only settings you changed from the defaults appear.

Form	Use it when	Where the CSS goes
Script	Any site. Paste it just before </body>	A <style id="qaid-theme" media="not all"> block before the tag, which data-css-selector points at
ESM	An app with a bundler, after npm install @qaiddev/thumbs-embed	A css string inside the call

A Script snippet with the Minimal preset and the buttons moved to the bottom left looks like this. The CSS is cut short here, and the preset’s two icon attributes are left out:

<style id="qaid-theme" media="not all">
button.qaid-theme-minimal { border: 1px solid #e0e0e0; border-radius: 50%; }
</style>
<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-position="bottom-left"
  data-positive-color="#22c55e"
  data-negative-color="#ef4444"
  data-button-class="qaid-theme-minimal"
  data-css-selector="#qaid-theme"
></script>

media="not all" keeps your own page from using those rules. The widget reads the block’s text and puts it inside itself, where your page’s styles cannot reach. Styling the feedback embed explains how.

The key in the snippet is the project’s oldest live key from Settings → API Keys. Revoke it and the snippet stops working; copy a fresh one from here. A project with no live key gets no snippet: both code panels show a warning and a Create an API key link instead. Only the owner can make keys.