Skip to content
Pitaj.io

Appearance and Branding

Your AI agent’s visual identity should blend seamlessly into your existing website experience. The Pitaj.io Designer empowers you to fine-tune every visual dimension of the widget without writing code.

Core Visual Customizations

  1. Navigate to Designer
    From your agent’s dashboard menu, click Designer → Appearance.

  2. Select Primary Brand Color
    Enter your company HEX color code (e.g. #2563EB) or use the built-in color picker. This color applies to:

    • Chat window header background
    • User message bubble backgrounds
    • Action triggers, CTA buttons, and input send icons
    • Floating circular launcher button

  3. Theme Mode
    Determine how the widget presents to visitors:

    • System Sync: Automatically matches the visitor’s operating system preferences (Light or Dark).
    • Always Light: Crisp white backdrop (#ffffff) with high-contrast text.
    • Always Dark: Deep obsidian slate backdrop with calibrated neutral grays.

  4. Corner Radius
    Match the geometry of your website’s buttons: Sharp (0px), Standard Rounded (12px), or Full Pill (24px).

Screen Placement & Offsets

Screen Position

Position the floating launcher in the Bottom Right (industry standard) or Bottom Left (ideal if you already have a sticky back-to-top button or phone dialer on the right).

Margin Offsets

Define custom pixel offsets from the screen edge (bottom-offset and side-offset) to avoid collisions with sticky cookie consent banners or fixed bottom bars.

Mobile Optimization

The Pitaj.io widget is engineered from the ground up for mobile responsiveness:

  • Responsive Fullscreen Modal: On mobile displays, the chat transitions into a clean full-screen viewport with a prominent top-dismiss control.
  • Keyboard Viewport Handling: Smoothly adapts to virtual keyboards without broken scroll jumps or clipping responses.