Customizing the Chat Icon

The chat icon is the floating trigger button visitors click to open your Synaptiq widget. It is the single most visible element of your chat experience -- always present in the corner of the page -- so getting it right matters for engagement rates.

All icon settings are in Admin Dashboard > Settings > Widget > Chat Icon.

Default Icon Options

Synaptiq includes a set of built-in icons you can select without uploading anything.

| Icon | Description | Best For | |---|---|---| | Chat bubble | Classic speech bubble outline | General-purpose, universally recognized | | Message dots | Speech bubble with animated typing dots | Emphasizing AI/live conversation | | Headset | Support headset silhouette | Customer support use cases | | Spark | Lightning spark icon | AI-forward branding | | Wave | Hand wave emoji-style icon | Friendly, casual tone |

Select any default icon from the Icon Style dropdown. The icon renders as an SVG inside the trigger button, inheriting your theme's white-on-primary color scheme.

Uploading a Custom Icon or Avatar

To use your own image -- such as a company logo, mascot, or team photo -- upload it in Chat Icon > Custom Image.

Requirements

• Format: PNG, SVG, or WebP. SVGs scale best at every resolution.
• Dimensions: Minimum 96x96 pixels. Recommended 192x192 for crisp rendering on high-DPI displays.
• File size: Under 100 KB. The image is inlined as a base64 data URI inside the widget bundle, so smaller is better for load performance.
• Transparency: Use a transparent background if you want the primary color button surface to show through. Use an opaque background if the image should fill the entire button.

Upload Steps

1. Go to Settings > Widget > Chat Icon.
2. Click Upload custom image.
3. Select your file. The preview updates immediately.
4. Adjust the Image fit setting:
   • Cover -- image fills the button, cropping edges if needed.
   • Contain -- image fits entirely inside the button with padding.
5. Click Save.

<!-- You can also pass a custom icon URL via the embed script -->
<script
  src="https://synaptiqintel.com/widget.js"
  data-synaptiq-id="YOUR_WORKSPACE_ID"
  data-icon-url="https://yoursite.com/assets/chat-avatar.png"
></script>

When data-icon-url is set, it overrides both the dashboard default icon and any uploaded custom image.

Icon Size

The trigger button diameter defaults to 60px on desktop and 52px on mobile. You can adjust this in the Icon Size slider, which accepts values between 40px and 80px.

| Size | Diameter | Use Case | |---|---|---| | Small | 40 - 48px | Minimal footprint, content-heavy pages | | Medium (default) | 52 - 60px | Balanced visibility and space | | Large | 64 - 80px | High-engagement pages, large screens |

<!-- Override size via embed attribute -->
<script
  src="https://synaptiqintel.com/widget.js"
  data-synaptiq-id="YOUR_WORKSPACE_ID"
  data-icon-size="72"
></script>

Keep in mind that on viewports narrower than 480px, Synaptiq automatically scales the icon down by 15% to avoid covering content. The data-icon-size value sets the desktop baseline; the mobile reduction is applied on top of it.

Icon Shape

Choose between three shape options under Icon Shape:

Circle (Default)

A fully rounded button (border-radius: 50%). The most common choice and instantly recognizable as an interactive element.

Rounded Square

A squircle with border-radius: 16px. Feels modern and pairs well with design systems that use rounded rectangles (iOS-style interfaces, for example).

Square

Sharp corners with border-radius: 4px. Use this when your site's design language is geometric and minimal.

<!-- Shape via embed attribute: circle | rounded | square -->
<script
  src="https://synaptiqintel.com/widget.js"
  data-synaptiq-id="YOUR_WORKSPACE_ID"
  data-icon-shape="rounded"
></script>

Animation Settings

A subtle animation on the trigger button draws attention without being disruptive. Configure this under Icon Animation.

Pulse

A gentle radial pulse that emanates from the button every 4 seconds. The pulse ring uses your primary color at 30% opacity. This is the default animation.

/* What the pulse animation looks like under the hood */
@keyframes synaptiq-pulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--synaptiq-primary-rgb), 0.3); }
  70% { box-shadow: 0 0 0 14px rgba(var(--synaptiq-primary-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--synaptiq-primary-rgb), 0); }
}

Bounce

A vertical bounce that fires once when the page loads and again after 30 seconds of inactivity. Good for prompting engagement on landing pages.

None

No animation. The button sits static in the corner. Choose this for professional or enterprise contexts where motion might feel out of place.

Delay and Frequency

• Animation delay: How long after page load before the first animation fires. Default is 2 seconds.
• Repeat interval: Time between pulse or bounce cycles. Default is 4 seconds for pulse, 30 seconds for bounce.

Both values are configurable in the dashboard or via embed attributes:

<script
  src="https://synaptiqintel.com/widget.js"
  data-synaptiq-id="YOUR_WORKSPACE_ID"
  data-animation="pulse"
  data-animation-delay="3000"
  data-animation-interval="5000"
></script>

Values are in milliseconds.

Notification Badge

The notification badge is the small red dot or counter that appears on the top-right corner of the trigger button. It signals unread messages to the visitor.

Badge Modes

| Mode | Behavior | |---|---| | Dot | A solid red circle appears when there are unread messages. No number displayed. | | Count | Displays the number of unread messages (e.g., "2"). Maxes out at "9+". | | Off | No badge. Visitors see no unread indicator. |

Set badge mode in Settings > Widget > Chat Icon > Notification Badge.

Badge Color

The badge defaults to #EF4444 (red). You can change it to any hex value. If your primary color is already red, consider using a contrasting badge color like white or yellow so it remains visible.

Proactive Message Badge

When you configure a proactive greeting message (under Settings > Widget > Behavior), the badge appears even if the visitor has never opened the widget. This signals "we have something to say" and can increase open rates by 15-25% based on aggregate Synaptiq customer data.

<!-- Disable badge entirely via embed -->
<script
  src="https://synaptiqintel.com/widget.js"
  data-synaptiq-id="YOUR_WORKSPACE_ID"
  data-badge="off"
></script>

Putting It All Together

Here is a complete embed snippet that configures a custom avatar, rounded square shape, bounce animation, and count-style badge:

<script
  src="https://synaptiqintel.com/widget.js"
  data-synaptiq-id="YOUR_WORKSPACE_ID"
  data-icon-url="https://yoursite.com/assets/bot-avatar.svg"
  data-icon-size="64"
  data-icon-shape="rounded"
  data-animation="bounce"
  data-animation-delay="2000"
  data-badge="count"
></script>

Troubleshooting

• Icon not updating after upload: Clear your browser cache or open an incognito window. The widget CDN caches assets for up to 5 minutes.
• Custom image looks blurry: Upload a higher-resolution source (at least 192x192) and use SVG when possible.
• Animation feels aggressive: Increase the repeat interval to 10000ms or higher, or switch to "none."
• Badge showing on every page load: Check if you have a proactive message configured. If the proactive message fires before the visitor opens the widget, the badge appears immediately.

Next Steps

With your icon configured, move on to Position and Sizing Options to control where the widget appears on the page and how large the chat window opens.