Live Chat Templates Gallery

Browse every MyLiveChat widget design across three engine generations. Compare colors, launcher styles, and layouts — then preview any template live before installing it.

105Total Templates
3Engine Generations
4Layout Families
1-clickLive Preview
Live previews open in a sandbox. Clicking any template card below opens a real, fully-rendered chat widget — but it runs against a shared demo account. Routing, agent availability, AI replies, transcripts, and analytics may differ from production. Create a free account to test on your own site.

Three engine generations, one product

MyLiveChat ships three live chat engine generations side-by-side so you can pick the right balance of features, weight, and visual style. Most new sites pick LiveChat 3.0; older deployments and legacy CMS layouts often stay on 1.0 or 2.0.

LiveChat 1.0

Classic Inline

The original lightweight inline chat for legacy layouts and the simplest possible install. 11 templates with strong color palettes.

11 templatesInline chat onlyBest for: legacy CMSs
LiveChat 2.0

Modern Refresh

A lighter modern set with 14 inline templates and a simpler visual refresh. Bridges the classic look with the modern engine.

14 templatesInline chatBest for: visual refresh of 1.0 sites
LiveChat 3.0

Modern Engine

The newest inline chat engine with the full library of 105 templates: classic launcher, tabbed launcher, premium tabbed, and tabbed-at-top layouts.

105 templates4 layout familiesBest for: new installs

How to pick the right template

Most teams pick a template in three minutes by answering three questions. Here's the short decision tree we use with new customers.

1

What launcher style fits your brand?

Round button (Classic Launcher 1–8) feels familiar and minimal — best for content-heavy sites that don't want the chat to dominate. Labeled tab (Modern 9–49 + Premium 50–100) communicates intent at a glance ("Chat with us", agent name, online status) and converts better on transactional pages. Top-anchored tab (101–105) breaks the visual sameness of bottom-right widgets — distinctive and uncommon.

2

Which color carries your brand?

Browse by primary palette. Templates carry curated brand colors: blues and navys dominate (corporate, SaaS, fintech), but red, orange, teal, purple, magenta, amber, and gold are all available. Pick a launcher that contrasts with your page background — dark launchers on light pages, light or accent-color launchers on dark pages. Every template's exact color appears in the swatch on each card below.

3

Do you need premium polish?

Templates in the Premium Tabbed (50–100) family use refined chrome, subtle gradients, and stronger contrast — they were built for SaaS, fintech, and high-end ecommerce sites where the chat needs to feel as polished as the rest of the product UX. Templates in the Modern Tabbed (9–49) family are lighter and faster to render — better for content sites and blogs. Both share the same engine and feature set; the difference is purely visual.

4

When should I stay on 1.0 or 2.0?

If your site already uses LiveChat 1.0 Classic and renders fine, there's no urgency to migrate — the engine is still actively supported. Choose LiveChat 2.0 when you want a visual refresh without re-installing or changing your widget snippet. Choose 3.0 for any new install: it has the largest template library, newest layouts, and forward-compatible feature work.

LiveChat 3.0 templates (105 designs)

Templates 1–105 are all rendered by the modern engine. They split into four layout families based on launcher chrome, panel position, and tab behavior. Click any card to open a live preview in a new tab.

Classic Launcher (1–8)

The original launcher style: a single round button at the bottom-right opens a vertical chat panel. Familiar to users of 2010-era live chat. Templates 1–8.

#1Navy#2Blue#3Blue#4Gray#5Blue#6Navy#7Slate Blue#8Blue Indigo

Modern Tabbed Launcher (9–49)

Adds a labeled tab to the launcher chrome (status, agent name, brand line) and a richer panel header. Templates 9–49 cover the full color spectrum with neutral, blue, red, teal, purple, orange, and indigo palettes.

#9Slate Blue#10Blue Indigo#11Slate Blue#12Blue Indigo#13Slate Blue#14Blue Indigo#15Blue Indigo#16GlassmorphismFrosted-glass surface with subtle backdrop blur.#17Slate Blue#18Slate Blue#19Slate Blue#20Slate Blue#21Slate Blue#22Slate Blue#23Slate Blue#24Slate Blue#25Slate Blue#26Slate Blue#27Slate Blue#28Slate Blue#29Slate Blue#30Slate Blue#31NavyCrisp navy launcher with strong contrast for light pages.#32Blue#33Navy#34Blue#35Slate Blue#36Red#37Dark Slate#38Orange#39Teal#40Purple#41Blue#42Slate BlueSample design used in product walkthroughs.#43Red#44Teal#45Dark Slate#46Teal#47Light Purple#48Blue#49Indigo

Premium Tabbed (50–100)

Refined tabbed launchers with stronger contrast, subtle gradients, and the most polished panel chrome. Best fit for SaaS, fintech, and ecommerce sites that want a premium feel. Templates 50–100.

#50CrimsonPremium tabbed launcher in bold crimson — high attention-getting accent.#51Amber#52Sky Blue#53Magenta#54Slate Blue#55Goldenrod#56Purple#57Midnight Blue#58Midnight Blue#59Midnight Blue#60Midnight Blue#61Midnight Blue#62Midnight Blue#63Midnight Blue#64Midnight Blue#65Midnight Blue#66Midnight Blue#67Midnight Blue#68Midnight Blue#69Midnight Blue#70Sky Blue#71Sky Blue#72Midnight Blue#73Midnight Blue#74Sky Blue#75Sky Blue#76Midnight Blue#77Midnight Blue#78Sky Blue#79Sky Blue#80Sky Blue#81Sky Blue#82Midnight Blue#83Midnight Blue#84Sky Blue#85Sky Blue#86Midnight Blue#87Midnight Blue#88Sky Blue#89Sky Blue#90Midnight Blue#91Midnight Blue#92Sky Blue#93Sky Blue#94Midnight Blue#95Midnight Blue#96Midnight Blue#97Midnight Blue#98Purple#99Blue#100Midnight Blue

Tabbed-at-Top (101–105)

Newest layout family. The launcher tab and panel chrome anchor at the top of the chat surface and the panel slides up from the bottom edge. Distinctive and uncommon — great for breaking visual sameness. Templates 101–105.

#101BlueTabbed-at-top layout — chrome lives at the top, panel slides up.#102Blue#103Blue#104Blue#105EclipseDeep-eclipse charcoal palette designed for premium night-mode sites.

LiveChat 2.0 templates (14 designs)

A lighter modern engine that uses a curated subset of the v3 catalog. Choose 2.0 when you want a contemporary look without enabling the full 3.0 feature set.

#1Navy#2Blue#3Blue#4Gray#5Blue#7Slate Blue#8Blue Indigo#9Slate Blue#10Blue Indigo#11Slate Blue#12Blue Indigo#14Blue Indigo#15Blue Indigo#16GlassmorphismFrosted-glass surface with subtle backdrop blur.

LiveChat 1.0 Classic templates (11 designs)

The original inline chat templates. Lightweight HTML/CSS that renders inside any layout, ideal for legacy CMS pages where the modern engine is overkill.

#1Blue Standard#2Blue Classic#3Purple Dark#4Gray#5Blue#6Dark Teal#7Green#8Red Dark#9Orange#10Orange Bold#11Teal

Template FAQs

The most common questions we get about choosing, switching, and customizing templates.

Can I switch templates after I've installed the widget?
Yes. The template ID is set in your dashboard under Deployment → Customization, not in the embed snippet on your site. Switch templates anytime — the change applies on the next page load. No code changes required.
Do all 105 templates support AI chatbot, agent handoff, and offline forms?
Yes. All LiveChat 3.0 templates (1–105) share the same underlying engine and feature set: AI chatbot greeting, knowledge training, human handoff, file transfer, proactive invitations, departments, agent ratings, offline message capture, and analytics. The differences are visual — launcher style, color, panel chrome — not functional.
Can I change the color of an existing template?
Yes. Each template has a default brand color shown in the swatch on its card, but you can override it from the dashboard's Customization tab. If your brand color doesn't match any template default, pick the layout you like and tint it to match.
What's the difference between LiveChat 1.0, 2.0, and 3.0?
LiveChat 1.0 (Classic) is the original lightweight inline-chat engine for legacy sites. 2.0 is a visual refresh of 1.0 using a curated subset of newer designs. 3.0 is the modern engine with the full 105-template library, the four layout families, and forward-compatible feature work. New installs default to 3.0; existing 1.0 / 2.0 deployments keep working unchanged.
Are templates mobile-responsive?
Yes. Every template adapts to mobile, tablet, and desktop viewports. On small screens the chat panel becomes full-width and the launcher anchors to the bottom-right (or top, for templates 101–105). No separate mobile template needed.
How do tabbed-at-top templates (101–105) differ from other layouts?
Templates 101–105 anchor the launcher tab and panel chrome to the top of the chat surface, with the conversation area below. Most live chat widgets sit at the bottom-right corner; this top layout breaks visual sameness and is uncommon enough that it stands out on a page. Useful if you want chat to feel native to a top navigation rather than as a corner accessory.
Can I preview a template without signing up?
Yes. Click any card in the gallery above — it opens a fully-rendered live preview in a new tab using a public demo account. You can interact with the launcher, open the chat panel, and see exactly how the template behaves before you create an account.
Do templates work with WordPress, Shopify, Magento, and other platforms?
Yes. The widget snippet is two lines of HTML and works on any site that lets you paste raw HTML into a template, footer, or theme file. Platform-specific install guides for WordPress, Shopify, Magento, and 18 other CMS / commerce platforms are available.

Ready to install your template?

Sign up free, pick any template from this gallery, and embed the widget in two lines of HTML.

Start free in 60 seconds Open template preview tool
Free forever for 1 agent

Give every visitor an instant way to reach you.

Launch live chat, connect your knowledge base, and add AI answers when you are ready. No credit card, no trial clock.

Get Started Free View Demo