Chat Widget

Customizing the visitor experience

Chat Widget Customization

The chat widget is the primary interaction for your website visitors. LooperChat offers extensive customization options to ensure it fits your brand.

Display Modes

  • Float: The widget appears as a floating button (usually in the bottom-right corner). Clicking it opens the chat window.
  • Embed: The widget is embedded directly into the page content. This requires a specific CSS Selector ID on your website where the chat should render.

Visual Customization

  • Main Color: Choose a hex color that matches your brand. This affects the chat button, user messages, and header background.
  • Logo: Provide a URL to your logo to display it in the chat header.
  • Position: You can dock the floating widget to any of the four corners of the screen (Bottom-Right, Top-Right, Bottom-Left, Top-Left).

Text Customization

  • Widget Name: The name displayed internally for your reference.
  • Header Text: The title text shown at the very top of the open chat window (e.g., "Support Team").
  • Welcome Message: The automatic greeting message sent to visitors when they open the chat.

Behavior Settings

  • Auto Open: Automatically open the chat window when a visitor loads the page.
  • Hide on Mobile: Option to hide the widget specifically on mobile devices to save screen real estate.
  • Hide if Away: Automatically hide the widget if no human agents are online (useful if you don't use the AI bot).
  • Pre-chat Form: Require visitors to provide their Email or Phone Number before they can start chatting.

If you are using the AI Assistant mode with crawled URLs or FAQs, you can enable the RAG Source Carousel. This displays the sources (links) the AI used to generate its answer, increasing trust and allowing users to read more details on your site.

By customizing the chat widget's appearance, position, and behavior, you can create a smooth and on-brand chat experience that engages visitors and fits naturally into your website.