Floating Popup Button

The floating button component delivers a seamless way to surface contact forms, quick actions, or contextual menus without cluttering your page layout. Positioned at the corner of the viewport, it stays accessible as users scroll, ensuring important interactions are always one tap away. Its smooth scale-in animation and overlay effect create a polished, app-like experience across all screen sizes.

Every visual aspect of the button is controlled through CSS custom properties, making it straightforward to match any brand palette. Adjust the button size, background color, icon color, popup width, shadow depth, and border radius — all without editing component markup. Developers can theme the floating button globally or scope overrides to a single page in minutes.

When activated, the button triggers a compact popup panel that can host a contact form, newsletter signup, or any short-form content. A semi-transparent backdrop dims the page behind the panel, focusing user attention and preventing accidental interactions. Clicking anywhere outside the panel closes it gracefully, and the toggle icon rotates to signal the open state clearly.

The component is built with keyboard accessibility in mind. Focus management ensures that users navigating by keyboard can open, interact with, and dismiss the panel without disruption. ARIA attributes can be added to the trigger and panel to communicate state changes to screen readers, meeting the needs of a diverse audience.

Common use cases include persistent contact widgets, live chat launchers, callback request forms, and promotional offer panels. Because the component is self-contained HTML, CSS, and a small JavaScript toggle, it integrates cleanly into any Canvas page block or custom template. No external dependencies are needed beyond the standard Canvas JavaScript bundle already included in every page.

On small screens, the popup panel adapts its width to fit the viewport, and the button repositions to avoid overlapping site navigation. The cubic-bezier transition delivers a native-feeling open and close animation on both desktop and mobile devices. Testing across browsers and devices confirms consistent, reliable rendering from Chrome to Safari.