Chat Widget Style Gallery

Explore different styling options for the IMsupporting chat widget. Each example includes the CSS code you can copy and use on your own site.

Some examples feature animated effects to enhance user engagement and may require additional JavaScript adding to your sites code. Reach out to our technical teams if you need assistance implementing these advanced styles.

Note: Widget configuration is managed in your IMsupporting admin settings. These examples show optional CSS-only button overrides you can add on your website.

Business plan users can also request custom widget styling tailored to their brand by contacting our support team.

View Examples

Widget Styling Examples

Click on any example to see the chat widget with custom styling

Default Widget

Clean, professional look with no custom styling

AI Theme

Animated gradient with sparkle effects and floating particles

Fire Theme

Blazing flames with flickering fire particles and glow effects

Medical Theme

Professional healthcare with pulsing heartbeat animation

Luxury Theme

Elegant gold shimmer with premium sparkle effects

Gaming Theme

Vibrant neon glow with cyberpunk RGB effects

`, 2: ` `, 3: ` `, 4: ` `, 5: ` `, 6: ` ` }; window.showWidgetCode = function(exampleId) { const modal = document.getElementById('codeModal'); const codeContent = document.getElementById('codeContent'); const modalTitle = document.getElementById('modalTitle'); const titles = { 1: 'Default Widget Code', 2: 'AI Themed Widget Code (with Animations)', 3: 'Fire Themed Widget Code (with Flame Effects)', 4: 'Medical/Healthcare Theme Code (with Heartbeat Pulse)', 5: 'Luxury/Premium Theme Code (with Gold Shimmer)', 6: 'Gaming/Neon Theme Code (with RGB Effects)' }; modalTitle.textContent = titles[exampleId]; codeContent.textContent = window.widgetCodes[exampleId]; modal.style.display = 'block'; document.body.style.overflow = 'hidden'; }; window.closeCodeModal = function() { const modal = document.getElementById('codeModal'); modal.style.display = 'none'; document.body.style.overflow = 'auto'; }; window.copyCode = function() { const codeContent = document.getElementById('codeContent'); const textArea = document.createElement('textarea'); textArea.value = codeContent.textContent; document.body.appendChild(textArea); textArea.select(); document.execCommand('copy'); document.body.removeChild(textArea); // Show feedback const btn = event.target.closest('button'); const originalHTML = btn.innerHTML; btn.innerHTML = ' Copied!'; setTimeout(() => { btn.innerHTML = originalHTML; }, 2000); }; // Close modal on escape key document.addEventListener('keydown', function(e) { if (e.key === 'Escape') { window.closeCodeModal(); } }); // Close modal on outside click document.getElementById('codeModal')?.addEventListener('click', function(e) { if (e.target === this) { window.closeCodeModal(); } });