---
title: "Contact Dock — Free Framer component · Best of Framer"
description: "Free Framer component · by BuiltByKern · Interactive. Contact Dock is a fixed-corner glass trigger that springs open a hello sheet — avatar, greeting, name, and up to three actions (book,…"
canonical: "https://framer.elliotli.dev/component/contact-dock"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Contact Dock

# Contact Dock

Floating contact button for sites.

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

![Contact Dock preview image 1](https://framer.elliotli.dev/og/component/contact-dock/7238bb15684e7d93/1600x1200.jpg)

## Summary

Contact Dock is a fixed-corner glass trigger that springs open a hello sheet — avatar, greeting, name, and up to three actions (book, email, tel, or any URL).

## Description

Contact Dock is a fixed-corner glass trigger that springs open a hello sheet — avatar, greeting, name, and up to three actions (book, email, tel, or any URL). Accent-tinted icons, CSS pulse rings, Radius and Blur controls, canvas-safe portal, Escape/outside close, and dialog focus management. Zero packages beyond framer + framer-motion. No Auto Demo — the pointer is the product.

Categories / tags: Components · Contact · FAB · Glass · Interaction · Motion · Utility · Accessibility · Booking · Email Features

-   Fixed corner dock (Left / Right) with safe-area insets
    
-   Up to 3 Channels (label, link, show, icon) with smart mailto/tel/URL
    
-   Appearance: Accent, Tint, Blur, Radius %, Size
    
-   CSS pulse rings + accent glow; reduced-motion aware
    
-   Dialog a11y: aria-modal, focus sheet on open, restore on close
    
-   Canvas-visible orb; live portal to document.body
    
-   Built-in Kern icons use Accent; optional image uploads
    
-   No Auto Demo / no WhatsApp
    

Setup (buyer)

1.  Insert **Contact Dock** (fixed size ~60×60 on canvas is fine).
    
2.  Fill **Content** (greeting, name, role, avatar).
    
3.  Edit **Channels** (up to 3) — paste URL, email, or tel.
    
4.  Tune **Appearance** (Accent #6FD3FF, Tint, Blur, Radius, Corner, Size).
    
5.  Optional: Pulse off; custom Orb/Close icons.
    

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

-   All · #1430

## Details

- **Author**: BuiltByKern
- **Published**: 2026-07-31
- **Updated**: 2026-10-13
- **Added**: 2026-07-31
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step