BESPOKE ON-BRAND CONVERSATIONAL DESIGN

An AI front desk that looks and feels native to your brand.

Generic chat widgets feel like intrusive third-party stickers pasted onto your website. Frosty’s styling engine adapts to your exact typography, palette, corner radius, and elevation — creating a seamless conversational experience that respects your visual brand identity.

1-line script embed • Zero layout shift from fixed launcher • Live dashboard updates
By Frostrek AI Product TeamLast updated: March 20266 min read
STUDIO ARCHITECTURE

The Real-Time Customization Engine

Inspect style attributes, brand tokens, and contrast checks with zero deployment delay.

Dashboard Token Sync: Active
Configurable Style Tokens
#0396A6 (Aqua)
Inter, -apple-system, sans-serif
Rounded Elevation16px
Bottom Right • 24px Offset
Contrast Ratio 5.4:1

Exceeds standard 4.5:1 ratio for legible text hierarchy.

LIVE VISUAL STUDIO

Studio Canvas Ready for Deployment

Interactive real-time previews are calibrated directly inside your authenticated merchant dashboard upon sign-up. Style rules compile to CSS tokens and render instantaneously.

Shadow DOM: EncapsulatedCLS Impact: 0.00Loader: <2kB
DESIGN VALUES

Engineered to reject the generic chatbot aesthetic.

Why settle for an unbranded blue widget that looks identical to a thousand other sites? Frosty gives you granular control over every visual touchpoint.

Discreet & Configurable Attribution

Full white-label branding with zero third-party marks is standard on Growth and Enterprise plans. On our Starter tier, we display a single minimal text credit in the panel footer that never distracts your visitors.

Automated 4.5:1 Contrast Checking

Legibility is non-negotiable. Our dashboard automatically runs an automated contrast check against a 4.5:1 ratio between your selected brand colors and text foregrounds, warning you before you publish hard-to-read combinations.

Harmonious Visual Hierarchy

From subtle bubble shadows and border radius curvature to avatar sizing and quick-prompt pill density, every element aligns with the visual vocabulary of modern, premium software.

SYSTEM ANATOMY

Four pillars of total visual control.

Customize every dimension of the user interface through your dashboard without touching code.

PILLAR 01

Visual Identity & Color Tokens

Match your primary palette and interactive states.

Configure custom HEX codes for the floating launcher button, agent message bubbles, user replies, and action CTAs. Toggle between light mode clarity and sleek dark mode elevation.

Configurable:Primary, Secondary, Background, Radius
PILLAR 02

Typography & Form Hierarchy

Load your own typefaces without page reflow.

Select Google Fonts or specify custom webfonts. Adjust title weights, message bubble line heights, and padding to ensure the conversation reads with comfortable typographic rhythm.

Font Loading:Google Fonts + Custom URL Asynchronous
PILLAR 03

Contextual Prompt Starters

Guide high-intent inquiries with 1-click pills.

Configure up to 4 conversation starter chips that adapt to the visitor's landing URL. A visitor on your pricing page sees quote options; a visitor on a clinic booking page sees slot requests.

Route Awareness:Up to 4 contextual starters per page
PILLAR 04

Placement & Display Rules

Precise alignment with your existing UI elements.

Choose bottom-right or bottom-left placement. Set custom pixel offsets to prevent overlapping with existing floating action buttons, accessibility menus, or live notification badges.

Anchor Rules:Left / Right • Custom X/Y Offsets
OMNICHANNEL COHESION

Visual quality that continues into WhatsApp.

Your brand experience doesn't stop when a conversation moves from desktop browser to mobile messaging. Frosty maintains brand consistency across every WhatsApp interaction:

Branded PDF QuotationsGenerated documents include your company logo, typography, header banner, and custom footer.
Official WhatsApp Business ProfileDisplays verified green tick (upon Meta approval), official business hours, and address.
Seamless Conversation ContinuationWhen visitors click 'Continue on WhatsApp', the agent greets them referencing their previous web questions.
WhatsApp Cloud API Asset Engine
Meta Verified
Dispatched Document Specs
Acme_Clinic_Estimate_4092.pdf
• Canvas: Vectorized SVG + Embedded System Fonts
• Palette: Exact HEX match from website widget
• Security: Signed SHA-256 Cloud Delivery

Your prospects receive clean, official business assets in WhatsApp instead of unformatted text dumps.

MOBILE-FIRST ENGINEERING

Calibrated for touch screens and mobile browsers.

Over 65% of customer conversations happen on smartphones. Frosty treats the mobile experience as a first-class priority, not a shrunk-down desktop afterthought.

Ergonomic 56px Touch Target

The mobile floating launcher complies strictly with mobile accessibility standards (minimum 48px target area). Sized at 56px, it is effortlessly reachable with a thumb while staying clear of Safari and Chrome bottom navigation bars.

Responsive Bottom Sheet

On viewports under 640px, Frosty smoothly transitions from a floating corner card into an elegant native bottom sheet. Users can swipe to minimize, with momentum scroll tuned to prevent background page pull-to-refresh conflicts.

Visual Viewport Keyboard Handling

When the software keyboard appears, Frosty hooks into `window.visualViewport` to dynamically shrink the message pane. The input box and newest replies remain firmly visible rather than getting hidden under virtual keys.

ENGINEERING SPECIFICATIONS

Radically honest developer architecture.

We respect your frontend performance budget. Here are the exact architectural metrics and trade-offs governing Frosty’s embed script.

index.html
<!-- Place before closing </body> tag -->
<script
  defer
  src="https://cdn.frostyagent.com/widget.js"
  data-agent-id="agt_live_948271"
></script>
• Loads asynchronously with `defer` to protect First Contentful Paint.
• Initial loader size: < 2kB gzipped.
• Full conversational bundle: ~48kB deferred only on first user click.

Closed Shadow DOM Isolation

The widget launcher runs inside a closed shadow root with `all: initial` enforced. Your host typography, button classes, and global CSS resets cannot alter widget styling.

Zero Cumulative Layout Shift (CLS = 0.00)

Because the launcher is fixed in place via a dedicated hardware-accelerated composite layer, its appearance never shifts or pushes existing DOM elements.

The Secondary Document Trade-Off

While rendering the conversational pane in an isolated document context introduces a modest secondary document allocation, it completely prevents style collision with complex enterprise CSS stacks.

WIDGET DESIGN FAQ

Answers to design and implementation questions.

The widget launcher and conversational panel mount inside a closed Shadow DOM root with `all: initial` applied at the boundary. Host CSS resets, universal box-sizing rules, or utility frameworks like Tailwind and Bootstrap cannot pierce the boundary.

Need custom enterprise styling guidelines or dedicated sandboxes? Talk to our Solutions Team

EFFORTLESS ON-BRAND DEPLOYMENT

Design an AI front desk your brand is proud to showcase.

Configure your palette, test contrast, and deploy your customized agent script in under 15 minutes. Zero code deploy overhead.

Live in under 15 minutes Zero layout shift (CLS = 0) 1-line script embed