You can customize your Secure Messenger window by using your own CSS code. Customizing with your CSS lets you deliver a consistent and professional image that resonates with your branding and website. 

This article introduces examples of customizing the Secure Messenger window with CSS code and steps you need to follow to customize the CSS. 

Read this to check our fully commented CSS file. 

Step by Step Instructions 

To customize the Secure Messenger window with CSS, follow these steps: 

1. Log in to your Comm100 Control Panel.  
2. From the left navigation menu, go to Ticketing & Messaging > Channels > Secure Messaging.
   
3. Click the Secure Messenger link or click the Edit icon in the Operations column.
   
   The General tab appears.
4. On the General tab, scroll down and expand the Customize Style with Your Own CSS drop-down.
   
   The CSS editor opens. 
5. On the CSS editor, you can customize the following with your own CSS:
   Note: You must add “!important” to any changes you make in the CSS to prioritize them over default branding and make them effective. 
   • Customize the Secure Messenger text font-size: You can change the text size to fit the text size of your website.

                      
                     
     html {                
      font-size: 20px !important;                
     }
     								

      
   • Customize the New Case button: You can customize the width, height, text color, and background color of the New Case button.
     

      							                
     .newCaseButton {               
       width: 200px !important;               
       height: 100px !important;               
       color: green !important;                
       background-color: Yellow !important;                
     }                  							  

     
   • Change the background color of the message bubble for agent and visitor.  

      
             
     .messageBubble--agent .messageContainer {       
       background-color: orange !important;       
     }        
     .messageBubble--visitor .messageContainer {       
       background-color: pink !important;               
     } 

     
     
   • Change the text font: You can change the text Font to fit the font used on your website.  

      
                     
     body { 
             font-family: Times New Roman, system-ui, -apple-system, BlinkMacSystemFont, Times, Arial, serif !important;                
     }   

     
6. Click Save.  

You can see the changes in the Preview window or click the Live Preview link to see them.