All free tools
Create & share · HTML
Feedback Widget Generator
Configure a lightweight feedback control and copy a self-contained HTML embed example.
No account, no server upload, no hidden paywall. Work stays in this browser unless you explicitly copy, download, print, or enter a remote image URL.
Configure widget
Style the trigger and choose what happens when a visitor selects it.
Button color
Text color
Preview
A safe local preview; the generated code below contains the real action.
Feedback
Generated code
<!-- PrioSmith feedback widget -->
<div data-priosmith-feedback-widget-host style="all:initial!important;box-sizing:border-box!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;isolation:isolate!important;display:block!important;position:fixed!important;bottom:20px!important;right:20px!important;z-index:99999!important;">
<template data-priosmith-feedback-widget-template>
<style>
:host { color-scheme: light; }
*, *::before, *::after { box-sizing: border-box; }
.ps-feedback-launcher {
all: unset;
box-sizing: border-box;
--ps-control-disabled-opacity: 0.45;
--ps-focus-inner: #fffdf8;
--ps-focus-outer: #14202d;
--ps-shadow-raised:
0 0 0 1px rgb(20 32 45 / 6%),
0 1px 2px -1px rgb(20 32 45 / 8%),
0 4px 12px rgb(37 28 20 / 6%);
display: inline-flex;
min-height: 48px;
align-items: center;
justify-content: center;
border: 1px solid transparent;
border-radius: var(--ps-widget-radius);
padding: 12px 20px;
background: var(--ps-widget-bg);
color: var(--ps-widget-fg);
box-shadow: var(--ps-shadow-raised);
font: 700 14px/1.2 Manrope, ui-sans-serif, system-ui, sans-serif;
text-align: center;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.ps-feedback-launcher[data-ps-side="true"] { writing-mode: vertical-rl; }
.ps-feedback-launcher:hover:not(:disabled):not([aria-busy="true"]) {
filter: brightness(0.92);
}
.ps-feedback-launcher:focus-visible {
outline: 3px solid var(--ps-focus-inner);
outline-offset: 2px;
box-shadow:
0 0 0 7px var(--ps-focus-outer),
var(--ps-shadow-raised);
}
.ps-feedback-launcher:disabled,
.ps-feedback-action:disabled {
cursor: not-allowed;
filter: grayscale(0.35);
opacity: var(--ps-control-disabled-opacity);
}
.ps-feedback-launcher[aria-busy="true"],
.ps-feedback-action[aria-busy="true"] {
cursor: wait;
filter: grayscale(0.35);
opacity: var(--ps-control-disabled-opacity);
}
.ps-feedback-dialog {
all: unset;
box-sizing: border-box;
color-scheme: light;
--ps-paper: #f7f3ec;
--ps-paper-strong: #fffdf8;
--ps-paper-muted: #eee8df;
--ps-ink: #14202d;
--ps-ink-soft: #56606b;
--ps-line: #ded7cd;
--ps-line-strong: #c8bfb3;
--ps-control-border: #8f8376;
--ps-control-disabled-opacity: 0.45;
--ps-focus-inner: #fffdf8;
--ps-focus-outer: #14202d;
--ps-danger: #9a3d3a;
--ps-shadow-dialog: 0 24px 72px rgb(37 28 20 / 22%);
display: none;
position: fixed;
inset: 0;
width: min(calc(100% - 32px), 512px);
max-height: min(90svh, 704px);
margin: auto;
overflow: auto;
overscroll-behavior: contain;
border: 1px solid var(--ps-control-border);
border-radius: 0;
padding: 0;
background: var(--ps-paper-strong);
color: var(--ps-ink);
box-shadow: var(--ps-shadow-dialog);
font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
}
.ps-feedback-dialog[open] { display: block; }
.ps-feedback-dialog::backdrop {
background: rgb(17 24 33 / 55%);
backdrop-filter: blur(2px);
}
.ps-feedback-form {
all: unset;
box-sizing: border-box;
display: grid;
gap: 20px;
padding: clamp(24px, 6vw, 36px);
}
.ps-feedback-title {
all: unset;
display: block;
color: var(--ps-ink);
font-family: Newsreader, Georgia, serif;
font-size: 28px;
font-weight: 650;
line-height: 1.1;
letter-spacing: -0.025em;
}
.ps-feedback-description,
.ps-feedback-status {
all: unset;
display: block;
color: var(--ps-ink-soft);
font: 400 16px/1.6 Manrope, ui-sans-serif, system-ui, sans-serif;
}
.ps-feedback-description { margin-top: -8px; }
.ps-feedback-label {
all: unset;
display: grid;
gap: 8px;
color: var(--ps-ink);
font: 700 14px/1.4 Manrope, ui-sans-serif, system-ui, sans-serif;
}
.ps-feedback-textarea {
all: unset;
box-sizing: border-box;
display: block;
width: 100%;
min-height: 144px;
overflow: auto;
resize: vertical;
border: 1px solid var(--ps-control-border);
border-radius: 0;
padding: 12px;
background: var(--ps-paper-strong);
color: var(--ps-ink);
font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
white-space: pre-wrap;
overflow-wrap: break-word;
cursor: text;
user-select: text;
}
.ps-feedback-textarea:user-invalid {
border-color: var(--ps-danger);
box-shadow: inset 3px 0 0 var(--ps-danger);
}
.ps-feedback-textarea:focus-visible,
.ps-feedback-action:focus-visible {
outline: 3px solid var(--ps-focus-inner);
outline-offset: 2px;
box-shadow: 0 0 0 7px var(--ps-focus-outer);
}
.ps-feedback-textarea:user-invalid:focus-visible {
box-shadow:
inset 3px 0 0 var(--ps-danger),
0 0 0 7px var(--ps-focus-outer);
}
.ps-feedback-actions {
all: unset;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
}
.ps-feedback-action {
all: unset;
box-sizing: border-box;
display: inline-flex;
min-height: 44px;
align-items: center;
justify-content: center;
border: 1px solid var(--ps-control-border);
border-radius: 0;
padding: 10px 16px;
background: var(--ps-paper-strong);
color: var(--ps-ink);
font: 700 14px/1.2 Manrope, ui-sans-serif, system-ui, sans-serif;
text-align: center;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.ps-feedback-action:not(.ps-feedback-action-primary):hover:not(:disabled):not([aria-busy="true"]) {
border-color: var(--ps-ink);
background: var(--ps-paper-muted);
}
.ps-feedback-action-primary {
border-color: var(--ps-widget-bg);
background: var(--ps-widget-bg);
color: var(--ps-widget-fg);
}
.ps-feedback-action-primary:hover:not(:disabled):not([aria-busy="true"]) {
filter: brightness(0.92);
}
.ps-feedback-status {
border-left: 3px solid #ba532b;
padding-left: 12px;
}
.ps-feedback-status[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
.ps-feedback-launcher,
.ps-feedback-action {
transition-property: scale, background-color, border-color, color, filter, opacity;
transition-duration: 150ms;
transition-timing-function: ease-out;
}
.ps-feedback-launcher:active:not(:disabled):not([aria-busy="true"]),
.ps-feedback-action:active:not(:disabled):not([aria-busy="true"]) {
scale: 0.96;
}
}
@media (prefers-color-scheme: dark) {
.ps-feedback-dialog {
color-scheme: dark;
--ps-paper: #151a20;
--ps-paper-strong: #1c2229;
--ps-paper-muted: #242b32;
--ps-ink: #f6efe5;
--ps-ink-soft: #b8c0c8;
--ps-line: #313942;
--ps-line-strong: #46505a;
--ps-control-border: #697681;
--ps-focus-inner: #14202d;
--ps-focus-outer: #fffdf8;
--ps-danger: #ec9c97;
--ps-shadow-dialog: 0 28px 80px rgb(0 0 0 / 52%);
}
}
@media (min-width: 40rem) {
.ps-feedback-textarea { font-size: 14px; }
}
@media (max-width: 32rem) {
.ps-feedback-actions { flex-direction: column; }
.ps-feedback-action { width: 100%; }
}
@media (forced-colors: active) {
.ps-feedback-launcher:focus-visible,
.ps-feedback-textarea:focus-visible,
.ps-feedback-action:focus-visible {
outline-color: Highlight;
box-shadow: none;
}
}
</style>
<button class="ps-feedback-launcher" data-ps-role="launcher" data-ps-side="false" type="button" style="--ps-widget-bg:#14202d;--ps-widget-fg:#fffdf8;--ps-widget-radius:24px;">Feedback</button>
</template>
</div>
<script>
(() => {
var script=document.currentScript;
var host=script?script.previousElementSibling:null;
if(!host||!host.hasAttribute('data-priosmith-feedback-widget-host')||host.shadowRoot){return;}
var template=host.querySelector('template[data-priosmith-feedback-widget-template]');
if(!template){return;}
var root=host.attachShadow({mode:'open'});
root.appendChild(template.content.cloneNode(true));
template.remove();
var launcher=root.querySelector('[data-ps-role="launcher"]');
launcher.addEventListener('click',function(){window.location.href="mailto:feedback@yourcompany.com?subject=Product%20Feedback";});
})();
</script>Paste before the closing </body> tag.