Styles and Appearance
You can fully customize the look and feel of your Knock Knock App widget so it matches your brand and fits naturally on your website. All appearance settings are found under Settings > Widget > Styles & Appearance.
Choosing a Widget Style
Knock Knock App offers six widget styles. Each one controls how the widget first appears to your visitors before they interact with it.
| Style | Description |
|---|---|
| Ultimate | A large, expanded card with video preview, team photos, and action buttons. Makes a bold first impression. |
| Smart | A medium-sized compact card with branding, action buttons, and a live badge. Balanced and professional. |
| Mini | A small circular icon or avatar that expands on click. Stays out of the way until needed. |
| Bubble | A floating circular button with a customizable label. Familiar and widely used across websites. |
| Bar | A thin horizontal bar at the bottom of the page. Especially popular on mobile sites. |
| AI Voice | A full-screen immersive voice interface with animated waveforms. Built for hands-free conversations. |
To change your widget style, click on the style you want. The change takes effect immediately in the preview panel on the right side of the screen.
Not sure which style to pick? Start with Smart for a clean, professional look that works on most websites. You can always switch later without losing any of your other settings.
Color Customization
You can adjust several color settings to make the widget feel like a natural part of your website.
Primary Color
The primary color controls the main accent color of your widget. This affects the widget background, header area, and overall theme. Click the color swatch to open the color picker, or type in a specific hex code.
Text Colors
You can set the color for text that appears on the widget, including headings, subheadings, and body text. Choose colors that contrast well with your primary color so everything is easy to read.
Button Colors
Each communication channel has its own button, and you can customize the color for each one individually:
- Video button — The button visitors click to start a video call
- Audio button — The button visitors click to start an audio call
- Chat button — The button visitors click to open the chat
This lets you visually distinguish between channels or keep them uniform to match your brand palette.
Make sure your button colors stand out against the widget background. Visitors are more likely to engage when the action buttons are clearly visible.
Company Logo
You can upload your company logo to display on the widget. Your logo appears in the header area of the widget, reinforcing your brand identity every time a visitor sees it.
To upload your logo:
- Go to Settings > Widget > Styles & Appearance
- Find the Company Logo section
- Click the upload area or drag and drop your image file
- Your logo appears in the live preview immediately
Supported image formats include PNG, JPG, and SVG. For best results, use a square or horizontal logo with a transparent background.
Live Preview
As you adjust your settings, a live preview panel on the right side of the screen shows you exactly how the widget will look to your visitors. You do not need to save and check your website — every change updates in real time.
Desktop and Mobile Toggle
At the top of the preview panel, you can switch between desktop and mobile views. This helps you confirm that your widget looks great on both screen sizes before you publish any changes.
- Desktop preview shows the widget as it appears on a laptop or monitor
- Mobile preview shows the widget as it appears on a phone screen
Always check the mobile preview before saving. Some styles that look great on desktop may feel too large on smaller screens, so you may want to consider a more compact style for mobile-heavy audiences.
Widget Positioning
You can choose where the widget appears on your website by selecting one of two positions:
- Bottom-left corner — The widget appears in the lower-left area of the page
- Bottom-right corner — The widget appears in the lower-right area of the page
Most websites place the widget in the bottom-right corner, but you should choose whichever position avoids overlapping with other elements on your site.
Widget Arrow Customization
Widget arrow color customization is planned for a future release. You will be able to match the widget arrow to your brand colors for a fully consistent look.
Next Steps
Once your widget looks the way you want, head over to Channels to configure which communication options your visitors see.