Feedback Widget Customization

The widget adapts visually to your application through configuration options. You can change colors, labels, position, and responsive behavior.

Full configuration options

Option	Type	Default	Description
publicKey	string	-- (required)	Your project's public key
position	string	'bottom-right'	Button position: 'bottom-right', 'bottom-left', 'top-right', 'top-left'
theme	string	'auto'	Visual theme: 'light', 'dark', 'auto'
accentColor	string	'#6366f1'	Primary widget color (button, borders, links)
labels	object	See below	Customizable widget labels
labels.title	string	'Send feedback'	Form title
labels.placeholder	string	'Describe your idea or issue...'	Text field placeholder
labels.submitButton	string	'Submit'	Submit button text
labels.successMessage	string	'Thanks for your feedback'	Message after successful submission
labels.triggerButton	string	'Feedback'	Floating button text
showTriggerLabel	boolean	true	Show text next to the floating button icon
zIndex	number	9999	CSS z-index of the widget
metadata	object	{}	Additional data sent with each feedback (user, page, etc.)

Visual customization

Accent color

The accentColor defines the primary color of the widget. It is applied to the floating button, focus borders, and the submit button.

<script>
  FeedbackWidget.init({
    publicKey: 'pk_your_public_key',
    accentColor: '#e11d48',
  });
</script>

In React:

<FeedbackWidget
  publicKey="pk_your_public_key"
  accentColor="#e11d48"
/>

Custom labels

Customize all widget labels to match your brand or language:

<script>
  FeedbackWidget.init({
    publicKey: 'pk_your_public_key',
    labels: {
      title: 'Tell us what you think',
      placeholder: 'Write your suggestion here...',
      submitButton: 'Send suggestion',
      successMessage: 'Received. Thanks for helping us improve.',
      triggerButton: 'Suggestions',
    },
  });
</script>

In React:

<FeedbackWidget
  publicKey="pk_your_public_key"
  labels={{
    title: 'Tell us what you think',
    placeholder: 'Write your suggestion here...',
    submitButton: 'Send suggestion',
    successMessage: 'Received. Thanks for helping us improve.',
    triggerButton: 'Suggestions',
  }}
/>

Floating button

Control the appearance and position of the button that triggers the widget:

<script>
  FeedbackWidget.init({
    publicKey: 'pk_your_public_key',
    position: 'bottom-left',
    showTriggerLabel: false,    // Only shows the icon, no text
  });
</script>

Available positions:

Value	Description
'bottom-right'	Bottom-right corner (default)
'bottom-left'	Bottom-left corner
'top-right'	Top-right corner
'top-left'	Top-left corner

z-index

If the widget is hidden behind other elements in your interface, adjust the zIndex:

<script>
  FeedbackWidget.init({
    publicKey: 'pk_your_public_key',
    zIndex: 50000,
  });
</script>

Custom metadata

You can send additional data with each feedback to facilitate triage. Metadata is attached to the idea item in Almirant.

<script>
  FeedbackWidget.init({
    publicKey: 'pk_your_public_key',
    metadata: {
      userId: '12345',
      plan: 'enterprise',
      page: window.location.pathname,
    },
  });
</script>

In React, you can pass dynamic metadata:

function App() {
  const { user } = useAuth();

  return (
    <FeedbackWidget
      publicKey="pk_your_public_key"
      metadata={{
        userId: user?.id,
        email: user?.email,
        plan: user?.plan,
        page: window.location.pathname,
      }}
    />
  );
}

Tip

Include at least the userId and the current page in the metadata. This allows you to associate feedback with specific users and know which part of the application they sent it from.

Responsive behavior

The widget automatically adapts to different screen sizes:

Screen	Behavior
Desktop (> 768px)	The form opens as a popover next to the floating button
Tablet (481px - 768px)	The form opens centered with a semi-transparent overlay
Mobile (< 480px)	The form takes the full width as a bottom sheet

The floating button maintains its position across all resolutions. On mobile, showTriggerLabel is automatically disabled to save space.

Note

You do not need to do anything for the widget to be responsive. It adapts automatically based on the device viewport.

Dark mode

With theme: 'auto', the widget detects the operating system preference (prefers-color-scheme) and adapts accordingly.

If your application has its own theme toggle, you can control it directly:

function App() {
  const { theme } = useTheme(); // your theme hook

  return (
    <FeedbackWidget
      publicKey="pk_your_public_key"
      theme={theme} // 'light' or 'dark'
    />
  );
}

Full example

<script src="https://cdn.almirant.ai/feedback-widget.iife.js"></script>
<script>
  FeedbackWidget.init({
    publicKey: 'pk_your_public_key',
    position: 'bottom-right',
    theme: 'auto',
    accentColor: '#2563eb',
    showTriggerLabel: true,
    zIndex: 9999,
    labels: {
      title: 'Your opinion matters',
      placeholder: 'What can we improve?',
      submitButton: 'Submit',
      successMessage: 'Thank you. Your feedback has been recorded.',
      triggerButton: 'Feedback',
    },
    metadata: {
      page: window.location.pathname,
      userAgent: navigator.userAgent,
    },
  });
</script>