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
• Click-to-Call Window CSS Options
• Offline Contact Window CSS Options
• Agent Client Window CSS Options
• Mobile Consumer Client CSS Options

Instant Messaging Window CSS Options

Xref CSS Field Configuration Values A N/A Publisher Logo (Configured in Publisher Portal) B N/A Agent Image (Configured in Advertiser Portal) C N/A Agent Name (Configured in Advertiser Portal) D N/A Advertiser Name (Configured in Advertiser Portal) 1 SystemSpeakerName Full text control (size, font, color) 2 SystemMessageText Full text control (size, font, color) 3 FormBody Image 4 AgentSpeakerName Full text control (size, font, color) 5 AgentMessageText Full text control (size, font, color) 6 CustomerSpeakerName Full text control (size, font, color) 7 CustomerMessageText Full text control (size, font, color) 8 FooterLegal Text Positioning 9 LegalText Full text control (size, font, color) 10 Send Button Image 11 Close Button Image 12 ClickToCall Button Image 13 VoIP/Video Button Image 14 Consumer Hint Image 15 FooterBackground Image

Click-to-Call Window CSS Options
Xref CSS Field Configuration Values 1 FormBody Image 2 InputTable Full table control (background color, text color, alignment, margin, font) 3 CalloutConnect Image 4 FooterLegal Text Positioning 5 LegalText Full Text Control (size, font, color) 6 FooterBackground Image

Offline Contact Window CSS Options
Xref CSS Field Configuration Values 1 FormBody Image 2 StrongGreeting Full text control (size, font, color) 3 InputTable Full table control (background color, text color, alignment, margin, font) 4 OfflineContactSend Image 5 OfflineContactCancel Image 6 FooterLegal Text Positioning 7 LegalText Full text control (size, font, color) 8 FooterBackground Image

Agent Client Window CSS Options

Xref CSS Field Configuration Values 1 ChatDlg[NormalChat="false"] Background Color (Gradient Supported) Buttons Area 2 ConversationButtons_ConversationComplete Font (family, size, color, weight) 2 ConversationButtons_AnswerChat Button (size, color, radius corner, height, border) 2 ConversationButtons_Deny Button (size, color, radius corner, height, border) 2 ConversationButtons_Forward Button (size, color, radius corner, height, border) 2 ConversationButtons_EndChat Button (size, color, radius corner, height, border) Conversation Area 3 ConversationContainer Background Color 3 ConversationContainer_TranscriptHeader Font (family, size, color, weight) radius corners 3 ConversationContainer_MobileIndicator Image 3 ConversationContainer_ChatEdit Background color, height 3 ConversationContainer_CustomerStatus Font (family, size, color, weight) 3 ConversationContainer_HideLeftPane Font color 3 ConversationContainer_PoweredBy Image (must choose black or white version) Message Transcript 4 AgentMessage Font (family, size, color, weight), background color, margin bottom 4 AgentMessage .SpeakerName Font (family, size, color, weight) 4 AgentMessage .MessageTime Font (family, size, color, weight) 4 AgentMessage .MessageText Font (Size, color, weight) 4 CustomerMessage Font (family, size, color, weight), background color, margin bottom 4 CustomerMessage .SpeakerName Font (family, size, color, weight) 4 CustomerMessage .MessageTime Font (family, size, color, weight) 4 CustomerMessage .MessageText Font (family, size, color, weight) 4 SystemMessage Font (family, size, color, weight), background color, margin bottom 4 SystemMessage .SpeakerName Font (family, size, color, weight) 4 SystemMessage .MessageTime Font (family, size, color, weight) 4 SystemMessage .MessageText Font (family, size, color, weight) Shortcuts Pop Up 5 ShortcutsPopup_Title Font (family, size, color, weight), background color, min-height 5 ShortcutsPopup_ShortcutWidget Background color, width 5 ShortcutsPopup_ShortcutButton Font Size 5 ShortcutsPopup_CategoryTitle Font Size 5 ShortcutsPopup_Separator Line (Size, Color, Pattern) 5 ShortcutsPopup_CategoryShortcutButton Button (Size, Color, Pattern) 5 ShortcutsPopup_CategoryShortcutText Font (Size, Color) Tab Area 6 QTabWidget#ChatDlg_tabLeftPane Border(size, color, pattern), background color 6 QTabWidget::pane Margin, Border(size, color, pattern, radius) 6 ChatDlg_tabLeftPane QTabBar::tab:first Font (family, size, color, weight) border radius 6 ChatDlg_tabLeftPane QTabBar::tab:last Font (family, size, color, weight) border radius 6 QTabWidget::pane Margin, Border(size, color, pattern, radius) 6 ChatDlg_tabLeftPane QTabBar::tab:selected Font (family, size, color, weight), border (size, color, pattern) Shortcuts Tab 7 ChatDlg_tabLeftPane QTabBar::tab Padding, Font, Border 7 ShortcutsTab_Separator Line color, thickness 7 ShortcutsTab_ShortcutButton Font size, weight 7 ShortcutsTab_CategoryButton Font size, weight 7 ShortcutsTab_CategoryButtonDropDownMenu Background color, border (size, color, pattern)

Mobile Consumer Client CSS Options

Xref CSS FIeld Configuration Values Global Styles Global Title Bar Background Color (Solid or Gradient) Global Background Color Solid or Gradient Global Button Border, Background Gradient, Shadow, Font Color, Background Image Pre-Conversation Screen 1 Pre-Conversation Prompt Screen This screen cannot be changed at this time. Connection to Agent Screen 2.1 Background Background Color 2.2 Connecting to Agent Text Font Color 2.3 Leave a Message Text Font Color 2.4 Background Image Visible or Not Visible Active Conversation - Title Bar 3.1 Info Button Enabled or Disabled 3.2 Gradient Background See Global Setting 3.3 Agent Name Text Font Color 3.4 Close Button See Global Setting 3.5 Background Image, Color Active Conversation - Agent Area 4.1 Background Gradient Top Color, Bottom Color 4.2 Agent Text Font Color 4.3 Send Button See Global Setting Active Conversation - Consumer Message 5.1 Border Color, Weight 5.2 Background Color 5.3 Divider Line Color, Weight 5.4 Speaker Role Text Font Color 5.5 Message Text Font Color Active Conversation - Agent Message 6.1 Border Color, Weight 6.2 Background Color 6.3 Divider Line Color, Weight 6.4 Speaker Role Text Font Color 6.5 Message Text Font Color Active Conversation - System Message 7.1 Border Color, Weight 7.2 Background Color 7.3 Divider Line Color, Weight 7.4 Speaker Role Text Font Color 7.5 Message Text Font Color Active Conversation - Info Screen 8.1 Close Button See Global Setting Active Conversation - Terms & Conditions Terms & Conditions, Privacy Policy Text Font Size, Style, Alignment Terms & Conditions Link Color Privacy Policy Link Color Conversation Ended - Get Transcript Screen 9.1 Back to Website Button See Global Setting 9.2 Email Transcript Form Text Font Color 9.3 Email Transcript Form Border Color, Weight 9.4 Email Transcript Button See Global Setting Agent Unavailable 10.1 Contact Form Header Text Font Color 10.2 Contact Form Border Color, Weight 10.3 Email Transcript Button See Global Setting

Download Mobile Consumer Client Custom CSS Default Template