UltraKit · Widget #66

Click to WhatsApp

Turn visitors into WhatsApp conversations — inline buttons, floating bubbles and full chat cards with pre-filled messages. Every style, shape, size and behaviour on one page.

3 Display Modes6 Button Styles3 Shapes3 Sizes4 Attention Animations6 Screen Positions2 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 use the placeholder number 8801700000000; set your own under WhatsApp Chat → WhatsApp Number (country code + number, digits only).
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
Solid Greenskin = solid
2
Gradientskin = gradient
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

Chat Card

A WhatsApp-style popup with agent name, online status, greeting bubble and a โ€œStart Chatโ€ button.

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

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 11

Custom Colours

Two colour pickers โ€” main and hover โ€” restyle any button to match your brand.

1
WhatsApp Green#25d366 / #128c7e
2
Business Teal#128c7e / #075e54
3
Sunset#ff7043 / #d84315
4
Royal Violet#7c4dff / #4527a0
Section 12

Ready-Made Combinations

Three complete setups to drop straight into a site.

1
Sticky Support BubbleFloating + text + gradient + pulse
2
Contact CTA ButtonInline + large + 3D block
3
Live Chat CardChat card + agent photo + auto-open