Theming

In this guide, we’ll explore the Theming options in Web Conversations. The theming feature allows you to align the look and feel of your chatbot with your brand’s style and design guidelines. By customizing colors, dimensions, and other visual elements, you can ensure your chatbot seamlessly integrates into your website’s overall design. Let’s get started!

Step 1: Access the Theming Section

To begin customizing your chatbot’s appearance:

1. Navigate to the Theming section in the left-hand menu of the Web Conversations editor.

2. This is where you can configure the visual appearance of your web chatbot.

Step 2: Customize Theme Colors

The Theme Colors option allows you to set the primary colors of your chatbot. Here’s how to adjust them:

1. Click on Theme Colors to open the color settings.

2. Add your brand’s primary color and UI colors by entering their HEX codes. Alternatively, you can select a color from the color palette by clicking the color swatch next to the option.

3. Any changes you make will be immediately visible in the Preview Window on the right-hand side.

For example:

• Enter http://CM.com ’s signature purple by pasting the HEX code ‘#6610F2’ into the brand color field.

If you’re not happy with your changes:

• Use the Reset option to revert back to the original values.

Step 3: Adjust System Colors for Accessibility

Based on the theme colors you set, the system will automatically generate Matching System Colors. These colors are designed to comply with WCAG contrast levels, ensuring readability for users, including those with moderately low vision.

1. If needed, fine-tune specific color elements in the System Colors section.

2. WCAG contrast values are displayed as you adjust colors, helping you ensure your chatbot meets accessibility standards.

Tip: For the best readability, adhere to the recommended minimum contrast values.

Step 4: Configure the Size Option

The Size Option allows you to adjust the overall dimensions of your floating web chatbot. Here’s how:

1. Use the slider to adjust the width and height of the chat window.

2. Alternatively, fine-tune the values by using the arrow keys on your keyboard.

Experiment with these settings to find the perfect dimensions that match your website’s layout and design.

Step 5: Add an Image or Logo

You can personalize your chatbot further by adding an Image or Logo. This image will appear in multiple places, including:

1. The title bar of the open chat window.

2. Alongside all interactions from the bot during conversations.

3. As the button to reopen the chat window when the interface is minimized.

To add an image:

• Enter the URL of the image in the designated field.

Step 6: Adjust the Z Index Setting

The Z Index Setting ensures that your chatbot interface is displayed on top of all other elements on your website. If your chatbot is being partially or completely hidden by other elements:

1. Increase the Z index value to bring the chatbot to the front.

Step 7: Customize the Border Radius

The Border Radius Setting allows you to adjust the roundness of the corners of your chat window. Here’s how:

1. Set the border radius to 0 pixels for squared corners.

2. Increase the pixel value for a more rounded appearance.

For example:

• Set the border radius to 20 pixels to give the chat window a softer, rounded look.

Step 8: Apply Custom CSS (Optional)

For advanced styling, you can use Custom CSS to fine-tune the design of your chatbot. This option allows you to:

• Adjust spacing.

• Add animations.

• Create custom hover effects.

If you’re not familiar with CSS, don’t worry! We’ve created a Knowledge Center article with examples of common CSS changes requested by our customers. You can find the article here:
[Link: https://knowledgecenter.cm.com/kc/custom-css-examples-for-web-conversations ]

Step 9: Save Your Changes

Once you’re happy with your customizations:

1. Click the blue Save button at the top of the screen to publish your changes.

2. Review your chatbot in the Preview Window to ensure it looks and functions as expected.

Congratulations!

You’ve now learned how to customize the Theming options in Web Conversations. By tailoring these settings, you can create a chatbot interface that not only looks great but also aligns perfectly with your brand’s visual identity.