---
title: "Chat widget animated icon"
description: "Chat widget animated icon (Get help). The support chat launcher is clicked open. Light: the round launcher presses in and springs back, its chat bubble turns away and fades, and the close cross spins in a quarter turn in its place, overshoots and settles; the cross stays while the chat is open. Strong: a deeper press with a rebound, and the cross spins in a half turn with a bigger overshoot. The reverse spins the cross out and the bubble pops back in."
canonical: https://generativeicons.com/icons/chat-widget/
---

# Chat widget animated icon

The support chat launcher is clicked open. Light: the round launcher presses in and springs back, its chat bubble turns away and fades, and the close cross spins in a quarter turn in its place, overshoots and settles; the cross stays while the chat is open. Strong: a deeper press with a rebound, and the cross spins in a half turn with a bigger overshoot. The reverse spins the cross out and the bubble pops back in.

- Id: `chat-widget`
- Category: Get help
- Search terms: chat launcher, floating chat, open chat, close chat, chat popup, chat window, website chat, embedded chat, support bubble, chat toggle
- Two states: closed to open, played forward and back
- Styles: outline, solid, duotone; outline weights 1.5, 2, 2.5 (any from 1 to 3); motion light or strong
- File: https://generativeicons.com/assets/chat-widget.lottie (dotLottie, 8999 bytes, sha256 f038f16dff2aa3ba67c5be9a8987ef8aa59509e302cff15ad1df6f77e1365b70)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add chat-widget
```

## React

```tsx
// npm install @lottiefiles/generative-icons-react
'use client';
import { AnimatedIcon } from '@lottiefiles/generative-icons-react';
import icon, { src } from './generative-icons/chat-widget.mjs';

export function ChatWidgetIcon() {
  return <AnimatedIcon icon={icon} src={src} size={32}
    color="#ffffff" variant="outline" weight={2}
    motion="light" theme="dark" />;
}
```

## JavaScript

```js
import { createIcon } from '@lottiefiles/generative-icons-runtime';
import icon, { src } from './generative-icons/chat-widget.mjs';

const handle = await createIcon(canvas, {
  icon, src,
  color: '#ffffff', style: 'outline', weight: 2,
  motion: 'light', theme: 'dark'
});
button.addEventListener('click', () => handle.play());
// On removal: handle.destroy();
```

More: https://generativeicons.com/icons/chat-widget/ · https://generativeicons.com/api/icons/chat-widget