> ## Documentation Index
> Fetch the complete documentation index at: https://chatbotx.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Configure Platform Branding for ChatbotX White Label

> Guide to configure Platform Branding in ChatbotX Portal: change brand name, light/dark logos, favicon, primary color, legal links, and advanced CSS/JS customization.

**Platform Branding** is where you customize the brand identity for ChatbotX White Label. These settings determine the brand name, logos, and primary theme colors that clients or internal teams see when logging into your portal.

It is highly recommended to complete your Platform Branding configuration before inviting clients to use the system. This ensures a consistent and professional brand experience from the very beginning.

<Frame>
  <img src="https://mintcdn.com/chatbotx/3pxT69n9VkN1Ni4g/images/chatbotx_whitelabel_platform_branding_overview.png?fit=max&auto=format&n=3pxT69n9VkN1Ni4g&q=85&s=f6d1323cf74d326628739daceee272b2" alt="Chatbotx Whitelabel Platform Branding Overview" width="2938" height="1781" data-path="images/chatbotx_whitelabel_platform_branding_overview.png" />
</Frame>

## Platform Branding Identity Structure

To configure your brand identity, log in to your **ChatbotX Portal**, open the **Platform** group on the left navigation menu, and select **Platform Branding**.

The settings are divided into the following main sections:

### Brand Identity

Configure the display name and primary colors for the entire portal:

* **Brand Name**: Your official brand name. This name appears in the browser page title, the sidebar, the login page, and within automated system emails.
* **Theme**: A list of primary color options. Selecting a theme color (such as Yellow, Blue, Green, etc.) automatically applies it to main action buttons, active tabs, and graphic highlights throughout the interface.

### Visual Assets

Upload the logo and icon files displayed on browser tabs and the portal interface:

* **Logo (Light)**: The brand logo displayed on light interface backgrounds (such as the default sidebar or the login page with a white background). Transparent PNG or SVG formats are highly recommended.
* **Logo (Dark)**: The brand logo displayed on dark interface backgrounds or when users enable Dark Mode.
* **Favicon**: The small icon displayed on browser tabs or shortcut bookmarks. The favicon should be a square image with a recommended resolution of 32x32 px or higher in PNG or ICO format.

### Legal Links

Add your own business legal links, which are displayed in the footer or during authentication flows:

* **Privacy Policy URL (optional)**: The URL pointing to your Privacy Policy page.
* **Terms of Service URL (optional)**: The URL pointing to your Terms of Service page.

> **Note:** These legal links are extremely important and mandatory if you configure custom login applications through Google, Meta, or TikTok. These platforms require your application to display clear privacy policies before approval.

### Advanced

Configure custom styling or tracking scripts directly into every page of the portal:

* **Custom CSS**: Enter custom CSS code to apply deeper design modifications (such as changing system fonts, hiding specific buttons, or adjusting block spacing).
* **Custom JS**: Enter JavaScript code to integrate third-party tools (such as Google Analytics, Facebook Pixel, or custom live chat widgets to support your clients).

## How to configure Platform Branding

Before you begin, prepare your brand name, logo files, a square favicon file, legal links, and custom CSS/JS snippets if applicable.

<Steps>
  <Step title="Open the Platform Branding page">
    Log in to your admin account on the **ChatbotX Portal**. In the left navigation menu, select **Platform > Platform Branding**.
  </Step>

  <Step title="Update Brand Identity">
    Under **Brand Identity**, enter your brand name in the **Brand Name** field. Select a primary theme color that matches your brand guidelines from the **Theme** color list.

    <Frame>
      <img src="https://mintcdn.com/chatbotx/3pxT69n9VkN1Ni4g/images/chatbotx_whitelabel_brand_identity_settings.png?fit=max&auto=format&n=3pxT69n9VkN1Ni4g&q=85&s=7720e6225cd7d7e71113d02f4fb043b8" alt="Chatbotx Whitelabel Brand Identity Settings" width="2311" height="531" data-path="images/chatbotx_whitelabel_brand_identity_settings.png" />
    </Frame>
  </Step>

  <Step title="Upload Visual Assets">
    Under **Visual Assets**, perform the following actions:

    * Click the **Logo (Light)** area to upload your light logo (or paste a direct image URL).
    * Click the **Logo (Dark)** area to upload your dark logo.
    * Click the **Favicon** area to upload your browser tab icon.

    <Frame>
      <img src="https://mintcdn.com/chatbotx/3pxT69n9VkN1Ni4g/images/chatbotx_whitelabel_visual_assets_upload.png?fit=max&auto=format&n=3pxT69n9VkN1Ni4g&q=85&s=6406a8970009e0c98d24060efb68f5ef" alt="Chatbotx Whitelabel Visual Assets Upload" width="2316" height="625" data-path="images/chatbotx_whitelabel_visual_assets_upload.png" />
    </Frame>
  </Step>

  <Step title="Configure Legal Links">
    Under **Legal Links**, enter your privacy policy URL in the **Privacy Policy URL** field and your terms of service URL in the **Terms of Service URL** field. Ensure both paths start with the secure `https://` format.

    <Frame>
      <img src="https://mintcdn.com/chatbotx/3pxT69n9VkN1Ni4g/images/chatbotx_whitelabel_legal_links_setup.png?fit=max&auto=format&n=3pxT69n9VkN1Ni4g&q=85&s=c59e3f814e5f51ce802d5f814006a09c" alt="Chatbotx Whitelabel Legal Links Setup" width="2318" height="339" data-path="images/chatbotx_whitelabel_legal_links_setup.png" />
    </Frame>
  </Step>

  <Step title="Configure Advanced Settings (optional)">
    To embed custom code, navigate to the **Advanced** section:

    * Select the **Custom CSS** tab and enter your CSS overrides.
    * Select the **Custom JS** tab and paste your third-party tracking or chat support scripts.

    <Frame>
      <img src="https://mintcdn.com/chatbotx/mzRopt4sKp8iahLB/images/chatbotx_whitelabel_platform_branding_advanced.png?fit=max&auto=format&n=mzRopt4sKp8iahLB&q=85&s=ad6e85912097d1e2cc5fee29bc14ad14" alt="Chatbotx Whitelabel Platform Branding Advanced" width="2313" height="831" data-path="images/chatbotx_whitelabel_platform_branding_advanced.png" />
    </Frame>
  </Step>

  <Step title="Save changes and verify">
    Scroll to the bottom of the page and click the **Save** button to apply all brand updates.
  </Step>
</Steps>

## Troubleshooting display issues

If you do not see your logo or favicon updates immediately after saving, follow these verification steps:

<Note>
  Web browsers cache favicons and logos aggressively. Press **Ctrl + F5** (on Windows) or **Cmd + Shift + R** (on Mac) to reload the page while bypassing the cache. You can also open the portal in an incognito window to verify the display.
</Note>

<Warning>
  Avoid changing your brand name and theme color frequently once your portal is in operation. Sudden interface changes can confuse your clients and reduce trust in your portal.
</Warning>