Embeddable Widget

Add a floating support button to any website. Visitors can submit tickets directly from your site without leaving the page.

Installation

Add a single script tag before the closing </body> tag of your website. Replace my-project-slug with your project's slug from the Helmdesk dashboard.

<script src="https://helmdesk.dev/widget.js" data-project="my-project-slug"></script>

That's it. The widget renders a floating button in the bottom-right corner of your page. Clicking it opens a ticket submission form.

Finding your project slug

Your project slug is visible in the URL when you open a project in the dashboard, and on the project settings page. It's the same slug used in your public support portal URL: helmdesk.dev/p/<slug>/support

Configuration

Customize the widget using data attributes on the script tag.

Attribute	Required	Default	Description
`data-project`	Yes	--	Your project slug
`data-position`	No	`bottom-right`	Button position: `bottom-right` or `bottom-left`
`data-color`	No	`#4f46e5`	Accent color (hex) for the button and form elements

Full example

A complete example with all options specified:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My App</title>
</head>
<body>
  <!-- Your page content -->

  <!-- Helmdesk support widget -->
  <script
    src="https://helmdesk.dev/widget.js"
    data-project="my-project-slug"
    data-position="bottom-right"
    data-color="#4f46e5"
  ></script>
</body>
</html>

How it works

The script renders a floating action button. Clicking it opens a compact ticket submission form.
The form collects the visitor's email, a subject line, and their message. Name is optional.
On submission, a ticket is created in your Helmdesk project. Your team receives the same notifications as any other ticket.
The widget includes built-in bot protection (honeypot field and submission timing) to reduce spam.
The script is fully self-contained (~5 KB). It has no external dependencies, no cookies, and no tracking.

Cross-origin support

The widget works on any domain. It automatically determines the API endpoint from its own script URL, and the Helmdesk API returns the appropriate CORS headers. No proxy or server-side setup is required on your end.

Styling notes

The widget injects its own scoped styles and does not affect your page's CSS. All styles are namespaced under a unique element ID to avoid conflicts. The widget panel uses a white background with subtle shadows to match most designs. Use the data-color attribute to match your brand's accent color.