nuxt-x-marketing
ModalChat
Floating chat-prompt overlay with avatar, online indicator, message, and action button — opens after a configurable delay.
ModalChat
A floating chat-prompt widget fixed to the bottom-right of the screen. Appears after delay milliseconds and auto-dismisses after autoDismiss ms (0 = never). Toggle visibility with v-model. Emits action when the CTA button is clicked.
Components
<XMarkModalChat />
A floating chat-prompt widget fixed to the bottom-right of the screen. Appears after delay milliseconds and auto-dismisses after autoDismiss ms (0 = never). Toggle visibility with v-model. Emits action when the CTA button is clicked.
<XMarkModalChat
v-model="chatOpen"
name="Alex from Support"
message="Hi there! 👋 Have questions about our pricing? I'm here to help."
avatar="/avatars/alex.jpg"
:online="true"
action-text="Start a conversation"
:delay="4000"
:auto-dismiss="0"
@action="openIntercom"
@dismiss="chatOpen = false"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | Boolean | false | Visibility (v-model) |
avatar | String | '' | Avatar image URL |
name | String | 'Support' | Agent or bot name |
message | String | Default greeting | Chat message text |
online | Boolean | true | Show green online indicator |
actionText | String | '' | CTA button label (hidden when empty) |
autoDismiss | Number | 0 | Auto-dismiss after N ms (0 = never) |
delay | Number | 3000 | Delay before showing (ms) |
Emits
| Event | Description |
|---|---|
update:modelValue | v-model sync |
action | CTA button clicked |
dismiss | Widget dismissed |
AI Context
category: Modal
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkModalChat
use-when: >
Adding a floating chat prompt overlay to key conversion pages. Appears
after a configurable delay to engage visitors without being immediately
intrusive.
typical-page-section: Persistent overlay on pricing, demo, and key conversion pages.