nuxt-trigger-chat

Table of Contents

• Overview
• Installation
• Usage
  • Basic Setup
  • Props
• Webhooks data structure

Overview

nuxt-trigger-chat is a Nuxt 3 module that adds a floating chat component to the bottom right of your project, designed to work with an external AI agent.

No AI logic is included by default.

To make it functional, simply connect it to your own API or an external service like Make.com or n8n via a webhook.

See the Props section below to integrate it quickly.

Installation

Install the module:

npm install nuxt-trigger-chat

Usage

Basic Setup

Add the module to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['nuxt-trigger-chat']
})

Use the component in your page or layout:

<template>
  <TriggerChat />
</template>

With the basic usage, the chat isn’t connected to any agent, it will simply return a test message on each send.
To fully use nuxt-trigger-chat make sure to configure it using the props.

Props

Add your webhook URL and customize the chat to your needs using the available options.

<TriggerChat
  webhook-url="https://your-api.com/webhook"
  theme="dark"
  button="AI CHAT"
  title="My AI Assistant"
/>

| Prop | Type | Default | Description | |--------------|--------|----------------|----------------------------------------------| | webhook-url| String | - | API endpoint to receive user messages | | theme | String | 'light' | Chat theme. accepts 'light' or 'dark' | | button | String | 'AI CHAT' | Label displayed on the floating button | | title | String | 'AI Chatbot' | Header title displayed inside the chat window |

Webhooks data structure

Each time a user sends a message, an HTTP request is sent to the provided webhook URL.

The body of the request is a JSON object with the following structure:

| name | Type | |-----------|---------| | message | String | | id | String |

The id is automatically generated on the client side by the module. It identifies the user and allows your AI agent to maintain or restore conversation history.

Made for easy plug-and-play use with a clean UI.
Built️ by Fily """