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

 
XREFSectionClassesPurpose
1Header.conversationHeaderBarContainerControl background color of Conversation Header
2Agent/Merchant Bar.agentHeaderNameContainer
Control the font color of the Agent Name.
3System Messages.SystemSpeakerImageContainer
.SystemMessageContainer
.SystemMessageTextContainer
.SystemSpeakerNameDiv
.SystemMessageTextDiv
Control visual formatting of System Messages
See System Message Samples
4Agent 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
5Consumer 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
6Agent Typing Message.agentChatStateControl the size, color, font, location of the Agent Typing Message.
7Message Typing Area
8Conversation Footer.verticalConversationFooterControl the background color of the Conversation Footer

System Messages

Sample 1Sample 2Sample 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 1Sample 2Sample 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 1Sample 2Sample 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

 
XREFSectionClassesPurpose
1Take It On The Go.TakeItOnTheGoBody
.TakeItOnTheGoHeader
.TakeItOnTheGoSubHeader
.TakeItOnTheGoField
Control the font properties of Take It On The Go Header, SubHeader, Body and Field location.
2Consumer Transcript Request.ConsumerTranscriptRequestSliderHeader
.ConsumerTranscriptField
Control the font properties of the Consumer Transcript Request Header and Field location.
3HookLogic IncentiveControl the font properties of the HookLogic incentive Header.
4Dealer Centric Finance Offer.dealerCentricOfferHeaderControl 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

 
XREFSectionClassesPurpose
1Table Header.OfflineContactTableHeaderControl background color of Contact Form Table Header
2Send Button.OfflineContactSend
.OfflineContactSend:after
Control the size, shape, color, font of the Send button.
3Close 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

 
XREFSectionClassesPurpose
1Table Header.OfflineContactTableHeaderControl background color of Contact Form Table Header
2Send Button.OfflineContactSend
.OfflineContactSend:after
Control the size, shape, color, font of the Send button.
3Close Button.OfflineContactCancel
.OfflineContactCancel:after
Control the size, shape, color, font of the Close button.

Back to Top