---
title: "Chatbot Assistant — Framer component · Best of Framer"
description: "$9.00 · Framer component · by Aidan Looker · Navigation. What is Chatbot Assistant?"
canonical: "https://framer.elliotli.dev/component/chatbot-assistant"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Chatbot Assistant

# Chatbot Assistant

A draggable interactive widget

[View on Framer](https://framer.com/marketplace/components/chatbot-assistant/?via=elliot-li)

![Chatbot Assistant preview image 1](https://framer.elliotli.dev/og/component/chatbot-assistant/b418afdbdb12c086/1600x1200.jpg)

## Summary

What is Chatbot Assistant?

## Description

## 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.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8vjwbcr2-RQLDut7AgLOovQEwgaJNpNG4n3n3B6)](https://teampixelau.lemonsqueezy.com/checkout/buy/3b016e8d-2ba4-4944-8431-e2c592334df1)

## 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?

-   We design and build custom Framer components. Get in touch at [contact@teampixel.com.au](mailto:contact@teampixel.com.au).
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #9928

## Details

- **Author**: Aidan Looker
- **Price**: $9.00
- **Published**: 2026-02-20
- **Updated**: 2026-06-13
- **Added**: 2026-02-18
- **Categories**: Navigation

## More like this

-   [Reveal Navigations](/component/reveal-navigations) — Design Supply · Free — A calmer way to open your menu
-   [Collapsible Sidebar](/component/collapsible-sidebar) — Marso Angelov · $10 — Responsive Side Navigation
-   [Dial Picker](/component/dial-picker) — Tanmay Kaper · $14 — A machined dial for your projects
-   [Expanding Side Menu](/component/expanding-side-menu) — Russet Supply · $5 — Animated Framer Navigation