Lesson: Customizing and Branding Your Noca AI Bot

Learn how to customize the look and feel of your Noca AI bot to match your company’s brand identity—including adding custom logos, configuring dimensions, and styling individual chat elements without writing CSS.

Prerequisites

Before starting this guide, ensure you have:

• Access to your Noca AI workspace.

• An existing Noca Bot created in your workspace.

• Image assets for your brand (e.g., company logo in .png or .svg format).

Step 1: Upload Your Brand Logo

1. Open your bot in the Noca AI editor.

2. In the right-hand panel, navigate to the Appearance tab.

3. Under Logo, click Upload Logo.

4. Select your logo file from your computer.

5. Once uploaded, verify that your logo appears at the top-left of the bot interface next to the bot’s name.

Step 2: Configure Bot Dimensions & Sizing

1. Under the Appearance tab, locate the Size section.

2. Expand Dimensions to set sizing rules:

   • Width / Height: Set default dimensions (e.g., standard width for embedded widgets).

   • Min W / Min H: Set minimum width and height limits.

   • Max W / Max H: Set maximum width and height limits.

3. (Optional Note) Custom dimensions are especially useful when embedding the bot directly onto your external website or portal.

Step 3: Select and Style Individual Elements

Every element in the chat interface can be customized directly on the visual canvas:

1. Hover over any chat element (e.g., AI message bubbles, user message bubbles, background container, input bar) and click on it.

2. Notice how the right panel automatically switches to the Styles tab for that specific component.

Step 4: Customize Message Bubbles & Backgrounds

1. AI Response Bubbles:

   • Click on an AI response message bubble in the canvas.

   • Under Styles > Background, click Configure Background.

   • Use the color picker or enter a hex code to set your brand’s primary color (e.g., magenta).

2. User Response Bubbles:

   • Click on a user message bubble.

   • Adjust the background color (e.g., neutral gray) under Styles > Background.

3. Page Background:

   • Click the outer canvas area surrounding the chat window (Page Container).

   • Select a background color or accent shade to complement your layout.

Step 5: Fine-Tune Text and UI Controls

1. Thinking / Status Text:

   • Click on status indicators like the “Implementing…” or thinking text.

   • Under Styles > Font, select custom text colors or typography settings.

2. Action Buttons & Borders:

   • Click on UI components like the voice/sound button or message input box.

   • Under Styles > Border, adjust Border Color, Width, and Corner Radius to round or sharpen button edges.

Step 6: Save and Preview

1. Click Save in the top header to preserve your custom theme.

2. Preview your bot across different screen sizes or test it live to ensure all colors, fonts, and borders meet your brand guidelines!