Chat widget Customization

AssistLore gives you full control over how your chat widget looks and behaves. Every visual element can be adjusted to match your brand style, ensuring your AI Agent blends seamlessly into your website. Below is a breakdown of each customization option and how they influence the final interface.

widget Size

The widget Size controls let you decide how large or small the chat widget should appear on your site's Instead of forcing a fixed layout, we give you a few practical size options so the widget fits wherever you place it whether that’s in a sidebar, on a landing page, or across a full-height section.

For the width, you can select:

  • Small (350px) ideal for narrow columns or minimal layouts
  • Medium (450px) a balanced size swidgettable for most pages
  • Large (600px) perfect for spacious layouts or desktop-first designs

For the height, you can select:

  • Short (350px) compact view with limited vertical space
  • Medium (500px) a comfortable default height
  • Tall (635px) nearly full-screen height for immersive conversations

Corner style:

  • Square clean, sharp edges
  • Rounded modern, smooth curvature

These options aren’t complicated they’re simply there to help you match the widget to your site’s layout and design style without needing any custom code.

Widget logo

The Chat Widget Logo settings let you add a bit of personality to your assistant. You can either upload your own brand logo or simply pick from the preset logo options we provide. When you upload an image, the system opens a crop window so you can adjust the framing before saving it no extra tools needed.

You'll also find Widget Tags, which are small text labels that appear inside the chat window to introduce your AI agent. Tags can be simple greetings or qwidgetck prompts such as "Hey there, how can I help today?" You can turn these tags on or off anytime, and you can add your own custom lines if you want something more personal.

This section is designed to help you shape how your chat widget feels the moment someone opens it — whether that's with your brand logo, a friendly message, or both.

Icons

The Icons settings let you control the small visual elements that gwidgetde you through your chat widget. From here, you can choose the style of the "New Chat" icon, the close icon, and the down-arrow icon that appears in the header. Each icon style has its own look, so you can match the feel of your brand or interface.

You can also set a custom icon color, giving you full freedom to align the widget with your website's theme. Whether you prefer a clean minimal arrow, a classic dropdown style, or a modern chat icon, you can switch between options with a single click.

This section helps you fine-tune the overall interaction experience by choosing icons that look good, feel intwidgettive, and keep your chat interface visually consistent with the rest of your design.

Text

The Text Style settings let you control the overall look and feel of the text inside your chat widget. You can choose between two font styles Bold or Sans-serif and whatever you pick will be applied across the widget, including the assistant's messages, the user's input placeholder, and the header text.

You can also set a custom text color. Once you choose a color, all widget text will follow that color automatically, helping you match your chat experience with your brand's design. The only exception is the user's message text, which uses its own color setting defined under the Response Card options. This gives you a clean and readable contrast between the user and the AI messages while still keeping your overall style consistent.

Background

In the Background section, you can choose a custom color that will be applied only to the main chat widget background. This setting affects the area behind the messages and interface elements inside the chat widget.

Other background colors such as the Header, Footer, Response Cards, and User Query Cards are controlled separately through their own customization settings. The Background option here is specifically meant to style the core chat environment without affecting those individual components.

The Header section lets you personalize the top area of their chat widget with full flexibility.

you can upload any type of logo to represent their agent, as well as set a custom Assistant Header Text allowing them to name or describe their assistant however they like.

They can also choose from multiple Header Shapes to match their design style:

  • Square
  • Sqwidgetrcle
  • Rounded
  • Circle
  • Minimal
  • Hide

In addition, you can pick between the default header background or apply a Custom Header Background Color for a more branded look. This gives complete control over how the header appears within the chat widget.

The Footer section allows users to customize the look and feel of the chat widget’s input area.

Users can choose from a variety of Footer Shapes to match their design style:

  • Square
  • Sqwidgetrcle
  • Rounded
  • Circle
  • Minimal
  • Hide

They can also adjust the Footer Background, either by keeping the default style or applying a Custom Background Color for a more personalized look.

In addition, users can edit the Input Placeholder Text for example, “Ask here…”, “Ask about…”, or any custom prompt they prefer. This helps set the tone for how users interact with the chat widget.

Send Button

Send Button Settings

The Send Button Settings allow users to fine-tune how the send action appears and behaves inside the chat widget.

Users can choose their preferred Send Button Style from a range of clean, modern options:

  • Black Solid
  • Outline
  • Gradient
  • Minimal
  • Glass

They can also apply a Custom Button Color to match their brand or overall widget theme.

For the icon itself, users can pick from multiple Send Icon Styles, including:

  • Send (Default)
  • Arrow Up Right
  • Arrow Right
  • Paperclip
  • Send Horizontal

These options give users total control over how the send action looks whether they prefer something bold, subtle, or fully personalized.

Response Loading Indicator

The Response Loading settings let you customize how the chat widget indicates that the AI is generating an answer. You can choose from a wide range of loading animations Spinner, Three Dots, Pulse, Bar, Wave, Ellipsis, Typing, Circle Scale, Growing Bar, Zigzag, Fade In Out, and more. Each style gives a slightly different feel, so you can pick the one that fits the personality of your widget.

You can also set a Custom Animation Color, allowing the loading indicator to match your brand colors or the overall theme of your chat interface. Whether you prefer something subtle or something more expressive, you have complete freedom to shape how the “AI is thinking” moment appears to your users.

Response Card

In the Response & User Query Card settings, you can easily control how both messages look inside your chat widget. You’re free to pick any card style you like whether you prefer something clean and simple, or something more modern like Glassmorphism or Neumorphism.

Response & User Query Card Settings

Response Card Background

  • Custom Color

User Query Card Colors

  • Custom Background Color
  • Text Color

Response Card Styles

  • Classic
  • Glassmorphism
  • Minimal
  • Bubble
  • Card
  • Outline
  • Shadowed
  • Elevated
  • Gradient
  • Neumorphism
  • Sqwidgetrcle
  • Square

You can also set your own background colors for both the AI’s response card and the user’s query card, and choose a custom text color. This gives you full flexibility to match the chat widget with your brand style.

Everything here is designed to be simple, visual, and fully customizable so your chat feels exactly the way you want.

With these settings, you can fully customize how your chat widget looks and feels. AssistLore keeps the entire widget customization process simple, clean, and beginner friendly.

Nothing here is complicated every option is visual, easy to understand, and designed so anyone can set up a beautiful chat interface without any design skills.

Whether you want to change colors, shapes, text styles, icons, or message cards, everything can be done in just a few clicks.

The goal is to give you complete creative control while still keeping the experience smooth and straightforward.

In short: you can shape your chat widget exactly the way you want qwidgetckly, comfortably, and without any technical struggle