Help Center

The Userorbit widget is the in-app panel that your users interact with. It can display announcements, feedback forms, tours, checklists, and more. This guide covers choosing which modules to show, positioning the widget, customizing its appearance, and testing it in your app.

Access widget settings

1. Log in to your Userorbit workspace and select your project.
2. Go to Settings in the left sidebar.
3. Click Widget.

Choose which modules to display

The widget can show multiple modules in a tabbed or sectioned layout. On the widget settings page, you will see a list of available modules:

• Announcements — A feed of your product updates. Users can scroll through and read past announcements.
• Feedback — A form where users can submit feature requests or bug reports directly from within your app.
• Help Center — A searchable collection of your help articles. Users can find answers without leaving your product.
• Roadmap — A compact view of your public roadmap showing planned and in-progress items.

Toggle each module on or off depending on what you want to surface. You can also drag modules to reorder them — the first module in the list becomes the default view when a user opens the widget.

Set the widget position

Choose where the widget launcher button appears on your site:

• Bottom-right — The most common position. Works well for most layouts.
• Bottom-left — Use this if the bottom-right corner is occupied by a chat widget or other element.

You can also adjust the offset (distance from the edge of the screen) to fine-tune placement. If you prefer to trigger the widget from your own custom button instead of the default launcher, you can hide the launcher entirely and use the JavaScript API to open the widget programmatically.

Customize branding

Make the widget feel like a native part of your app:

• Primary color — Set the accent color used for the launcher button, links, and interactive elements. Use your brand color for a cohesive look.
• Background — Choose between a light or dark theme for the widget panel.
• Launcher icon — Pick from a set of icons or upload a custom one. Common choices include a megaphone (for announcements-focused widgets), a question mark (for help-focused widgets), or your logo.
• Greeting text — Set the header text that appears at the top of the widget when opened. Something like "What's new" or "How can we help?" works well.

Configure the launcher badge

The launcher badge shows a count of unread items to draw attention:

• Enable or disable the badge in widget settings.
• Choose which modules contribute to the unread count — typically announcements.
• The badge automatically clears when a user opens the widget and views the items.

Test the widget

Before going live, verify that everything works:

1. Make sure the Userorbit script is installed on your site.
2. Open your site in a browser and look for the launcher button.
3. Click it and verify that the correct modules appear, the branding looks right, and the content loads.
4. Test on multiple screen sizes — the widget should be responsive and usable on both desktop and mobile.
5. If you are using the identify method to track users, verify that the widget recognizes you by checking your contact record in the Userorbit dashboard.

Advanced: Custom launcher

If you want to trigger the widget from your own UI element instead of the default floating button:

1. In widget settings, disable the Show Launcher option.
2. In your application code, call window.userorbit.open() when the user clicks your custom element.
3. Use window.userorbit.close() to close it programmatically.

This gives you full control over when and how the widget appears, making it feel seamlessly integrated into your product's navigation.