UltraKit · Widget #67

Facebook Messenger Chat

Open a Messenger conversation with one tap — inline buttons, floating bubbles and full chat cards with quick-reply chips and an unread badge. No Facebook SDK, no tracking scripts.

3 Display Modes6 Button Styles3 Shapes3 Sizes4 Attention Animations6 Screen Positions Quick-Reply Chips2 Reveal Triggers
How the demos work. Floating bubbles and chat cards normally stick to the corner of the screen — here each one sits inside a small browser mock-up so you can compare them side by side. All buttons point to the placeholder page m.me/yourpagename; enter your own Facebook Page username (or numeric Page ID) under Messenger Chat → Facebook Page Username / ID.
Section 01

Display Modes

Use it as an inline button inside your content, a floating bubble, or a full floating chat card.

1
Inline Buttonmode = button β€” sits in your layout
2
Floating Bubblemode = floating β€” fixed on screen
3
Floating Chat Cardmode = chatbox β€” click the bubble to open / close
Section 02

Button Styles

Six looks for the inline button and the floating bubble β€” hover to see each one react.

1
Messenger Gradientskin = gradient
2
Solid Blueskin = solid
3
Outlineskin = outline
4
Darkskin = dark
5
Light / Whiteskin = glass
6
3D Blockskin = block3d
Section 03

Shapes

Pill, rounded or square corners.

1
Pill / Circleshape = pill
2
Roundedshape = rounded
3
Squareshape = square
Section 04

Sizes

Small, medium or large β€” the icon, text and padding scale together.

1
Smallsize = small
2
Mediumsize = medium
3
Largesize = large
Section 05

Attention Animations

A gentle nudge that draws the eye without being annoying.

1
Nonepulse = none
2
Pulse Ringpulse = pulse
3
Wigglepulse = shake
4
Floatpulse = float
Section 06

Inline Alignment

Align the inline button left, centre or right inside its column.

1
Leftbtn_align = left
2
Centerbtn_align = center
3
Rightbtn_align = right
Section 07

Floating Bubble Positions

Pin the bubble to any corner or the middle of either side, with your own offsets.

1
Bottom Rightposition = bottom-right
2
Bottom Leftposition = bottom-left
3
Top Rightposition = top-right
4
Top Leftposition = top-left
5
Middle Rightposition = mid-right
6
Middle Leftposition = mid-left
Section 08

Floating Bubble Variants

Icon-only for a minimal look, or add the button text next to the icon.

1
Icon Onlyshow_text_floating = off
2
Icon + Textshow_text_floating = on
3
Large 3D Bubblesize = large, skin = block3d
Section 09

Unread Badge

A red β€œ1” badge on the bubble nudges visitors to open the chat β€” switch it on or off.

1
Badge Onbadge = yes
2
Badge Offbadge = off
Section 10

Chat Card

A Messenger-style popup with page name, status, greeting bubble, quick-reply chips and an β€œOpen Messenger” button.

1
Default Cardmode = chatbox, position = bottom-right
2
With Page Photoagent_avatar + position = bottom-left
3
Top Right Cardposition = top-right, skin = dark
4
Custom Coloursaccent + accent_dark
Section 11

Quick-Reply Chips

Add tappable topics to the card. Each chip opens Messenger with its own ref code so your bot knows what was chosen.

1
No Chipschips = empty
2
Three ChipsPricing Β· Support Β· Talk to a human
3
Five Chipschips wrap onto extra lines
Section 12

Delayed & Scroll Reveal

Show the bubble only after a delay, or after the visitor has scrolled a set percentage of the page.

1
Appears After 4 Secondsshow_delay = 4 β€” reload the page and wait
2
Appears After Scrolling 25%show_scroll = 25 β€” keep scrolling down the page
Section 13

Custom Colours

Two colour pickers β€” main and secondary β€” restyle any button to match your brand.

1
Messenger Blue→Purple#0084ff / #a334fa
2
Ocean#00c6ff / #0072ff
3
Sunset#ff7043 / #d81b60
4
Emerald#00b894 / #00695c
Section 14

Ready-Made Combinations

Three complete setups to drop straight into a site.

1
Sticky Support BubbleFloating + text + gradient + badge
2
Contact CTA ButtonInline + large + 3D block
3
Live Chat CardChat card + page photo + quick-reply chips + auto-open