Adding a floating contact button

The Floating Contact Button element puts a round button in a fixed corner. Your customer taps it to start a WhatsApp chat, call you, email you, open a link or jump to the top.

Considerations

• The button sits in the corner you choose, wherever you drop it on the canvas.
• It shows only on the page you add it to. For the same button on every page, use the site-wide version in the Overlays tab instead: Adding a back-to-top button, floating contact button or reading progress bar.
• Use the element when one page needs its own button, such as a different number.
• Phone numbers use international format, digits only, such as 447123456789.

Add the element

1. Open the page in the page builder.
2. In the toolbox on the far left, click Elements.
3. Find Floating Contact Button in the Basic group, or search for it.
4. Drag it onto the canvas and drop it anywhere. The settings panel opens on Editing Floating Contact Button.

Choose what the button does

1. With the element selected, open the Content tab.
2. Under Action, pick an Action Type: WhatsApp, Phone call, Email, Custom link or Scroll to top.
3. Fill in the field that appears: a Phone Number, an Email Address or a Link URL.
4. Under Icon, pick one from the Library tab or add your own on Custom SVG.
5. Save the page and test it on your live site.

Content settings

• Action Type: what the button does.
• Phone Number: the number for WhatsApp and Phone call.
• Prefilled Message: optional text the chat opens with.
• Email Address and Subject (optional): where the email goes and its subject.
• Link URL: the page Custom link opens, in a new tab by default.
• Icon: the icon on the button, from the library or your own SVG.
• Show Label and Label Text: a short word beside the icon, such as Chat with us.

Design settings

Open the Design tab to change the look. The groups are Placement for the Corner and offsets, Shape & Size, Colours, Effects for the shadow and pulse, then Border and Spacing. Typography appears when Show Label is on.

Related guides

• Adding a back-to-top button, floating contact button or reading progress bar
• Adding a button
• Adding and arranging elements
• Using the element settings panel