Custom CSS Examples for Web Conversations

Introduction

Customizing the appearance and behavior of your Web Conversations widget is a powerful way to align it with your brand and meet specific user experience requirements. Using Custom CSS, you can modify the widget’s position, visibility, animations, and more. This document provides practical examples of common customization requests from customers, along with explanations of how each CSS snippet works.

Whether you want to reposition the chat bubble, control its visibility, or adjust how notifications behave, these examples will help you achieve your desired look and functionality.

Why Use Custom CSS?

Custom CSS allows you to go beyond the default theming options in Web Conversations. It gives you full control over the widget’s design and behavior, enabling you to:

• Match the widget’s appearance to your website’s branding.

• Improve the user experience by tailoring the widget’s behavior to your audience’s needs.

• Optimize the widget for different devices, such as mobile phones or tablets.

• Solve specific design challenges, such as managing multiple notification bubbles or controlling animations.

By leveraging these CSS examples, you can create a more polished and user-friendly chat experience.

Use Cases and Examples

1. Repositioning the Chat Bubble

If you want the chat bubble to appear on the left side of the screen instead of the default bottom-right position, you can use the following CSS:

.wc-c-root {     
    z-index: 100;     
    position: fixed;     
    left: 0px;     
    bottom: 60px; 
}

• Explanation:

  • z-index: 100; ensures the widget appears on top of other elements on the page.

  • position: fixed; keeps the widget in the same position on the screen, even when scrolling.

  • left: 0px; places the widget at the left edge of the screen.

  • bottom: 60px; positions the widget 60 pixels above the bottom of the screen.

This customization is useful for websites where the bottom-right corner is already occupied by other elements or where a left-side placement better suits the design.

2. Hiding the Header Content

If you want to hide the header content of the chat widget, such as the title or subtitle, you can use the following CSS:

.wc-c-header__content { 
    display: none; 
}

• Explanation:

  • display: none; completely removes the header content from the widget.

  • This is useful if you want a minimalistic design or if the header content is redundant for your use case.

This customization is ideal for customers who prefer a cleaner interface without additional text or branding in the header.

3. Controlling Bubble Visibility

Variation 1: Fading Out

If you don’t want the chat bubble to remain visible indefinitely, you can make it fade out after a few seconds:

@keyframes bubbleFade {   
    0% { opacity: 1; }   
    100% { opacity: 0; visibility: hidden; } 
} 
.wc-c-notification {   
    animation: bubbleFade 5s 3s forwards !important; 
} 
.wc-c-notification.hidden {   
    display: none; 
}

• Explanation:

  • The bubble starts fully visible (opacity: 1) and fades to invisible (opacity: 0) over 5 seconds.

  • The animation starts after a 3-second delay.

  • visibility: hidden; ensures the bubble is no longer interactive after fading out.

  • forwards ensures the bubble remains in its final state after the animation ends.

This is ideal for reducing distractions on your website while still giving users a chance to notice the chat bubble.

Variation 2: Fading Out with Vertical Movement

To make the bubble fade out while moving upwards, use the following CSS:

@keyframes bubbleFadeMoveVertical {   
    0% { opacity: 1; transform: translateY(0); }   
    100% { opacity: 0; visibility: hidden; transform: translateY(-20px); } 
} 
.wc-c-notification {   
    animation: bubbleFadeMoveVertical 5s 3s forwards !important; 
} 
.wc-c-notification.hidden {   
    display: none; 
}

• Explanation:

  • The bubble fades out (opacity: 0) while moving up by 20 pixels (translateY(-20px)).

  • This creates a smooth and visually appealing exit animation.

Variation 3: Fading Out with Horizontal Movement

To make the bubble fade out while moving to the right, use this CSS:

@keyframes bubbleFadeMoveHorizontal {   
    0% { opacity: 1; transform: translateX(0); }   
    100% { opacity: 0; visibility: hidden; transform: translateX(40px); } 
} 
.wc-c-notification {   
    animation: bubbleFadeMoveHorizontal 5s 3s forwards !important; 
} 
.wc-c-notification.hidden {   
    display: none; 
}

• Explanation:

  • The bubble fades out (opacity: 0) while moving 40 pixels to the right (translateX(40px)).

  • This is useful for creating a dynamic and engaging animation.

Variation 4: Fading Out with Scaling Down

To make the bubble fade out while shrinking in size, use this CSS:

@keyframes bubbleFadeScale {   
    0% { opacity: 1; transform: scale(1); }   
    100% { opacity: 0; visibility: hidden; transform: scale(0.8); } 
} 
.wc-c-notification {   
    animation: bubbleFadeScale 5s 3s forwards !important; 
} 
.wc-c-notification.hidden {   
    display: none; 
}

• Explanation:

  • The bubble fades out (opacity: 0) while scaling down to 80% of its original size (scale(0.8)).

  • This creates a subtle and professional animation.

4. Customizing the Widget Border

If you want to remove the border around the chat widget or make it transparent, you can use the following CSS:

.wc-c-root { 
    border-color: transparent; 
}

• Explanation:

  • border-color: transparent; makes the border invisible while keeping the widget’s structure intact.

  • This is useful for creating a cleaner, more modern look that blends seamlessly with your website design.

This customization is particularly helpful for websites with minimalist designs or when the border clashes with the overall aesthetic.

5. Hiding the Notification Bubble Entirely

If you don’t want the notification bubble to appear at all, use this CSS:

.wc-c-notification {     
    display: none; 
}

This is useful for scenarios where you want to disable notifications entirely or rely solely on the chat widget for user interactions.

6. Managing Multiple Notification Bubbles

If your widget displays multiple notification bubbles but you want to limit it to just one, use this CSS:

.wc-c-notification__item:not(:first-child) {   
    display: none !important; 
}

• Explanation:

  • This ensures that only the first notification bubble is displayed, hiding any additional bubbles.

  • This is particularly helpful for mobile users, where multiple bubbles can take up too much screen space.

Conclusion

Custom CSS gives you the flexibility to tailor your Web Conversations widget to your exact needs. Whether you’re repositioning the chat bubble, controlling its visibility, or managing notifications, these examples provide a solid starting point for customization.

For more advanced use cases or assistance with CSS code, we recommend using an AI model like ChatGPT. It can help you generate, refine, and troubleshoot CSS code to achieve your desired results efficiently.

Please note that custom CSS is not actively supported by our team and is intended for advanced customers, such as those with a front-end development team. We encourage you to ensure your team has the necessary expertise before implementing custom CSS.