How to use chat template on Ao3

  • Create a new work skin on Ao3
  • Copy the CSS code from codepen

    Copy CSS

  • Paste the code to the CSS field on your new work skin page and then save

    Paste CSS

  • When creating new work, pick the new work skin you made

    Pick work skin

  • Generate the html code using this page for the chat you want to show and copy it

    Copy HTML

  • Copy the generated code to your work text field, make sure that the mode is HTML.

    Paste HTML

  • Switch to Rich Text Mode, the chat will look messy but it will okay once it's on preview/published as long as you don't mess with that part!

    Copy CSS

    Copy CSS

Layout:
Chat Type:
Sender Name
Sender Icon Link

Message Receivers:

Name
Icon Link
Tagline

Messages:

Message Sender
Message Type
Message
Message Sender
Message Type
Message
Message Sender
Message Type
Message
Message Sender
Message Type
Message
Message Sender
Message Type
Message
Group Name
Group Tagline ©
Dan Heng
Dan Heng
There is so much i want to say, but you probably already know, When we meet again some time in the future, please do not let go again.
Jing Yuan
Jing Yuan
Please tell me, my precious love
Jing Yuan
Jing Yuan
that you will come to me soon.
Dan Heng sends a location map.
Dan Heng
Dan Heng
Message
1
;