Customization

Make PanWidget feel like a native part of your application.

Branding

You can configure your brand settings globally in the Project Settings page. These settings apply to all widgets automatically.

  • Brand Logo: Used in headers and chat bubbles.
  • Primary Color: Used for buttons, accents, and highlights.

Widget Positioning

You can control where each widget appears on your screen to avoid clutter. Go to Settings → Widgets to configure this.

Floating Mode (Default)

The widget appears as a floating button in one of the corners (e.g., Bottom Right).

Manual Mode

The widget is hidden by default. You trigger it programmatically using JavaScript.

Advanced Attributes

You can override your dashboard settings by adding data attributes to the script tag:

<script 
  src="..." 
  data-project-id="..."
  data-type="feedback"
  data-mode="manual"
  data-position="bottom-left"
></script>
  • data-mode: floating (default) or manual.
  • data-position: bottom-right, bottom-left, top-right, or top-left.

Programmatic Control

If you use Manual Mode, you can control the widgets using the global PanWidget object.

// Open the Review widget
window.PanWidget.open('review');

// Open the Feedback widget
window.PanWidget.open('feedback');

// Close any open widget
window.PanWidget.close();