` when Custom Elements are unsupported\n\n## Examples\n\n### Basic\n\n```html\n\n alice: Hey, are you free this weekend?\n bob: Sounds good! When?\n alice: Saturday morning, around 10?\n bob: Perfect. See you then!\n\n```\n\n### Custom avatars\n\n```html\n\n me: Hey there!\n friend: What's up?\n\n\n\n```\n\n### Consecutive messages — avatar grouping\n\nWhen the same author sends multiple messages in a row, the avatar is only shown on the first one:\n\n```html\n\n alice: First message\n alice: Second message, avatar hidden\n alice: Third, still hidden\n bob: Got it!\n bob: I'll send two as well\n\n```\n\n### Unknown authors — letter avatars\n\nAuthors without custom config receive a letter avatar and appear on the left:\n\n```html\n\n alice: Hello!\n bob: Hi there!\n charlie: Hey everyone!\n\n```\n\n### Empty state\n\nWhen no messages are provided, a \"No messages\" placeholder is shown:\n\n```html\n\n```\n\n### Dynamic message appending\n\nUse `appendMessage()` to add messages programmatically with smooth scrolling:\n\n```html\n\n alice: Hey there!\n\n\n\n```\n\n### Loading state\n\nShow a loading animation while fetching messages from an API:\n\n```html\n\n \n\n\n\n```\n\n### Full page example\n\n```html\n\n\n\n \n\n\n \n alice: Hey, are you free this weekend?\n bob: Yeah, what's up?\n alice: Want to grab coffee?\n bob: Sounds good! Saturday morning?\n alice: Perfect, see you then!\n \n\n \n\n\n```\n\nSee `example/` directory for a full demo.\n\n## Development\n\n```bash\nnpm install\nnpm run prepare\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}
![](\"bot.png\")
',\n side: 'left',\n bubbleColor: '#e0f2fe',\n});\n\n// SVG avatar\nel.setAuthor('alice', {\n avatar: '',\n side: 'left',\n});\n```\n\n### `setAuthor(name, options)`\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `avatar` | `string` | letter avatar | HTML string: emoji, `