Chatbot Assistant

A draggable interactive widget by Aidan Looker

Show PreviewBuy for $9
Chatbot Assistant

About Chatbot Assistant

What is Chatbot Assistant?

Chatbot Assistant is a premium, interactive widget that lives on top of your site. It features a draggable avatar with physics-based motion, an expandable content panel, and intelligent screen-edge docking. Ideal for SaaS onboarding, product tours, contextual tips, and simulated chat support on marketing pages, landing pages, and web apps.

Core Features

  • 8 distinct persona styles including Professional (with photo upload), Chat Bot, Helper Bot, Notify Chat, Chat, Messenger, Monogram, and Shield - each with unique, SVG icons

  • 3 content modes: rotating Tips carousel, step-by-step Onboarding wizard with progress tracking, and interactive Chat with pre-set prompt and answer pairs

  • Full drag-and-drop with physics-driven springs, automatic edge docking after idle, configurable sleep mode with fade animation, and gentle breathing wobble

  • Smart panel positioning that dynamically opens above or below the avatar based on viewport location, with arrow nub indicator and glassmorphism, dark, or custom panel styles

  • Responsive design with mobile-aware avatar sizing, viewport-safe panel placement, and hover or tap expansion triggers

Controls inside Framer

Top-Level

  • Content mode (Tips, Onboarding, Chat)

  • Persona style (8 options)

  • Initial position (Bottom Right, Bottom Left, Top Right, Top Left, Center)

  • Avatar photo upload (Professional persona)

  • Icon color (non-Professional personas)

  • Badge color (Notify Chat persona)

Content

  • Tips array (up to 10 items)

  • Onboarding steps array (up to 8 steps)

  • Chat prompts array with question and answer pairs (up to 6)

Behavior

  • Auto Dock toggle

  • Dock Delay (3-30 seconds)

  • Sleep Delay (10-120 seconds)

  • Open on Hover toggle

  • Glow toggle and intensity (5-60%)

  • Wobble intensity (0-100%)

Appearance

  • Avatar Size (32--72px)

  • Panel Width (220--400px)

  • Panel Style (Dark, Glassmorphism, Custom)

Colors (Custom panel style)

  • Primary, Chat Bubble, Text, Panel Background, Close Icon, Close Background, and Glow Color

Typography

  • Heading Font

  • Body Font

Best use cases

  • SaaS onboarding flows that guide new users through key features with a step-by-step wizard

  • Marketing and landing pages that surface rotating tips or product highlights without interrupting the layout

  • Support and FAQ pages with a simulated chat experience using pre-defined prompt and answer pairs

  • Portfolio and agency sites that add a premium, interactive touch with a branded chatbot assistant

Drop it onto any Framer page, pick a persona, add your content, and publish. A polished, interactive chatbot assistant in minutes.

Questions or custom requests?