本模板是一个利用CSS代码，模仿QQ聊天（群聊）对话的效果实现。
本模板最大支持7个来往聊天，可根据使用情况直接修改原模板动态添加。
基本使用
基本使用包括对文字及头像部分的简单调用。
单接收者/发送者
本格式为只有1个发送者和1个接收者的模板呈现方式。
| 代码 | 示例 |
|---|---|
{{ChatBubble
|receiver1 = 晓航每天都想划船
|receiver1-avatar = [[File:晓航头像.jpg|class=chat-widget-inline-avatar]]
|receiver1-label = Lv100 群主
|receiver1-text = 为什么要开一个新系列？
|sender1 = 靴猫
|sender1-avatar = [[File:靴猫自绘.jpg|class=chat-widget-inline-avatar]]
|sender1-label = Lv100 管理员
|sender1-text = 因为想发更多的糖呀。
}}
|
晓航每天都想划船 Lv100 群主 为什么要开一个新系列？
Lv100 管理员 靴猫 因为想发更多的糖呀。 |
要点：
- 每个参数都要填写，尤其是receiver1/sender1，模板只有判断这两个参数不为空才可显示对应的聊天。
- receiver和sender可以只填写一个，从而获得只有一个人说了一句话的效果。
- 图片中的
class=chat-widget-inline-avatar参数必须附带，否则样式会崩坏。
多接收者/发送者
| 代码 | 示例 |
|---|---|
{{ChatBubble
|receiver1 = 晓航每天都想划船
|receiver1-avatar = [[File:晓航头像.jpg|class=chat-widget-inline-avatar]]
|receiver1-label = Lv100 群主
|receiver1-text = 为什么要开一个新系列？
|sender1 = 靴猫
|sender1-avatar = [[File:靴猫自绘.jpg|class=chat-widget-inline-avatar]]
|sender1-label = Lv100 管理员
|sender1-text = 因为想发更多的糖呀。
|sender2 = 靴猫
|sender2-avatar = [[File:靴猫自绘.jpg|class=chat-widget-inline-avatar]]
|sender2-label = Lv100 管理员
|sender2-text = 因为想发更多的糖呀。
|receiver3 = 晓航每天都想划船
|receiver3-avatar = [[File:晓航头像.jpg|class=chat-widget-inline-avatar]]
|receiver3-label = Lv100 群主
|receiver3-text = 得了发稿PTSD，每到周二、四、日晚上的七点都会精神性抽搐。
}}
|
晓航每天都想划船 Lv100 群主 为什么要开一个新系列？
Lv100 管理员 靴猫 因为想发更多的糖呀。
Lv100 管理员 靴猫 晓航做了这么长时间编辑，有何感想？
晓航每天都想划船 Lv100 群主 得了发稿PTSD，每到周二、四、日晚上的七点都会精神性抽搐。 |
要点：
- 如果在同一组发送者和接收者中，为了连续对话省略了一个发送者/接收者，那么新的参数编号必须+1。如在上面例子中，存在参数receiver1、sender1、sender2，若要再附带一个receiver，则需填写receiver3
进阶使用
本模板有多个高级参数，可以改变头衔颜色、文字颜色等等，已有的参数也可以通过使用特殊代码增强显示效果。
使用<img>标签修改头像图片（不推荐）
<img>标签即将弃用，且存在安全问题，不建议使用。
| 代码 | 示例 |
|---|---|
{{ChatBubble
|receiver1 = User:Zorua Fox
|receiver1-avatar = <img src="https://youshou.wiki/extensions/Avatar/avatar.php?user=Zorua_Fox" alt="Sender Avatar" class="avatar">
|receiver1-label = Lv100 群主
|receiver1-text = 这是一行测试文字。
}}
|
User:Zorua Fox Lv100 群主 这是一行测试文字。 |
代码说明
代码说明：
{{ChatBubble
|receiver1 =<!-- 接收者（左侧）名称 -->
|receiver1-avatar =<!-- 接收者头像，可使用带样式的wikitext（如[[File:晓航头像.jpg|class=chat-widget-inline-avatar]]）或使用img标签（不推荐）-->
|receiver1-label =<!-- 接收者头衔文字 -->
|receiver1-text =<!-- 接收者聊天内容 -->
|sender1 =<!-- 发送者（右侧）名称 -->
|sender1-avatar =<!-- 发送者头像，使用见上 -->
|sender1-label =<!-- 发送者头衔文字 -->
|sender1-text =<!-- 发送者聊天内容 -->
}}