Editing your widget to perfectly reflect your brand’s aesthetics and functionality is simple and intuitive. Just follow these steps to ensure it aligns seamlessly with your design and goals.
Step 1: Access the Widget Editor
Go to the App Dashboard.
From the left-hand side menu, click on Branding.
In the Theme card, click Setup. This will open the widget customization page.
Step 2: Customize Your Widget
The widget editor provides various options to personalize the look and feel of your widget. Below is a breakdown of the available settings:
1. Theme Colors
Style: Choose between Dark or Light themes.
Primary Color: Select your primary brand color (e.g., #000000).
Secondary Color: Choose a complementary secondary color (e.g., #ffffff).
2. Banner
Color: Set the banner's primary color.
Font: Customize the font color for the banner (e.g., White).
3. Buttons
Color: Define the primary color for buttons.
Font: Set the font color for buttons (e.g., White).
4. Links
Font: Choose the font color for links (e.g., Black).
5. Launcher
Color: Set the launcher's primary color.
Font: Define the font color (e.g., White).
Shapes: Customize the shape of the launcher (e.g., Rounded).
6. Panel
Container Shape: Choose a shape for the panel container (e.g., Rounded).
Buttons, Cards, and Inputs: Select the shape for these elements (e.g., Rounded).
7. Placement and Positioning
Desktop Placement: Position the launcher on the desktop (e.g., Right).
Mobile Placement: Adjust the launcher position for mobile devices (e.g., Right).
Spacing: Fine-tune the widget’s position relative to the window:
Side Spacing: Set the spacing from the side (e.g., 20px).
Bottom Spacing: Adjust the spacing from the bottom (e.g., 20px).
8. Visibility
Launcher Visibility: Control where the launcher appears:
Desktop and Mobile
Desktop Only
None (to hide the launcher).
Page Visibility: Choose whether to hide the launcher on specific pages (e.g., Homepage).
Branding Visibility: Decide whether to show or hide the watermark (“We reward with Casa”).
Step 3: Save Your Changes
After making the necessary adjustments, click Save to apply your customizations.