Chat Widget Customization

The chat widget is how visitors interact with your AI chatbot. Customize it to match your brand.

Display Modes

• Float — the widget appears as a button in the corner. Clicking it opens the chat window. This is the default.
• Embed — the widget renders inline on your page. Set the Embed CSS Path to a CSS selector (e.g. .chat) where the widget should appear.
• Hidden — the widget script loads but nothing is shown. Use this to temporarily disable the widget without removing the code from your site.

Agent Avatar

Choose how the AI appears in chat conversations:

• Presets — select from LooperChat, Robot, Assistant, Headset, or Bot avatars
• Custom URL — enter any image URL for a fully custom avatar
• Default — the LooperChat logo is used if no avatar is configured

Go to Settings > General > Agent Avatar to configure.

Visual Customization

• Main Color — hex color for the chat button, header, and user message bubbles
• Logo — URL to your brand logo, displayed in the chat header
• Position — dock the float button to any corner: bottom-right, top-right, bottom-left, or top-left

Text Customization

• Widget Name — internal name for your reference in the dashboard
• Header Text — title shown at the top of the chat window
• Welcome Message — greeting visitors see when they open the chat

Behavior Settings

• Auto Open — automatically open the chat window on page load
• Hide on Mobile — hide the widget on mobile devices
• Hide if Away — hide the widget if no human agents are online
• Pre-chat Form — require visitors to provide email or phone before chatting

Chat Language

Set to Auto-detect to match the visitor's browser language, or choose a specific language.

RAG Source Carousel

When the AI answers using your website content, it can show source links in a carousel below the response. Enable this in Settings > General > Enable RAG Source Carousel.

Powered By Attribution

The "Powered by LooperChat" link appears at the bottom of the widget. This can be toggled in settings.

Installation

Standard Websites

Add this code before the closing </body> tag:

<script id="looperchat-tag" src="https://tag.looperchat.com/chat/tag.js" data-license="YOUR_PROJECT_ID" defer async></script>

Go to Settings > Install to copy the snippet with your project ID pre-filled.

Shopify Stores

The widget is installed automatically via the Shopify app. No code needed.

Testing

Use the Preview page in the sidebar to test the widget in embed mode before going live. Click Reset to start a fresh conversation.