Skip to content

Callback widget

The callback widget is a floating contact button in the corner of the screen. When a visitor clicks it, a popup opens with up to three ways to get in touch. It is a self-contained feature you turn on and configure in the admin, with no markup needed from you.

The popup can show three tabs, always in this order:

  1. Call us — a phone number the visitor can tap to call or copy.
  2. Request callback — a short form asking for a phone number, so you can call them back.
  3. Leave message — a fuller contact form (name, email, message).

Each tab appears only when it has something to show. The phone tab appears when you have set a number. The callback and message tabs appear when their form is live. So a widget with only a phone number set shows just one tab.

You choose, separately for phones, tablets and desktops, which tab opens by default, or set it to off to hide the widget entirely on that kind of device. If your chosen default tab is not available, the widget falls back to the first tab that is.

This lets you, for example, lead with “Call us” on mobile where tapping to call is natural, and lead with “Leave message” on desktop.

The callback and message tabs are real forms. Their submissions flow through the same intake pipeline as any other OctaForms form: the security token, honeypot, rate limiting and the durable delivery queue all apply. They are not sent through a separate, less reliable path.

Behind the widget are two ordinary forms with the stable slugs callback and message. They are created for you from the widget’s settings page the first time you need them, and you can edit their fields, recipients and emails just like any other form. See Building forms.

Everything lives on the widget’s settings page in the admin, grouped into tabs: general options, the three contact methods, and the button’s appearance. The widget’s own options (which tabs, default per device, position, phone number, button style) are stored separately from the forms. The forms own what belongs to a form: the recipient, the thank-you text, the submit label.

On the widget’s General tab there is a “Hide on these addresses” box. Enter one address per line. The button will not show on any page whose address contains what you type. For example, type /checkout to hide it across your whole checkout, or paste a full address to hide it on a single page. Leave the box empty to show the button everywhere. Matching ignores upper and lower case.

For rules the box cannot express, return false from the octa_forms_callback_visible filter for those requests. The bundle still loads; only the widget is left out. See Frontend assets and Hooks and filters.

The widget emits neutral events on document so an analytics or consent layer can listen without any coupling. Each event carries a detail.location of "Widget callback".

Event Extra detail When
octaforms:widget-open mode (the active tab) The popup opens
octaforms:tab-switch tab The visitor switches tab
octaforms:form-start First real interaction with a form field
octaforms:form-success A successful submit
octaforms:form-error status A failed submit
octaforms:phone-call phone, trigger A tap on the tel: link
octaforms:phone-copy phone, success The number is copied

To debug events, add ?octa_forms_debug to the URL or set window.OCTA_FORMS_CALLBACK_DEBUG = true, and every event is logged to the console.