Skip to main content
No external setup needed. The website channel requires no external account setup. You can configure and deploy your chat widget entirely from the Revve dashboard.
The Appearance tab in your website Chat Agent lets you control how the chat widget looks and behaves on your site. You can customize colors, sizing, position, and even inject custom CSS for complete control over the widget’s appearance. To access these settings, navigate to Agents > Chat Agents, select your website Chat Agent, and click the Appearance tab.
You must click Start Editing to make changes. When finished, click Stop Editing and then Release Lock so other team members can edit.

​
Widget Appearance and Behavior

This is the primary section for configuring the widget’s visual identity. Widget Appearance & Behavior settings showing avatar, primary color, and auto-open toggle

​
Tips

  • Choose a primary color that matches your brand and provides good contrast for readability.
  • Use the auto-open feature selectively — it works well on high-intent pages like pricing or contact pages, but may feel intrusive on blog posts or landing pages.

​
Advanced Styling Options

For teams that need pixel-perfect control, the Advanced Styling section provides two CSS editors. Advanced Styling Options with Widget CSS and Chat Interface CSS editors

​
Tips

  • Click Load Sample CSS to see all available CSS selectors before writing your own styles.
  • Test your custom CSS across different screen sizes to ensure it looks good on both desktop and mobile.
  • Custom CSS is applied on top of the default styles, so you only need to specify the properties you want to override.

​
Widget Size Configuration

Control how large the chat widget appears on both desktop and mobile devices. Widget Size Configuration showing initial size, auto-expand, and expanded size settings

​
Initial Size

The initial size defines the dimensions of the chat widget when it first appears (before the user interacts with it).

​
Auto-expand After First Message

When enabled, the widget automatically expands to the “Expanded Size” after the first message is sent or received. You can control this separately for desktop and mobile.

​
Expanded Size

The expanded size defines the widget dimensions after it auto-expands (if enabled).

​
Tips

  • On mobile, using 100% width and 100vh height provides a full-screen chat experience, which is typically the best user experience on small screens.
  • The initial size should be compact enough to not obstruct your website content, while the expanded size should be large enough for comfortable conversation reading.

​
Visibility Settings

Control what percentage of your website visitors will see the chat widget. Visibility Settings with percentage control

​
Tips

  • Use visibility percentage for A/B testing — show the widget to a subset of visitors to measure its impact on conversions.
  • Set to 0 to temporarily hide the widget without removing the installation code from your website.
  • This setting works on a per-visitor basis using randomization, so the same visitor may or may not see the widget across different sessions.

​
Next Steps