Customize your widget appearance
The Userorbit widget is the primary touchpoint between your product and your customers. Customizing its theme ensures it feels like a natural extension of your application rather than a third-party add-on. This guide walks you through every step of the process.
Step 1: Open Design settings
Navigate to Settings → Design in your Userorbit dashboard. You will see a live preview of your widget on the right side of the screen, which updates in real time as you make changes.
Step 2: Choose your base theme
Select either Light or Dark as your starting point. This sets the foundational background and text colors for the entire widget. You can fine-tune individual colors afterward, but starting with the right base saves time.
Step 3: Set your primary color
Your primary color is the most prominent brand element in the widget. It controls:
- Button backgrounds and hover states
- Active navigation indicators
- Links and interactive elements
- Focus rings and selection highlights
Click the color swatch next to Primary Color and enter your brand hex code, or use the color picker to choose visually. The preview updates immediately so you can evaluate the result.
Step 4: Configure background and surface colors
The Background color controls the main canvas of the widget. The Surface color is used for cards, panels, and elevated elements that sit on top of the background. Keeping a subtle contrast between these two creates visual depth.
Step 5: Adjust text and border colors
Set your Text color for primary body content and your Muted Text color for secondary information like timestamps and helper text. The Border color controls dividers and input field outlines. Ensure sufficient contrast between text and background colors for accessibility.
Step 6: Customize fonts
Under the Typography section, select a font family for the widget. You can choose from a curated list of web-safe and Google Fonts options. Adjust heading sizes and body text sizes to match your application typography.
Step 7: Adjust shape and spacing
The Border Radius slider controls how rounded corners appear across the widget — from sharp rectangles at 0px to fully rounded at higher values. Match this to your application design language for a cohesive feel.
Step 8: Preview and save
Review your changes in the live preview. Toggle between different widget views — announcements, feedback form, and roadmap — to verify your theme looks good across all sections. When you are satisfied, click Save.
Tips for a polished result
- Match your widget primary color to your application primary action color for visual continuity.
- Test the widget embedded in your actual application, not just in the dashboard preview, since surrounding page styles can affect perceived contrast.
- If your application uses a dark theme, consider enabling dark mode for the widget to match.