Cascading Style Sheet Configuration Options

ContactAtOnce! allows publishers to control most aspects of the “look & feel” of the site visitor facing forms via a Cascading Style Sheet (CSS).¬†ContactAtOnce! customer support can configure the CSS to your specifications.

Instant Messaging Window CSS Options
XrefCSS FieldConfiguration Values
AN/APublisher Logo (Configured in Publisher Portal)
BN/AAgent Image (Configured in Advertiser Portal)
CN/AAgent Name (Configured in Advertiser Portal)
DN/AAdvertiser Name (Configured in Advertiser Portal)
1SystemSpeakerNameFull text control (size, font, color)
2SystemMessageTextFull text control (size, font, color)
3FormBodyImage
4AgentSpeakerNameFull text control (size, font, color)
5AgentMessageTextFull text control (size, font, color)
6CustomerSpeakerNameFull text control (size, font, color)
7CustomerMessageTextFull text control (size, font, color)
8FooterLegalText Positioning
9LegalTextFull text control (size, font, color)
10Send ButtonImage
11Close ButtonImage
12ClickToCall ButtonImage
13VoIP/Video ButtonImage
14Consumer HintImage
15FooterBackgroundImage
Click-to-Call Window CSS Options
XrefCSS FieldConfiguration Values
1FormBodyImage
2InputTableFull table control (background color, text color, alignment, margin, font)
3CalloutConnectImage
4FooterLegalText Positioning
5LegalTextFull Text Control (size, font, color)
6FooterBackgroundImage
Offline Contact Window CSS Options
XrefCSS FieldConfiguration Values
1FormBodyImage
2StrongGreetingFull text control (size, font, color)
3InputTableFull table control (background color, text color, alignment, margin, font)
4OfflineContactSendImage
5OfflineContactCancelImage
6FooterLegalText Positioning
7LegalTextFull text control (size, font, color)
8FooterBackgroundImage
Agent Client Window CSS Options
XrefCSS FieldConfiguration Values
1ChatDlg[NormalChat="false"]Background Color (Gradient Supported)
Buttons Area
2ConversationButtons_ConversationCompleteFont (family, size, color, weight)
2ConversationButtons_AnswerChatButton (size, color, radius corner, height, border)
2ConversationButtons_DenyButton (size, color, radius corner, height, border)
2ConversationButtons_ForwardButton (size, color, radius corner, height, border)
2ConversationButtons_EndChatButton (size, color, radius corner, height, border)
Conversation Area
3ConversationContainerBackground Color
3ConversationContainer_TranscriptHeaderFont (family, size, color, weight) radius corners
3ConversationContainer_MobileIndicatorImage
3ConversationContainer_ChatEditBackground color, height
3ConversationContainer_CustomerStatusFont (family, size, color, weight)
3ConversationContainer_HideLeftPaneFont color
3ConversationContainer_PoweredByImage (must choose black or white version)
Message Transcript
4AgentMessageFont (family, size, color, weight), background color, margin bottom
4AgentMessage .SpeakerNameFont (family, size, color, weight)
4AgentMessage .MessageTimeFont (family, size, color, weight)
4AgentMessage .MessageTextFont (Size, color, weight)
4CustomerMessageFont (family, size, color, weight), background color, margin bottom
4CustomerMessage .SpeakerNameFont (family, size, color, weight)
4CustomerMessage .MessageTimeFont (family, size, color, weight)
4CustomerMessage .MessageTextFont (family, size, color, weight)
4SystemMessageFont (family, size, color, weight), background color, margin bottom
4SystemMessage .SpeakerNameFont (family, size, color, weight)
4SystemMessage .MessageTimeFont (family, size, color, weight)
4SystemMessage .MessageTextFont (family, size, color, weight)
Shortcuts Pop Up
5ShortcutsPopup_TitleFont (family, size, color, weight), background color, min-height
5ShortcutsPopup_ShortcutWidgetBackground color, width
5ShortcutsPopup_ShortcutButtonFont Size
5ShortcutsPopup_CategoryTitleFont Size
5ShortcutsPopup_SeparatorLine (Size, Color, Pattern)
5ShortcutsPopup_CategoryShortcutButtonButton (Size, Color, Pattern)
5ShortcutsPopup_CategoryShortcutTextFont (Size, Color)
Tab Area
6QTabWidget#ChatDlg_tabLeftPaneBorder(size, color, pattern), background color
6QTabWidget::paneMargin, Border(size, color, pattern, radius)
6ChatDlg_tabLeftPane QTabBar::tab:firstFont (family, size, color, weight) border radius
6ChatDlg_tabLeftPane QTabBar::tab:lastFont (family, size, color, weight) border radius
6QTabWidget::paneMargin, Border(size, color, pattern, radius)
6ChatDlg_tabLeftPane QTabBar::tab:selectedFont (family, size, color, weight), border (size, color, pattern)
Shortcuts Tab
7ChatDlg_tabLeftPane QTabBar::tabPadding, Font, Border
7ShortcutsTab_SeparatorLine color, thickness
7ShortcutsTab_ShortcutButtonFont size, weight
7ShortcutsTab_CategoryButtonFont size, weight
7ShortcutsTab_CategoryButtonDropDownMenuBackground color, border (size, color, pattern)
Mobile Consumer Client CSS Options
XrefCSS FIeldConfiguration Values
Global Styles
GlobalTitle BarBackground Color (Solid or Gradient)
GlobalBackground ColorSolid or Gradient
GlobalButtonBorder, Background Gradient, Shadow, Font Color, Background Image
Pre-Conversation Screen
1Pre-Conversation Prompt ScreenThis screen cannot be changed at this time.
Connection to Agent Screen
2.1BackgroundBackground Color
2.2Connecting to Agent TextFont Color
2.3Leave a Message TextFont Color
2.4Background ImageVisible or Not Visible
Active Conversation - Title Bar
3.1Info ButtonEnabled or Disabled
3.2Gradient BackgroundSee Global Setting
3.3Agent Name TextFont Color
3.4Close ButtonSee Global Setting
3.5 BackgroundImage, Color
Active Conversation - Agent Area
4.1Background GradientTop Color, Bottom Color
4.2Agent TextFont Color
4.3Send ButtonSee Global Setting
Active Conversation - Consumer Message
5.1BorderColor, Weight
5.2BackgroundColor
5.3Divider LineColor, Weight
5.4Speaker Role Text Font Color
5.5Message TextFont Color
Active Conversation - Agent Message
6.1BorderColor, Weight
6.2Background Color
6.3Divider LineColor, Weight
6.4Speaker Role TextFont Color
6.5Message TextFont Color
Active Conversation - System Message
7.1BorderColor, Weight
7.2BackgroundColor
7.3Divider LineColor, Weight
7.4Speaker Role TextFont Color
7.5Message TextFont Color
Active Conversation - Info Screen
8.1Close ButtonSee Global Setting
Active Conversation - Terms & Conditions
Terms & Conditions, Privacy Policy TextFont Size, Style, Alignment
Terms & Conditions LinkColor
Privacy Policy LinkColor
Conversation Ended - Get Transcript Screen
9.1Back to Website ButtonSee Global Setting
9.2Email Transcript Form TextFont Color
9.3Email Transcript Form BorderColor, Weight
9.4Email Transcript ButtonSee Global Setting
Agent Unavailable
10.1Contact Form Header TextFont Color
10.2Contact Form BorderColor, Weight
10.3Email Transcript ButtonSee Global Setting

Download Mobile Consumer Client Custom CSS Default Template