Widget Configuration

Customize how the widget looks and behaves from your dashboard — no code required. For advanced control, use the JavaScript API and element triggers below.

Appearance Settings

All visual customization is done in Dashboard → Integrate → Appearance. These settings apply to your widget across every page it appears on.

Accent Color

Your brand color, used for the widget button and interactive highlights. Click the color swatch to pick any color, or type a hex code directly.

Widget Position

Choose whether the feedback button sits in the bottom-right (default) or bottom-left corner of your page.

Brand Identity

Choose between Personal (your name and photo) or Company (company name and logo). This appears in the widget header when visitors open the feedback panel, giving your widget a professional, branded feel.

Button Icon

Pick the default Voiseback logo icon, or set a custom emoji as your widget button. The button icon is what visitors see before they interact with the widget.

Welcome Message

A short greeting visitors see when they open the widget (e.g., "We'd love to hear from you!"). Keep it friendly and concise.

Bubble Message

The floating notification that draws attention to your widget. Customize the text, emoji, colors, and whether visitors can dismiss it. These are project-level defaults — you can override bubble settings per-prompt in the prompt editor. See Creating Prompts for per-prompt overrides.

Email Collection

When enabled, visitors are asked for their email address after submitting feedback. This lets you follow up on responses when needed.

JavaScript API

The widget exposes a JavaScript API on the window.Voiseback object, giving you programmatic control over the widget. This is useful for triggering the widget from custom buttons, links, or events in your application.

Showing the Widget

window.Voiseback.show()

Opens the feedback panel programmatically. Use this to trigger the widget from a custom button instead of (or in addition to) the floating bubble.

Hiding the Widget

window.Voiseback.hide()

Hides the feedback panel if it is currently open.

Showing a Specific Prompt

window.Voiseback.show('your-prompt-id')

Pass a prompt ID to show() to open the widget with a specific prompt, regardless of the current page's trigger patterns.

Destroying the Widget

window.Voiseback.destroy()

Removes the widget from the DOM entirely. Use this if you need to clean up the widget on SPA route changes where it should not appear.

Example: Custom Feedback Button

You can hide the default bubble and use your own button to trigger the widget:

<button onclick="window.Voiseback.show()">
  Share your feedback
</button>

if (window.Voiseback) {
  window.Voiseback.show()
}

Element Triggers

For a no-code alternative to the JavaScript API, add the data-voiseback-trigger attribute to any HTML element to make it open the widget on click.

Default Prompt

<button data-voiseback-trigger>Give us feedback</button>

Clicking this element opens the widget with the prompt that matches the current page's URL, just as if the user had clicked the floating bubble.

Specific Prompt

<button data-voiseback-trigger="your-prompt-id">
  How was checkout?
</button>

Pass a prompt ID as the attribute value to open a specific prompt regardless of the current page's trigger patterns.

Custom Trigger Only

By default, the widget shows a floating button on every page where a prompt is active. If you want to hide the floating button and only open the widget from your own buttons or links, enable Custom Trigger Only on that prompt.

Go to Dashboard → Prompts, open the prompt you want to configure, and toggle on Custom Trigger Only. When enabled, the floating button will not appear on pages where that prompt is active. Visitors can only open the widget through your element triggers or the JavaScript API.

When to Use This

• You have your own "Feedback" button in your site's header or navigation and don't want the Voiseback floating button on screen.
• You want the floating button on some pages (e.g., /pricing) but not on others (e.g., /dashboard). Since the setting is per-prompt, each prompt can have its own trigger behavior.

How It Works

Pair this setting with element triggers or the JavaScript API to open the widget:

<!-- Your own button triggers the widget -->
<button data-voiseback-trigger="your-prompt-id">
  Give Feedback
</button>

When the visitor clicks your button, the widget panel slides open. When they close it, nothing remains on the screen — a clean, non-intrusive experience.

Content Security Policy (CSP)

If your site uses a Content Security Policy, add the following directives to allow the widget to load and function correctly:

script-src 'self' https://voiseback.com;
connect-src 'self' https://voiseback.com https://<your-storage-domain>;
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
font-src 'self' https://fonts.gstatic.com;

The additional connect-src entry is required because audio uploads are sent to a separate storage endpoint. Check your browser console for the exact domain if needed, or contact support.

Input Limits and Browser Support

Voice Input

• Maximum file size: 5 MB
• Supported formats: WebM, MP4, OGG
• Requires HTTPS (except localhost for development)
• Requires the MediaRecorder API — supported in Chrome, Firefox, Safari 14.1+, and Edge

Text Input

• Maximum length: 5,000 characters
• Works in all modern browsers, no special requirements

Rate Limits

Rate limits are applied per IP address on widget endpoints to prevent abuse. Normal website usage will never encounter these limits. If a visitor does exceed the limit, the widget handles it gracefully with a friendly "Please wait a moment" message. No configuration is needed on your end.

Performance

The widget script is lightweight and loads asynchronously, so it does not block your page's rendering or affect Core Web Vitals. On load it makes a single API call to fetch the active prompt for the current page — no additional requests are made until the visitor interacts with the widget.

Next Steps

• Creating Prompts — set up the questions your widget will display.
• Security & Data Privacy — learn more about domain restrictions and data protection.