IntelliTicks
  • Introduction
  • Getting Started
    • Overview
    • Build your first playbook
      • Start with Pre-build Templates
      • Start from scratch
  • Installation
    • IntelliTicks Plugin Script
    • Plugin Installation
  • Facebook Messenger Bot
    • Getting Started
      • Connect Facebook Page
      • Link Playbook to Messenger
    • Testing FB Messenger Bot
  • WhatsApp Bot
    • Benefits of WhatsApp Chatbots
    • Getting Started
    • FAQs
  • AI Builder
    • Playbooks
    • Nodes
      • Add and Send Data
        • Text
        • Image
        • Links
        • Youtube
        • Gallery
        • Dynamic Node
      • Collect User Data
        • Quick Reply
        • Form
        • Datepicker
        • Web View
        • Payment
        • Rating
        • Slider
        • Ask Question
        • Mutli Selection Reply
        • Quick Reply (with branches)
      • Redirect Users
        • URL redirect
        • Conditional branching
        • Go to Playbook
        • Jump to node
      • Export & Import
        • JSON API
      • Connect Users To A Human
        • Notify Agent
        • End Automation
      • Additional
        • Wait
        • Client Javascript
        • Actions
    • Actions
    • FAQ Training
    • Keyword Training
    • Advanced
      • Advanced Actions
  • Flash Responses
    • Flash Response
    • Create Flash Response
    • Using Flash Response
  • Customizing Platform
    • Widget
      • Theme Customization
      • Chat Widget Texts in Local Language
      • Adding Start Over button
      • URL Rules
      • Advanced Customization
        • How to Easily Add Custom CSS to Chat Widget
    • Chat icon/Bot Profile Photo
    • Different chatbot on each URLs
  • Integrations
    • WordPress Integration
    • Shopify Integration
    • Shopify Installation via Private Apps
    • Google Analytics
    • Magento Integration (1.x)
    • Magento Integration (2.x)
    • LeadSquared Integration
    • Marketo Integration
    • Salesforce Integration
    • Zapier Integration
      • Data Available in Zapier
    • Zoho CRM Integration
    • Wix Integration
    • Custom/in-house CRM integration
  • How to
    • Change the Default Playbook
    • Schedule meetings on calendar
      • How to integrate calendly for meetings
      • How to integrate Acquity for meetings
      • How to Integrate YouCanBook for meetings
    • Block a User
    • Delete a User
    • Hide trigger message from website
    • How to show chatbot in right middle of website
    • Start chatbot on a button click
    • Create chatbot landing page
    • Customize Landing Page Link
    • Enable Notifications on browser
    • Popup bot on Facebook page automatically
    • How to send data to chatbot via Javascript
  • Growth Hacks
    • Facebook Retargeting
    • Messenger Ads to chatbot
  • Troubleshooting
    • Messenger Bot is not working as expected
    • How do I remove the Messenger app in Shopify?
    • Push Notification Issues
  • Partnerships
    • White-labeled Chat Platform
    • Affiliate Partnership
  • Miscellaneous
    • Languages Supported
Powered by GitBook
On this page
  • Changing look-and-feel using Custom CSS
  • Steps to add your Custom CSS
  • Examples of Custom CSS change

Was this helpful?

  1. Customizing Platform
  2. Widget
  3. Advanced Customization

How to Easily Add Custom CSS to Chat Widget

Sometimes you may find yourself needing to change the look and feel of your chat widget to match your website or web-app. For such needs, we have a Custom CSS option available for you.

PreviousAdvanced CustomizationNextChat icon/Bot Profile Photo

Last updated 4 years ago

Was this helpful?

Changing look-and-feel using Custom CSS

Steps to add your Custom CSS

  1. Add your Custom CSS and save.

  2. You are done.

Examples of Custom CSS change

1. Changing Bot's Text

To change bot or agent's text, modify classes ".agent .iticks-message-text"

For example - To change the bot's text color to blue and capitalize all words, we can use this custom CSS.

.agent .iticks-message-text {
    color: blue;
    text-transform: uppercase;

}

From

To

2. Changing Submit button of Form Node

To change the submit button of the Form node, modify class ".it-button"

For example - To change the background and text color of Submit button, we can use this custom CSS.

.it-button {
    background: burlywood;
    border: burlywood;
    color: black;
}

From

to

3. Changing Quick Reply node's buttons

To change the buttons of the QuickReply node, modify class ".qrnode"

For example - To change the background and text color of the QuickReply node's button, we can use this custom CSS.

.qrnode {
   background: chartreuse;
   border: 1px solid black;
   color: black;
}

From

to

Login to

Go to Settings > Chat widget >

Admin Portal
Custom CSS
âž¡