Launcher Styles
Customize the chat launcher button appearance.
Launcher Types
Icon Only
A simple icon button:
- Chat bubble icon
- Primary color background
- Clean, minimal look
Icon + Text
Icon with a text label:
Text: "Chat with us"
Position: Right of icon (LTR) or Left (RTL)
Custom Image
Use your own launcher image:
- Supported formats: PNG, SVG, GIF
- Recommended size: 56x56px or 64x64px
- Will replace the default icon
Icon Options
Default Icons
Choose from built-in icons:
| Icon | Description |
|---|---|
| Chat Bubble | Classic chat icon (default) |
| Message | Message/envelope style |
| Support | Headset/support icon |
| Question | Help/question mark |
| Smile | Friendly face icon |
Custom Icon
Upload your own SVG icon:
- Go to Settings → Widget → Launcher
- Click "Upload Custom Icon"
- Select your SVG file
- Preview and save
SVG Requirements:
- Single color (will be filled with white)
- 24x24 viewBox recommended
- Simple paths for clarity
Size Options
| Size | Dimensions | Best For |
|---|---|---|
| Small | 48x48px | Minimal footprint |
| Medium | 56x56px | Default, balanced |
| Large | 64x64px | High visibility |
Colors
Background Color
By default, uses your primary color. Can be overridden:
Background: #7C3AED (or any hex color)
Icon Color
Icon color is automatically set for contrast:
- Light backgrounds: Dark icon
- Dark backgrounds: White icon
Hover State
On hover:
- Slight scale increase (1.05x)
- Background color darkens
- Subtle shadow added
Text Label
When using Icon + Text:
| Setting | Options |
|---|---|
| Text | Custom text (max 20 chars) |
| Font Size | 12-16px |
| Text Color | Auto (contrast) or custom |
| Position | Right, Left, Below |
Examples:
- "Chat with us"
- "Need help?"
- "Live Chat"
- "Talk to Sales"
Badge
Unread message badge:
| Setting | Description |
|---|---|
| Show Badge | Display unread count |
| Position | Top-right corner |
| Max Count | Display "9+" for 10+ |
| Color | Red (default) or custom |
Badge Animation
When a new message arrives:
- Bounce animation
- Pulse effect
- Sound notification (if enabled)
Animation
Entrance Animation
When the launcher first appears:
| Animation | Description |
|---|---|
| None | Appears immediately |
| Fade | Fades in smoothly |
| Slide | Slides in from edge |
| Bounce | Bounces into view |
| Pop | Scales up from small |
Idle Animation
Subtle animation to draw attention:
| Animation | Description |
|---|---|
| None | Static |
| Pulse | Gentle pulse effect |
| Wiggle | Slight rotation |
| Float | Subtle up/down |
Tip: Use idle animations sparingly to avoid annoying visitors.
Shadow
Add depth with shadows:
| Level | Effect |
|---|---|
| None | No shadow |
| Subtle | Light shadow |
| Medium | Moderate shadow (default) |
| Strong | Prominent shadow |
Border
Optional border around the launcher:
Border: None (default)
Border: 2px solid white
Useful for ensuring visibility on varied backgrounds.
Responsive Behavior
Mobile
On mobile devices:
- Size may adjust for touch targets (min 44x44px)
- Position respects mobile safe areas
- Badge scales appropriately
Hidden States
The launcher can be hidden:
- Via JavaScript API:
Fyncall.hideLauncher() - On specific pages
- Based on conditions (cart empty, etc.)
Example Configurations
Minimal
Type: Icon Only
Size: Small
Icon: Chat Bubble
Animation: Fade
Shadow: Subtle
Engaging
Type: Icon + Text
Size: Medium
Text: "Chat with us"
Animation: Bounce
Idle: Pulse (every 30s)
Shadow: Medium
On-Brand
Type: Custom Image
Size: Large
Image: Your branded launcher.png
Animation: None
Shadow: Strong