Webchat Vertical Display CSS Guide
The ContactAtOnce! Webchat Client is highly configurable through CSS (Cascading Style Sheets). Publishers can customize the look and feel of the Webchat client by adjusting the following style properties. Download the Template CSS file to use as a basis for customization. After customizing the CSS, contact our Support team for implementation.
Conversation Window
Webchat Vertical Display CSS Guide |
XREF | Section | Classes | Purpose |
1 | Header | .conversationHeaderBarContainer | Control background color of Conversation Header | 2 | Agent/Merchant Bar | .agentHeaderNameContainer
| Control the font color of the Agent Name. | 3 | System Messages | .SystemSpeakerImageContainer
.SystemMessageContainer
.SystemMessageTextContainer
.SystemSpeakerNameDiv
.SystemMessageTextDiv
| Control visual formatting of System Messages
See System Message Samples | 4 | Agent Messages | .AgentSpeakerImageContainer
.AgentSpeakerNameContainer
.AgentMessageContainer
.AgentMessageTextContainer
.AgentSpeakerName
.AgentSpeakerName:after
.AgentSpeakerNameDiv
.AgentMessageTextDiv
.AgentMessageTextDiv:after,
.CustomerMessageTextDiv:before
.AgentMessageTextDiv:after
.AgentMessageTextDiv:before
| Control visual formatting of Agent Messages
See Agent Message Samples | 5 | Consumer Messages | .CustomerSpeakerImageContainer
.CustomerSpeakerNameContainer
.CustomerMessageContainer
.CustomerMessageTextContainer
.CustomerSpeakerName
.CustomerSpeakerName:after
.CustomerSpeakerNameDiv
.CustomerMessageTextDiv
.CustomerMessageTextDiv:after,
.CustomerMessageTextDiv:before
.CustomerMessageTextDiv:after
.CustomerMessageTextDiv:before
| Control visual formatting of Consumer Messages
See Consumer Message Samples | 6 | Agent Typing Message | .agentChatState | Control the size, color, font, location of the Agent Typing Message. | 7 | Message Typing Area | | | 8 | Conversation Footer | .verticalConversationFooter | Control the background color of the Conversation Footer |
|
System Messages
Sample 1 | Sample 2 | Sample 3 |
With Speaker Name
.SystemSpeakerNameDiv {
text-align: left;
font-size: 0.75em;
font-family: 'Myriad Pro', sans-serif;
color: black;
font-weight: 600;
}
| Without Speaker Name
.SystemSpeakerNameDiv {
text-align: left;
font-size: 0.75em;
font-family: 'Myriad Pro', sans-serif;
color: black;
font-weight: 600;
display:none;
}
|
.SystemSpeakerNameDiv {
text-align: left;
font-size: 0.75em;
font-family: 'Myriad Pro', sans-serif;
color: black;
font-weight: 600;
display:none;
}
|
Back to Top
Agent Messages
Sample 1 | Sample 2 | Sample 3 |
With Photo, Message Bubble, Speaker Name
.AgentSpeakerImageContainer {
display: block;
float: left;
margin: 3px 0;
}
.AgentSpeakerImage {
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
width: auto;
height: auto;
max-height: 50px;
max-width: 50px;
}
.AgentSpeakerName:after {
content: " ";
}
.AgentSpeakerNameDiv {
text-align: left;
font-size: 0.75em;
font-family: 'Myriad Pro', sans-serif;
color: black;
font-weight: 600;
}
.AgentMessageContainer {
width: 70%;
float: left;
position: relative;
margin: 5px;
}
.AgentMessageTextContainer {
position: relative;
margin-top: -4px;
float: left;
max-width: 70%;
}
.AgentMessageTextDiv {
position: relative;
float: left;
left: 10px;
font-size: 0.75em;
font-family: 'Verdana', sans-serif;
color: black;
text-align: left;
font-weight: 300;
-ms-word-wrap: break-word;
word-wrap: break-word;
background-color: white;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 8px 10px 8px 10px;
border: 1px solid #ff9e19;
font-style: normal;
}
.AgentMessageTextDiv:after,
.AgentMessageTextDiv:before {
right: 100%;
top: 10px;
border: solid rgba(255, 255, 255, 0);
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
-moz-transform: scale(0.9999);
}
.AgentMessageTextDiv:after {
border-right-color: white;
border-width: 6px;
margin-top: -6px;
-moz-transform: scale(0.9999);
}
.AgentMessageTextDiv:before {
border-right-color: #ff9e19;
border-width: 7px;
margin-top: -7px;
-moz-transform: scale(0.9999);
}
| With Photo, No Bubble, No Speaker Name
.AgentSpeakerImageContainer {
display: block;
float: left;
margin: 3px 0;
}
.AgentSpeakerImage {
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
width: auto;
height: auto;
max-height: 50px;
max-width: 50px;
}
.AgentSpeakerName:after {
content: " ";
}
.AgentSpeakerNameDiv {
display: none;
text-align: left;
font-size: 0.75em;
font-family: 'Myriad Pro', sans-serif;
color: black;
font-weight: 600;
}
.AgentMessageContainer {
width: 70%;
float: left;
position: relative;
margin: 5px;
}
.AgentMessageTextContainer {
position: relative;
margin-top: -4px;
float: left;
max-width: 70%;
}
.AgentMessageTextDiv {
position: relative;
float: left;
left: 10px;
font-size: 0.75em;
font-family: 'Verdana', sans-serif;
color: black;
text-align: left;
font-weight: 300;
font-style: normal;
}
| With No Photo, No Bubble, Speaker Name
.AgentSpeakerImageContainer {
display: block;
float: left;
margin: 3px 0;
}
.AgentSpeakerImage {
display: none;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
width: auto;
height: auto;
max-height: 50px;
max-width: 50px;
}
.AgentSpeakerName:after {
content: " ";
}
.AgentSpeakerNameDiv {
text-align: left;
font-size: 0.75em;
font-family: 'Myriad Pro', sans-serif;
color: black;
font-weight: 600;
}
.AgentMessageContainer {
width: 70%;
float: left;
position: relative;
margin: 5px;
}
.AgentMessageTextContainer {
position: relative;
margin-top: -4px;
float: left;
max-width: 70%;
}
.AgentMessageTextDiv {
position: relative;
float: left;
left: 10px;
font-size: 0.75em;
font-family: 'Verdana', sans-serif;
color: black;
text-align: left;
font-weight: 300;
font-style: normal;
}
|
Back to Top
Consumer Messages
Sample 1 | Sample 2 | Sample 3 |
Position Right, Message Bubble, Message Text Left Justified, Speaker Name
.CustomerSpeakerImageContainer {
display: none;
}
.CustomerSpeakerName {
float: right;
}
.CustomerSpeakerName:after {
content: "";
}
.CustomerSpeakerNameDiv {
text-align: right;
font-size: 0.75em;
font-family: 'Myriad Pro', sans-serif;
color: #3a4951;
font-weight: 600;
}
.CustomerMessageContainer {
width: 70%;
float: right;
position: relative;
margin: 5px;
}
.CustomerMessageTextContainer {
position: relative;
margin-top: -4px;
float: right;
max-width: 70%;
}
.CustomerMessageTextDiv {
display: block;
position: relative;
right: 10px;
font-size: 0.75em;
font-family: 'Verdana', sans-serif;
color: #3a4951;
text-align: left;
font-weight: 300;
-ms-word-wrap: break-word;
word-wrap: break-word;
background-color: white;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 8px 10px 8px 10px;
border: 1px solid #3a4951;
font-style: normal;
}
.CustomerMessageTextDiv:after,
.CustomerMessageTextDiv:before {
left: 100%;
top: 10px;
border: solid rgba(255, 255, 255, 0);
border-right-color: transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
-moz-transform: scale(0.9999);
}
.CustomerMessageTextDiv:after {
border-left-color: white;
border-width: 6px;
margin-top: -6px;
}
.CustomerMessageTextDiv:before {
border-left-color: #3a4951;
border-width: 7px;
margin-top: -7px;
}
| Position Right, No Message Bubble, Message Text Right Justified, No Speaker Name
.CustomerSpeakerImageContainer {
display: none;
}
.CustomerSpeakerName {
float: right;
}
.CustomerSpeakerName:after {
content: "";
}
.CustomerSpeakerNameDiv {
display: none;
text-align: right;
font-size: 0.75em;
font-family: 'Myriad Pro', sans-serif;
color: #3a4951;
font-weight: 600;
}
.CustomerMessageContainer {
width: 70%;
float: right;
position: relative;
margin: 5px;
}
.CustomerMessageTextContainer {
position: relative;
margin-top: -4px;
float: right;
max-width: 70%;
}
.CustomerMessageTextDiv {
display: block;
position: relative;
right: 10px;
font-size: 0.75em;
font-family: 'Verdana', sans-serif;
color: #3a4951;
text-align: right;
font-weight: 300;
font-style: normal;
}
| Position Left, No Message Bubble, Message Text Left Justified, No Speaker Name
.CustomerSpeakerImageContainer {
display: none;
}
.CustomerSpeakerName {
float: right;
}
.CustomerSpeakerName:after {
content: "";
}
.CustomerSpeakerNameDiv {
display: none;
text-align: right;
font-size: 0.75em;
font-family: 'Myriad Pro', sans-serif;
color: #3a4951;
font-weight: 600;
}
.CustomerMessageContainer {
width: 90%;
float: left;
position: relative;
margin: 5px;
}
.CustomerMessageTextContainer {
position: relative;
margin-top: -4px;
float: left;
max-width: 90%;
}
.CustomerMessageTextDiv {
display: block;
position: relative;
font-size: 0.75em;
font-family: 'Verdana', sans-serif;
color: #3a4951;
text-align: left;
font-weight: 300;
font-style: normal;
}
|
Back to Top
360 Content Carousel
The 360 Content Carousel is a slide out panel in the conversation window that cycles through value added content from ContactAtOnce! 360 Partners.
Webchat Vertical Display 360 Content Carousel Style |
XREF | Section | Classes | Purpose |
1 | Take It On The Go | .TakeItOnTheGoBody
.TakeItOnTheGoHeader
.TakeItOnTheGoSubHeader
.TakeItOnTheGoField
| Control the font properties of Take It On The Go Header, SubHeader, Body and Field location. | 2 | Consumer Transcript Request | .ConsumerTranscriptRequestSliderHeader
.ConsumerTranscriptField | Control the font properties of the Consumer Transcript Request Header and Field location. | 3 | HookLogic Incentive | | Control the font properties of the HookLogic incentive Header. | 4 | Dealer Centric Finance Offer | .dealerCentricOfferHeader | Control the font properties of the Dealer Centric Finance Offer Header. |
|
Back to Top
Offline Contact Form
When no agents are available to answer a chat, it gets routed to the Offline Contact Form which displayed inside the Conversation window.
Webchat Vertical Display Offline Contact Form Style |
XREF | Section | Classes | Purpose |
1 | Table Header | .OfflineContactTableHeader | Control background color of Contact Form Table Header | 2 | Send Button | .OfflineContactSend
.OfflineContactSend:after | Control the size, shape, color, font of the Send button. | 3 | Close Button | .OfflineContactCancel
.OfflineContactCancel:after | Control the size, shape, color, font of the Close button. |
|
Back to Top
PreConversation Prompts
ContactAtOnce! provides the option of showing a “pre-conversation” prompt to gather information from the consumer prior to starting the chat conversation. Learn more about Fixed and Configurable PreConversation Prompts also known as Name Prompts.
Webchat Vertical Display PreConversation Prompt Style |
XREF | Section | Classes | Purpose |
1 | Table Header | .OfflineContactTableHeader | Control background color of Contact Form Table Header | 2 | Send Button | .OfflineContactSend
.OfflineContactSend:after | Control the size, shape, color, font of the Send button. | 3 | Close Button | .OfflineContactCancel
.OfflineContactCancel:after | Control the size, shape, color, font of the Close button. |
|
Back to Top