Overlays supportchatfloating

Support Chat Bubble

Floating action triggered icon for chat or support requests.

We are online!
💬

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { SupportChatBubble } from 'astro-component-kit';
---

<HelpBubbleOverlay>Content</HelpBubbleOverlay>
--- import { SupportChatBubble } from 'astro-component-kit'; --- <HelpBubbleOverlay>Content</HelpBubbleOverlay>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/SupportChatBubble.astro and paste the following code:

astro 
---
---
<div class="help-bubble">
  <div class="tip">We are online!</div>
  <div class="icon">💬</div>
</div>
<style>
  .help-bubble { position: fixed; bottom: 2rem; right: 2rem; cursor: pointer; display: flex; align-items: center; gap: 1rem; z-index: 1000; }
  .icon { width: 55px; height: 55px; background: #6366f1; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; color: #fff; box-shadow: 0 10px 30px rgba(99,102,241,0.4); }
  .tip { background: #fff; color: #000; padding: 6px 12px; border-radius: 10px; font-size: 0.75rem; font-weight: 800; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
</style>
--- --- <div class="help-bubble"> <div class="tip">We are online!</div> <div class="icon">💬</div> </div> <style> .help-bubble { position: fixed; bottom: 2rem; right: 2rem; cursor: pointer; display: flex; align-items: center; gap: 1rem; z-index: 1000; } .icon { width: 55px; height: 55px; background: #6366f1; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; color: #fff; box-shadow: 0 10px 30px rgba(99,102,241,0.4); } .tip { background: #fff; color: #000; padding: 6px 12px; border-radius: 10px; font-size: 0.75rem; font-weight: 800; box-shadow: 0 5px 15px rgba(0,0,0,0.2); } </style>

Quick Info

Category
Overlays
Filename
SupportChatBubble.astro
Dependencies
None — pure Astro + CSS
Tags
supportchatfloating