A no-code AI chat interface for Framer, powered by Gemini API.
Introduction
River Chat Bot is a no-code AI chat interface built for Framer, powered by Gemini API.
Customize every detail — from tone, layout, to visual identity — for your brand.
It’s ideal for websites needing quick, intelligent user assistance while remaining fully adaptable to different visual styles, interaction patterns, and use cases.
🔧 Core Functionality
Settings |
|---|
Description
API Key
Paste your Gemini API key. Required to activate the bot.
Model
Choose AI model (e.g., Flash 2.5 Lite) to balance speed and quality.
Max Characters
Limit bot response length. Great for controlling verbosity.
System Prompt
Define the bot’s role and tone. Example: “You are a friendly assistant helping users navigate the site.”
Allow Images
Enable/disable image responses. Ideal for visual-rich interactions.
💬 Chat Behavior
Settings |
|---|
Description
Bot Name
Display name in header and About section.
Welcome Message
First message users see when chat opens.
Input Placeholder
Placeholder text in input field.
Initially Open
Choose whether chat starts open or closed when page load.
Typing Speed
Adjust typing delay (lower = faster). Recommended: 24–50. This in ms (mili second)
📐 Layout & Sizing
Settings |
|---|
Description
Chat Width
Chat window width (px).
Chat Height
Chat window height (px).
Border Radius
Roundness of chat container corners.
Icon Size
Size of chat icon (px).
🎨 Visual Styling
Settings |
|---|
Description
Icon Background
Bot icon background.
Icon Color
Bot icon color.
Background
Chat window background.
User Message
User bubble color.
User Text
Text color inside user bubble.
Bot Message
Bot bubble color.
Bot Text
Text color inside bot bubble.
Input Background
Input field background.
Input Text
Input text color.
Send Button
Button background color.
Send Button Text
Button text color.
Link Color
Hyperlink color.
🔤 Typography
Settings |
|---|
Description
Message Font
Used in chat bubbles.
Input Font
Used in input field.
🔗 Resource Links Item
Settings |
|---|
Description
Title
The name of the resource or link label that appears to users.
URL
The full web address of the link. Always include https:// so the link works correctly.
Image
(Optional) Add a small image or logo to represent the link. Works best with PNG icons.