Where does the button appear?

Placement is set in the action's Location step, so you can dock it to any corner (horizontal) or edge (vertical). Then set the direction under Placement so the bubble does not run off the edge.

What is the difference between horizontal and vertical orientation?

Horizontal is a normal floating button in a corner. Vertical is a slim tab flush to the left or right edge with its label turned sideways, good for a persistent Help or Feedback tab. In vertical mode the bubble always opens inward, and Button Sits On chooses which edge.

Can I move the icon on the vertical tab?

Yes. Vertical Icon Position places the icon at the top of the tab, at the bottom, or hides it (none) for a text-only tab. It only applies in vertical orientation.

How do I open my chat tool when the button is clicked?

Set the First Action to Run JavaScript and paste your chat provider's open command (for example an Intercom, Crisp, HubSpot, or Tidio call). Any provider works, since it runs your own JavaScript.

Can I have two buttons in the bubble?

Yes. Turn on Show Second Action. The two sit side by side on one line, each with its own look, icon, and link-or-JavaScript action.

What is the difference between Dismiss and Do Not Show Again?

Dismiss hides the button for the current page view only; it returns on the next page or visit. Do Not Show Again uses Personyze's own suppression, governed by the action's Display Frequency.

There is a white box behind the button. How do I fix it?

The template's root already sets a transparent background. If you see a white box, make sure you have not overridden the root background in the CSS fields.

Hover Bubble CTA Template – Personyze Wiki

Hover Bubble CTA Template

The Hover Bubble CTA is a small floating button that sits in a corner of the page. When a visitor hovers it (or taps it on mobile), a…

Updated 8 hours ago 4 min read

by Admin

The Hover Bubble CTA is a small floating button that sits in a corner of the page. When a visitor hovers it (or taps it on mobile), a message bubble opens with one or two calls to action. It’s a lightweight, non-intrusive way to offer help, a demo, a booking link, or a chat — without a popup interrupting anyone. It comes in two orientations: a normal corner button, or a slim vertical tab flush to the left or right edge. Where it sits on screen is set in the action’s Location step.

When to use it

Live help or chat — a “Need help?” button that opens your chat widget on click.
Book a demo or call — open a scheduling popup, or link to a booking page.
Persistent side tab — a vertical Help or Feedback tab pinned to a screen edge that stays out of the way until hovered.

Add it to an action

In a Popup action, open the template picker and choose Hover Bubble CTA. Style any element by clicking it in the preview. Use the action’s Location step to place the button, and set the matching direction under Placement so the bubble does not run off the edge.

Settings

Style

Colour Preset — brand, dark, light, or blue. Colours the button, bubble, and action buttons together.
Drop Shadow — on or off.
Button / Bubble / Title / Text CSS — open the CSS editor to override the preset on any part.

Button

Orientation — Horizontal is a normal floating button in a corner. Vertical is a slim tab flush to the left or right edge, with its label turned sideways — ideal for a persistent Help or Feedback tab. In vertical mode the bubble always opens inward, away from the edge, and Button Sits On (under Placement) chooses the left or right edge.
Vertical Icon Position — only used in vertical orientation: place the icon at the top of the tab (above the label), at the bottom, or none to hide it for a text-only tab.
Shape — pill (label beside the icon), circle (icon only), or square. Ignored in vertical orientation, which is always an edge tab.
Size, Icon, Custom Icon Image — a photo of the person who answers can convert better than an icon.
Text Label — optional; hidden automatically on phones so the button becomes a circle.

Message & Actions

Bubble Title and Text — the hook and one or two supporting lines.
First / Second Action — each is a standard button: choose Open a link to send the visitor to a URL, or Run JavaScript to open a chat widget (Intercom, Crisp, HubSpot, Tidio, and so on), a booking popup, or fire an event.
Action Look — link, button, or outline. Action Icon — an optional small icon. The two actions sit side by side on one line.

Animation

Attention Animation — pulse, bounce, wiggle, glow, or ring. It stops while the visitor hovers, and is switched off for visitors who ask their system to reduce motion.
Open the Bubble by Itself — show the message once on its own after a delay, then hide it again. On phones there is no hover, so leave this above zero.

Placement

Bubble Opens Toward — horizontal only: match the corner, so a bottom corner opens Up and a top corner opens Down. In vertical orientation the bubble always opens inward from the edge, so this is ignored.
Button Sits On — edge alignment. In vertical orientation this chooses the left or right edge the tab is pinned to.
Spacing, Show on Mobile — breathing room around the button, and whether it appears on phones.

Behavior & Close

After an Action is Clicked — Dismiss (this view, returns next page), Hide for this session, Do not show again (uses the action’s Display Frequency), or Keep visible.
What the X Closes — close the bubble only (button stays), hide for this view, hide for this session, or do not show again.

Tips

Horizontal: match the bubble direction to the corner. A button in the bottom-right should open Up and sit on the Right so the bubble stays on screen.
Vertical: pick the edge with Button Sits On. Right pins the tab to the right edge and opens the bubble left; Left does the opposite. Bubble direction is automatic.
Dismiss is not Do Not Show Again. Dismiss hides the button for the current page view and it returns on the next page; Do Not Show Again is governed by the action’s Display Frequency.
To open a chat widget, set an action to Run JavaScript and paste the provider’s open command — for example a one-line call that opens Intercom, Crisp, HubSpot, or Tidio.