ComponentsSite blocks

Contact dock

A floating messaging button and a mobile action bar (“Call · Directions · WhatsApp”) — the main conversion channel for local businesses in Turkey and many other markets. Plain links with data-track for the app's analytics, last in DOM order, 44px+ targets, safe-area padding; the page gets bottom padding so content isn't covered, the button moves above a visible consent bar, and the bar steps aside when the on-screen keyboard is open. Off-hours behaviour (label or hide) is a ~0.4 KB island using the business's opening hours.

blocks/site/contact-dock.tsx, blocks/site/shared/dock-hours.tsx, blocks/site/shared/brand-icons.tsx, blocks/site/registry-2.ts, styles/blocks.csstheme · material · accent · density · font

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { ContactDock } from "@vamos-ui/react/blocks";

// app/layout.tsx, after {children}
<ContactDock
  whatsapp="+902160000000"
  message="Hi, I’d like to book a table."
  phone="+902160000000"
  directionsHref="https://maps.app.goo.gl/…"
  bookingHref="/reservations"
/>

Examples

Fab with off-hours label (spa)

Outside opening hours a note says when you'll hear back; offHours="hide" removes the dock instead.

Mobile bar (restaurant)

2–4 equal actions in the order you give.

API

ContactDock

PropTypeDefault
variant
both: fab from 48rem up, bar below.
"fab" | "bar" | "both""both"
provider
Messaging network of the fab.
"whatsapp" | "telegram" | "messenger""whatsapp"
whatsapp / telegram / messenger
E.164 number, Telegram username, or Facebook page name.
string—
message
Prefilled WhatsApp text (wa.me/<digits>?text=…).
string—
label
Fab label on desktop.
string"Message us"
phone / directionsHref / bookingHref / email
Targets for the bar actions.
string—
actions
Bar order (max 4); unconfigured ones are skipped.
("call" | "whatsapp" | "directions" | "booking" | "email")[]—
position
Logical side (mirrors in RTL).
"end" | "start""end"
hours / offHours
Off-hours behaviour, computed on the client in the business's zone.
OpeningHours / "show" | "label" | "hide"— / "show"
now
Pin the clock for previews.
string (ISO)—
contained
Render in place (docs, builder) instead of fixed.
booleanfalse
labels / locale
Message us on {network}, Call, Directions…
Partial<Site2Labels> / string—

BrandIcon

PropTypeDefault
name / title
WhatsApp, Instagram, Facebook, LinkedIn, X, YouTube, TikTok, Telegram, Messenger, Google/Apple/Yandex Maps, Waze — monochrome SVG, aria-hidden unless titled.
BrandName / string—
Previous
Cookie / consent banner
Next
Contact form