Floating launcher
Keep the support form out of the page layout until someone needs it. The launcher pins a pill or circular bug button to a viewport corner and opens the form in an accessible popover modal.
Add a bug button
Add launcher beside your existing fields configuration. In popover mode the widget mounts itself to document.body, so you do not need an inline container.
<script src="https://issued.dev/widget/issued.js"></script>
<script>
Issued.init({
projectId: "your-project-id",
fields: {
subject: { visible: true, required: true },
description: { visible: true, required: true },
email: { visible: true, required: false }
},
launcher: {
enabled: true,
mode: "popover",
style: "bug",
position: "bottom-right",
icon: "bug",
label: "Report a problem",
modal: {
headerTitle: "How can we help?"
}
}
});
</script>You can also configure this visually in the project form builder: open the Display tab, choose Floating button, then copy the JavaScript embed.
Bug or pill
The bug style is a 56px circular, icon-only button. The pill style shows the icon and label together.
launcher: {
enabled: true,
mode: "popover",
style: "pill",
position: "bottom-right",
icon: "chat",
label: "Need help?"
}The labelis hidden visually in bug style, but it is still used as the button's accessible label.
Launcher options
| Property | Type | Default | Description |
|---|---|---|---|
| enabled | boolean | required | Set to true to render the floating launcher. Set to false for the normal inline form. |
| mode | 'popover' | 'inline' | 'popover' | Controls whether the launcher opens a modal or the form renders inline. |
| style | 'pill' | 'bug' | 'pill' | Use a labeled pill or a circular, icon-only button. |
| position | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'bottom-right' | Pins the launcher and modal to a viewport corner. |
| label | string | 'Help' | Visible on pill launchers. For bug launchers it remains the accessible button label. |
| icon | 'chat' | 'question' | 'bug' | false | 'chat' | Selects the launcher glyph. Use false for a text-only pill. |
| color | CSS color | theme primary | Launcher background color. |
| textColor | CSS color | theme contrast | Launcher icon and label color. |
| offset | { x?: number; y?: number } | { x: 24, y: 24 } | Horizontal and vertical viewport offsets in pixels. Each value can be 0–200. |
| zIndex | number | 2147483000 | Overrides the launcher stacking level. |
Modal options
Put these properties inside launcher.modal. The modal traps keyboard focus while open and restores focus to the launcher when it closes.
| Property | Type | Default | Description |
|---|---|---|---|
| width | number | 440 | Modal width in pixels, from 240–1200. It remains responsive on narrow screens. |
| maxHeight | CSS length | 'min(720px, 85vh)' | Maximum modal height before the body scrolls. |
| headerTitle | string | 'Support' | Heading displayed above the form. |
| closeOnBackdrop | boolean | true | Closes the modal when the user clicks outside it. |
| closeOnEsc | boolean | true | Closes the modal when the user presses Escape. |
launcher: {
enabled: true,
color: "#0f172a",
textColor: "#ffffff",
offset: { x: 32, y: 24 },
zIndex: 10000,
modal: {
width: 520,
maxHeight: "80vh",
headerTitle: "Contact support",
closeOnBackdrop: true,
closeOnEsc: true
}
}JavaScript embed only
- ▸The floating launcher is part of the hosted JavaScript widget. Iframe and plain HTML embeds always render inline.
- ▸Initialize the widget only once per page so it creates a single launcher and modal.
- ▸Your project's domain allowlist still applies to submissions opened through the launcher.
Start with the JavaScript guide for the full embed, or see styling and themes to match the form to your product.