As a BotSailor Reseller, you have the unique opportunity to fully brand your platform, offering a seamless and personalized experience to your clients. One of the most powerful ways to achieve this is by customizing the look and feel of your BotSailor dashboard and landing pages using custom CSS. This documentation will guide you through the process, helping you create a distinct and professional brand identity that resonates with your users.
Custom CSS (Cascading Style Sheets) styling in BotSailor Reseller allows you to inject your own styling rules directly into the platform's user interface. This means you can change colors, fonts, layouts, and virtually any visual aspect of the dashboard and landing pages without needing to modify the core code. For resellers, this translates to unparalleled branding opportunities, enabling you to tailor the platform's appearance to match your company's aesthetic.
Customizing your CSS as a BotSailor Reseller offers several significant advantages:
Stronger Brand Identity: Differentiate your reseller platform from competitors by aligning the design with your unique brand guidelines. This reinforces your brand image and makes your service instantly recognizable.
Enhanced User Experience: A well-designed, branded interface can improve user perception and make the platform feel more professional and trustworthy.
Professionalism and Credibility: Presenting a polished, branded platform instills confidence in your clients, showcasing your commitment to a high-quality service.
Client Confidence: When your clients see a consistently branded environment, it fosters a sense of security and trust in the services you provide.
White-Label Solution: Effectively transform BotSailor into your own white-label solution, making it appear as if the entire platform is your proprietary software.
Follow these simple steps to implement your custom CSS:
Navigate to Settings & Integration: From your BotSailor dashboard, go to the left sidebar menu. Scroll down and click on "Settings & Integration."
Access Style Settings: Within the "Settings & Integration" section, locate and click on "Style." This option is specifically designed for customizing CSS.
Enter Your Custom CSS: You will be presented with a text area labeled "Customize your own css." This is where you will paste your CSS code.
Dashboard Customization: The primary area is for styling the main BotSailor dashboard.
Sample CSS: Click on "SAMPLE CSS" to see examples of CSS code for different sections like Dashboard, Sign In, and Landing pages. This can be a great starting point.
Apply and Save: After entering your CSS, ensure you save your changes. A "Successful" message will confirm that your settings have been applied.
For Landing Page Customization, It Should look like this:
And this is what looks like in Sign-in page
For a detailed comprehensive guide, please follow this guide:
3 Essential CSS Customization for White Label Chatbot Reseller Partner Website
Start Small: Begin with minor changes like altering background colors or font styles before attempting complex layouts.
Use Browser Developer Tools: Utilize your browser's inspect element tool (usually by right-clicking on an element and selecting "Inspect") to identify CSS classes and IDs. This is crucial for targeting specific elements accurately.
Test Thoroughly: Always test your CSS changes across different browsers and devices to ensure a consistent and appealing appearance.
Keep a Backup: Before making significant changes, save a copy of your existing CSS or any default CSS provided, so you can revert if needed.
Prioritize Performance: While customizing, be mindful of CSS file size. Keep your code clean and efficient to ensure fast loading times.
Leverage Sample CSS: The "SAMPLE CSS" provided within BotSailor can offer valuable insights and starting points for your customizations.
Q: Can I change the entire layout of the BotSailor dashboard?
A: While you can make significant visual changes, complete layout overhauls might be limited by the underlying HTML structure.
Q: What if my custom CSS breaks something?
A: You can always remove your custom CSS or revert to a previous version. It's recommended to test changes in a controlled environment if possible.
Q: Do I need to know advanced CSS to use this feature?
A: Basic CSS knowledge is helpful, but you can start with simple changes and gradually learn more complex techniques. Online resources and the provided sample CSS can assist you.
Q: Will my custom CSS affect all my clients' dashboards?
A: Yes, the CSS you apply in the Reseller settings will affect the dashboard and landing pages for all users under your reseller account.
Q: Where can I find the specific CSS classes or IDs to target?
A: Use your web browser's developer tools (right-click and "Inspect") to examine the HTML and identify the relevant classes and IDs.