MARKETPLACE
PLUGINS
FLOATING AI ASSISTANT
Floating AI Assistant logo

Floating AI Assistant

Published March 2026
   •    Updated March 2026

Plugin details

Floating AI Assistant gives your Bubble app a professional AI-powered chat widget that sits in the corner of every page. Visitors can open it, ask questions, and get instant AI responses — all without leaving your app.
No complicated setup. No monthly platform fee. Just drop the element on your page, add your OpenRouter API key, and your AI assistant is live.

Key Features

- Floating chat button — sits fixed in the bottom right or bottom left corner of your page
- Custom avatar — upload your brand image or logo and it shows in the header and next to every assistant message
- Animated typing dots — three bouncing dots appear while the AI is thinking so users always have feedback
- Typewriter effect — AI replies appear letter by letter for a natural conversational feel
- Custom personality — write a system prompt to give your assistant a name, role, and behavior
- Welcome message — greet visitors automatically when they open the chat
- Conversation history — the assistant remembers the full conversation within the session
- Fully customizable — set accent color, assistant name, position, avatar and welcome message from the Bubble editor
- Works with 100+ AI models via OpenRouter — Claude, GPT-4, Gemini, Llama, Mistral and more
- Exposed states for is_open and last_response to build workflows around

Perfect For

- SaaS apps that need an onboarding assistant
- Agency websites built on Bubble
- E-commerce platforms needing a product assistant
- Client portals with a support bot
- Any Bubble app that wants to add AI without building a full chat UI from scratch

How It Works

1. Install the plugin and drop the element anywhere on your page
2. Enter your OpenRouter API key and write a system prompt describing your assistant
3. Set your accent color, avatar image URL, assistant name and welcome message
4. Preview your page — the floating button appears instantly
5. Click it to open the chat and start talking to your AI

$300

One time  •  Or  $10/mo

stars   •   0 ratings
0 installs  
This plugin does not collect or track your personal data.

Platform

Web & Native mobile

Contributor details

Unique Hub logo
Unique Hub
Joined 2021   •   7 Plugins
View contributor profile

Instructions

Step 1 — Install and add the element Install the plugin from the Bubble marketplace. Drag the Floating AI Assistant element onto your page. The size and position of the element on the canvas does not matter — the widget always appears fixed in the corner of the browser window.

Step 2 — Configure your assistant
In the Appearance tab fill in the following:
- api_key: Your OpenRouter API key from openrouter.ai
- assistant_name: The name shown in the chat header. Example: Aria
- system_prompt: Describe your assistant's personality, role and behavior
- welcome_message: The first message shown when a user opens the chat
- accent_color: Your brand color for the header, button and user bubbles
- position: Choose bottom-right or bottom-left
- assistant_avatar: Paste a direct image URL for your brand avatar. Leave empty for the default robot emoji

Step 3 — Get your OpenRouter API key
Go to openrouter.ai and create a free account. Navigate to API Keys and create a new key. Paste it into the api_key field. Free models are available with no payment required.

Step 4 — Choose your AI model
Paste a model ID into the model field. Recommended free models:
- qwen/qwen-2.5-7b-instruct:free
- mistralai/mistral-7b-instruct:free
- meta-llama/llama-3.1-8b-instruct:free
Leave the field empty to use the default model.

Step 5 — Preview and test
Hit Preview in Bubble. The floating button appears in your chosen corner. Click it to open the chat. Type a message and press Enter or click the send button. The assistant will respond within a few seconds.

Step 6 — Use exposed states
- is_open: Returns yes when the chat is open. Use this to trigger workflows or show elements when the chat is active.
- last_response: Returns the most recent AI reply as text. Use this to save conversations to your database or trigger follow up actions.

Notes
- The assistant remembers the full conversation history within a single page session
- Refreshing the page resets the conversation
- For best results write a detailed system prompt that explains exactly who the assistant is and what it should help with
- If a free model returns an error try switching to qwen/qwen-2.5-7b-instruct:free which is currently the most stable free model

Types

This plugin can be found under the following types:
Element

Categories

This plugin can be found under the following categories:
AI   •   Chat   •   Customer Support   •   Visual Elements

Resources

Support contact
Documentation
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble logo
Product
AI
Mobile
Design
Data
Logic
Collaboration
Security
Status
Release notes
Bubble for
Founders
Developers
Agencies
Enterprise
Discover
How Bubble works
Examples
Pricing
Learn
Academy
Technical guides
Blog
How to build
Coaching
Resources
Connect to AI
Marketplace
Templates
Plugins
Experts
Bootcamps
Certification
Partnerships
Affiliates
Figma to Bubble
Community
Bubble community
Forum
Newsletter
Podcast
Ideaboard
Early access
Store
Company
About
Careers
Brand guidelines
Support
Contact us
Legal
Terms
Privacy
©  2026, Bubble Group, Inc. All rights reserved.
Bubble
Pricing
Enterprise
Contact sales