Welcome, BotSailor reseller! This in-depth documentation is your comprehensive guide to mastering the CSS customization feature, a powerful tool designed to transform the BotSailor platform into your own unique brand. As a reseller, a strong brand identity is your most valuable asset. By leveraging custom CSS, you can go beyond just adding your logo—you can create a cohesive, professional, and visually appealing experience that your clients will trust. This guide will provide detailed steps, practical tips, and specific code examples to help you fully rebrand the platform's visual identity.
What is CSS Customization in BotSailor? The CSS (Cascading Style Sheets) customization feature is a built-in function in the BotSailor reseller panel that allows you to inject your own styling rules. This means you can override the default colors, fonts, layouts, and other visual elements without touching the core application code. This feature is a cornerstone of the white-labeling process, enabling you to deliver a professional SaaS solution that is completely your own.
Why is CSS Customization So Important for Resellers?
Establish a Strong Brand Identity: A consistently branded platform reinforces your company's professionalism and makes your service instantly recognizable. This is crucial for building brand loyalty and trust with your clients.
Enhance User Experience: A well-designed, custom interface can make the platform more intuitive and pleasant to use. By aligning the look and feel with your brand's aesthetic, you create a seamless and enjoyable journey for your users.
Stand Out from the Competition: In the competitive SaaS market, a generic interface can be a major disadvantage. Custom CSS allows you to differentiate your offering, showcasing a unique and polished product that sets you apart from other resellers.
Provide a True White-Label Solution: The goal of a reseller is to make the product feel like it was developed in-house. CSS customization is a primary way to achieve this, giving your clients the impression that they are using your proprietary software, not a third-party platform.
To begin, log in to your BotSailor reseller dashboard. In the left-hand sidebar, navigate to the Control Panel section and click on Settings & Integration. From the sub-menu that appears, select the Style option. This will open the CSS customization interface.
The CSS editor is segmented into different sections to give you granular control over various parts of the platform. On the right side of the editor, you will see buttons to switch between these areas:
Dashboard: This is the main user interface where your clients build and manage their bots. Customizing this area ensures a branded experience for day-to-day use.
Landing: This section controls the public-facing landing page of your white-label domain. It is your first impression for potential customers.
Sign In: This area applies CSS to the login and registration pages. A branded login screen provides a professional entry point for users.
Shared Inbox: This new option allows you to customize the look of the shared inbox, where live chat conversations are managed.
Each section comes with a "Sample CSS" button. Clicking this button will populate the editor with a pre-written CSS template. This is your starting point. The sample code includes comments that explain what each rule does, making it easy to understand and modify.
This section allows you to style the main control center of the BotSailor application that your clients use daily. A branded dashboard reinforces your professional image and makes the platform feel like a bespoke product.
What to Customize:
Background: Change the background color, gradient, or image of the dashboard area.
Sidebar Navigation: Adjust the colors of the menu, icons, and text in the left-hand sidebar.
Card and Widget Styles: Modify the appearance of the data cards and widgets on the dashboard, including their backgrounds, borders, and text colors.
Header: Style the top header bar, including the logo area and user profile icons.
Example CSS Code:
/* Dashboard Customization */
/* Change the background of the main content area */
body {
background-color: #f5f5f5;
}
/* Style the main content wrapper */
.main {
background: #ffffff; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #ffffff, #fefefe);
background: linear-gradient(to right, #ffffff, #fefefe);
}
/* Customize the sidebar */
.sidebar-wrapper {
background-color: #0d1a26;
}
/* Apply changes to the navigation links */
.nav-link {
color: #c0c0c0;
}
After You Apply: After pasting your code and clicking 'Save', the changes will immediately reflect on the user's dashboard. Your clients will see your custom color scheme and design every time they log in, creating a seamless branded experience.
The landing page is often the first interaction a potential customer has with your service. Customizing its CSS ensures that this first impression is professional and aligned with your brand.
What to Customize:
Primary Colors: Set your brand's primary color for buttons, links, and key highlights.
Navbar and Header: Style the navigation bar, including its background and links.
Section Backgrounds: Change the background colors or gradients of different sections on the landing page (e.g., hero section, features section).
Text and Typography: Modify font families, sizes, and colors for headlines and body text.
Example CSS Code:
/* Landing Page Customization */
/* Define the theme's primary color */
:root {
--primary-color: #ff6b6b;
}
/* Style the main header section */
#ad-header {
background-color: #2c3e50;
border-bottom: 2px solid var(--primary-color);
}
/* Change the background of the features section */
#ad-about-wrapper {
background-color: #f9f9f9 !important;
}
/* Customize the call-to-action button */
.ad-btn {
background-color: var(--primary-color);
color: #ffffff;
border: none;
}
After You Apply: The new styles will be live on your landing page as soon as you save. Prospective clients will see a perfectly branded page that reflects the professionalism of your service.
This is the gateway to your platform. A customized login page adds a layer of professionalism and trust from the very first moment a user attempts to log in or register.
What to Customize:
Background: Apply a solid color, gradient, or background image to the entire sign-in page.
Login Card/Box: Style the container where the login form is located. This includes its background, border, and shadows.
Buttons: Change the colors of the login and registration buttons, including their hover effects.
Input Fields: Modify the appearance of the email and password input fields.
Example CSS Code:
/* Sign In Page Customization */
/* Change the background of the auth section */
#auth {
background: #607991; /* fallback for old browsers */
background: linear-gradient(to right, #6e64ff, #607991);
}
/* Style the login card container */
#auth-card {
background-color: rgba(255, 255, 255, 0.9);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
/* Customize the login button */
.btn-primary {
background-color: #6002db !important;
color: #ffffff !important;
}
/* Add a hover effect to the login button */
.btn-primary:hover {
background-color: #4a00af !important;
}
After You Apply: The new login page will greet your users with your branded look, immediately establishing a professional and trustworthy relationship.
The shared inbox is where your clients handle live conversations. Customizing this area ensures a consistent experience during critical customer interactions.
What to Customize:
Inbox Background: Change the main background color of the chat area.
Message Bubbles: Style the message bubbles for both the user and the bot.
Chat List: Adjust the appearance of the contact list in the sidebar.
Theme Colors: This section uses CSS variables (prefixed with --) to easily manage colors for different components, including dark mode support.
Example CSS Code:
/* Shared Inbox Customization */
/* Root variables for theming */
:root {
--inbox-bg: #f0f2f5;
--subscriber-list-bg: #e0e6ed;
--message-bubble-bg-self: #dcf8c6;
--message-bubble-bg-other: #ffffff;
}
/* Apply changes to the main inbox body */
.inbox-body-bg {
background-color: var(--inbox-bg);
}
/* Style the subscriber list */
.subscriber-list-bg {
background-color: var(--subscriber-list-bg);
}
/* Customize the message bubble for the user */
.msg-out-bg {
background-color: var(--message-bubble-bg-self);
}
After You Apply: Your changes will be visible in the shared inbox, providing a seamless and branded experience for your clients as they manage live conversations.
For more advanced customization, you'll need to identify the specific elements you want to style.
Use Browser Developer Tools: On your live platform, right-click the element you want to change (e.g., a button, a heading) and select "Inspect" (or a similar option). This will open your browser's developer tools, showing you the HTML and the applied CSS.
Identify Selectors: Look for CSS classes (prefixed with .) and IDs (prefixed with #) associated with that element. Use these specific selectors in your custom CSS code to apply styles precisely. For instance, to change the background of the dashboard wrapper, you might use .dashboard-wrapper { background-color: #f5f5f5; }.
Start Simple: Begin by changing colors and fonts before tackling more complex layouts.
Test on a Separate File: Write your CSS in a separate code editor and test it in a live browser to ensure it works correctly before pasting it into the BotSailor editor.
Use Comments: Add comments (/* This is a comment */) to your code to explain what each section does. This is helpful for future edits and for other team members.
Avoid !important: Overusing !important can make your code messy and difficult to manage. Use specific selectors to override existing styles instead.
Q: Can I upload a background image for the login page?
A: Yes. In the "Sign In" CSS editor, you can use the background-image property along with background-size and background-repeat to add a background image.
Q: Where can I find the hex codes for my brand colors?
A: You can use online tools like a color picker or a color palette generator. Many graphic design tools also provide the hex codes for colors.
Q: Will my CSS changes be lost when BotSailor updates?
A: No. The CSS customization feature stores your code separately, so it will not be overwritten by system updates.
Q: Can I change the font style?
A: Yes, you can use the font-family property in your CSS to change the font. For custom fonts, you might need to use @import to link to a web font service like Google Fonts.
Q: What if I make a mistake and the page looks broken?
A: The best part is that you can simply delete the code you added and click save. The page will revert to its default appearance. You can then start over with a fresh slate.