The button widget for every website.

A button is not a decoration. It is the visible commitment device that asks a visitor to spend a unit of attention or money on you. Three psychological principles determine whether they say yes. First, perceived friction: the brain estimates the effort of the action behind the button before the click, not after. A button labeled 'Get free price quote in 30 seconds' converts 2-3x higher than 'Submit' because it pre-resolves the friction estimate. Second, loss aversion framing: 'Stop losing leads to slow load times' outperforms 'Speed up your site' because losses register at roughly 2x the emotional weight of equivalent gains (Kahneman and Tversky, prospect theory). Third, contextual relevance: a button labeled 'Book a demo' on a pricing page converts higher than the same button on the homepage, because intent is concentrated. The Poper button widget lets you set the label, action, color, and placement per page, so the CTA on your blog can differ from the CTA on your product page.

An embedded (inline) button sits inside your page content. A floating button sits on top of the viewport and follows the scroll, pinned to one of six corner positions. Both have a place. Inline buttons win when intent is high and context is dense: at the bottom of a long-form blog post, beneath a pricing table, or after a hero subtitle. The visitor has just consumed the persuasion and the inline button gives them a frictionless way to act. Floating buttons win when intent is medium and pages are long: visitors who would have bounced off a long product page now have the CTA always accessible. The trap is overlap: do not put a floating CTA on top of an inline CTA that says the same thing on the same scroll depth. Pick one primary action per section. Poper lets you switch between embedded and floating with a single layout toggle, so you can test which placement fits the page without re-embedding.

The Poper button widget ships ten actions, and the right one depends on the page. Open Link is the workhorse for sending visitors to a pricing page, signup form, or booking calendar. Download File serves an app, brochure, or lead magnet directly on click. Email opens a prefilled mailto for support and sales pages. WhatsApp and Telegram open the chat deep link, which works well on service and local-business pages where buyers expect a fast reply. Skype starts a call. Scroll To jumps the visitor to a section further down the same page, useful for long landing pages with a hero CTA that points at a form below. Copy to Clipboard copies a coupon code, address, or referral link in one tap. Run Script triggers your own page script. Follow on Social sends visitors to your profile. Match the action to the visitor's likely intent: a homepage hero usually wants Open Link, a contact page wants Email or WhatsApp, and a long sales page wants Scroll To.

A button that looks like a third-party widget erodes trust. The Poper button widget ships 18 design presets (Classic, Pill, Soft, Outline, Brutalist, three gradient styles, Neon, Ghost, Cyber, Playful, Elegant, Glass, Alert, Success, Warning, and Social) as starting points, and every preset is fully editable: button color, text color, corner radius, border width and color, and shadow style. The goal is to match your existing design system, not to stand out as a plugin. Use your real brand color, match the corner radius of the other buttons on the page, and keep the font size consistent with surrounding UI. An optional icon and a second line of subtext can add clarity ('Start free trial' with 'No credit card required' below it) without adding a second button. Hover, focus, and active states are styled by default so the button responds correctly to a mouse and a keyboard.

The Poper button widget includes eight animations: Fade In, Zoom In, Slide Up, Bounce, Pulse, Shake, Wobble, and none. Each can fire on load, on hover, or constantly. Motion is a tool, not a default. A subtle Fade In or Slide Up on load draws the eye to the primary CTA without being distracting, and it is a safe choice for almost any page. An on-hover animation gives feedback that the button is interactive, which helps on dense pages. A constant Pulse or Bounce is attention-grabbing and works for a single high-priority CTA, such as a limited-time offer, but using it on every button trains visitors to ignore it. The honest rule: animate at most one button per view, prefer on-load or on-hover over constant motion, and pick none when the button already sits in an obvious spot. Visitors who have reduced-motion preferences set at the OS level should not be bombarded with constant movement.