本模板是一個利用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 =<!-- 发送者聊天内容 -->
}}