CSS for HTML Chat Transcripts

Starting with release 8.5.103, the HTML version of the e-mails that send chat transcripts can include CSS information.

Important

Tags <Genesys_Chat_Transcript>...</Genesys_Chat_Transcript>, <Timestamp>...</Timestamp>, and <style type="text/css">...</style> are mandatory for CSS support.

The following figure shows an example of the output.

Sample HTML Transcript Email

And following is the code that produced the example. You can use it as a template for the text of an HTML standard response.

Dear <$ Contact.FirstName+" "+Contact.LastName $>.
 
Please find below the transcript of the chat session that you initiated on <$ Interaction.DateCreated $>.
Note: If there are problems on how this message is displayed, please view it in a web browser.
 
  
Sincerely,
Customer Support
---
  
<Genesys_Chat_Transcript><Timestamp>yyyy/MM/dd, hh:mm:ss aaa</Timestamp></Genesys_Chat_Transcript>
 
<style type="text/css">
#outlook a { padding: 0; } /* Force Outlook to provide a "view in browser" menu link. */
.transcript {
font-family:arial, helvetica, sans-serif;
overflow-y: auto;
font-size: 13px;
line-height: 18px;
padding: 24px;
}
/* IF YOU WANT TO USE DARK THEME UN COMMENT BELOW 6 LINES
.transcript.cx-theme{background-color: #33383d}
.transcript.cx-theme .message-text {color:#fdfdfd}
.transcript.cx-theme .bubble {background-color: #222529}
.transcript.cx-theme .bubble-arrow {fill:#222529}
.transcript.cx-theme .name {color:#fdfdfd}
.transcript.cx-theme .message .time {color: #aaa}
*/
/* IF YOU WANT TO USE DARK THEME COMMENT BELOW 6 LINES AND UNCOMMENT ABOVE 6 LINES */
.transcript.cx-theme{background-color:#fdfdfd}
.transcript.cx-theme .message {border-bottom:1px solid #eee}
.transcript.cx-theme .message-text {color:#000}
.transcript.cx-theme .bubble {background-color:#F2F4F7}
.transcript.cx-theme .bubble-arrow {fill:#F2F4F7}
.transcript.cx-theme .name {color:#222}
.transcript.cx-theme .message .time {color:#aaa}
.transcript .notice a {
color: #75A8FF!important;
}
.transcript .message {
min-height: 48px;
margin: 5px 0;
box-sizing: border-box;
position: relative;
}
.transcript .message .bubble {
padding: 10px 15px;
padding: 8px;
}
.transcript .message .bubble-arrow {
position: absolute;
top: 16px;
}
.transcript .message .name {
font-size: 13px;
font-weight: bolder;
padding-right: 5px;
}
.transcript .message .time {
display: block;
margin-top: 5px;
}
.transcript .message .message-text {
word-wrap: break-word;
white-space: pre-line;
}
@-moz-document url-prefix() {
white-space: pre-wrap;
}
.transcript .message .message-text > p {
margin: 10px 0 0 0;
}
.transcript .message .avatar-wrapper {
width: 48px;
position: absolute;
top: 2px;
}
.transcript .message .avatar {
height: 48px;
width: 48px;
}
.transcript .message > p.NewTextBubble {
-webkit-animation: NewTextBubble 0.5s 1;
animation: NewTextBubble 0.5s 1;
}
.transcript .message.system {
color: black;
background: none;
padding: 8px 0;
}
.transcript .message.system .bubble {
padding: 0;
background-color: transparent;
}
.transcript .message.system .message-text {
font-style: italic;
}
.transcript .message.system .name {
display: none;
}
.transcript .message.system .avatar-wrapper {
display: none;
}
.transcript .message.system .time {
color: #ccc;
}
.transcript .message.system .bubble-arrow {
display: none;
}
.transcript .message.them {
border: 0;
padding: 6px 0;
text-align: left;
}
.transcript .message.them .bubble {
margin-left: 53px;
text-align: left;
}
.transcript .message.them .bubble-arrow {
left: 46px;
}
.transcript .message.them .bubble-arrow .right {
display: none;
}
.transcript .message.them .avatar-wrapper {
left: 0;
}
.transcript .message.you {
border: 0;
padding: 6px 0;
text-align: right;
}
.transcript .message.you .bubble {
margin-right: 53px;
text-align: left;
}
.transcript .message.you .bubble-arrow {
right: 46px;
}
.transcript .message.you .bubble-arrow .left {
display: none;
}
.transcript .message.you .avatar-wrapper {
right: 0;
}
.transcript .message.injected {
border: 0;
margin: 6px 0;
padding: 8px;
}
.transcript .message.injected .bubble,
.transcript .message.injected .bubble-arrow,
.transcript .message.injected .avatar-wrapper {
display: none;
}
.cx-img-map {
background-repeat: no-repeat;
}
.preset-blue .cx-img-map,.cx-img-map.preset-blue {
background-image: url("<your-url>");
}
.px48 .cx-img-map,.px48.cx-img-map{
height: 48px;
width: 48px;
}
.px48 .cx-img-map.avatar-customer,.cx-img-map.px48.avatar-customer{
background-position: -160px 0px;
}
.px48 .cx-img-map.avatar-agent,.cx-img-map.px48.avatar-agent{
background-position: -160px -144px;
}
</style>