Customize the website widget with your own code

The install snippet gives you a floating bubble in the corner. That is the starting point, not the limit. The same script lets you open the widget from buttons you already designed, drive it from your own JavaScript, and feed conversions into your analytics.

Everything here builds on the snippet from Settings > Integrations > Website Widgets. If you have not installed it yet, start with adding the lead widget to your website.

Open the widget from your own buttons

Add a data-wz-action attribute to any element on the page. Clicking it opens the widget:

<a data-wz-action="booking">Book a visit</a>
<button data-wz-action="contact">Get a free quote</button>
<a data-wz-action="whatsapp">Chat on WhatsApp</a>

That is the whole setup. There is nothing to initialize and no ID to match. Your existing "Get a Quote" button in your header keeps its design and starts opening the booking flow.

Three details worth knowing:

• It works on content that appears later. WorkZen listens at the page level, so buttons added by React, Vue, a slider, or infinite scroll work without re-running anything.
• It works before the form has ever loaded. The first click loads what it needs.
• A switched-off feature does nothing. If WhatsApp is disabled in your widget settings, a WhatsApp button stays silent rather than opening a broken screen.

You can use these triggers with or without the floating button. To drop the bubble entirely, install the loader script and simply leave out the <wz-floating-button> tag.

Control the widget from JavaScript

The loader publishes a small API on window.WZ:

A common use is opening the form after your own logic runs:

<button onclick="WZ.openBookingForm()">Schedule my estimate</button>

Prefill the message

WZ.openLeadForm() accepts two options:

WZ.openLeadForm({
  prefillMessage: 'I am interested in the Carriage House door in white.',
  extraPayload: { product_sku: 'CH-WHT-16' }
});

prefillMessage is placed in the message field, where the visitor can edit it before sending. Anything you pass in extraPayload travels with the lead. Together they let a product page, pricing table, or configurator tell you exactly what the visitor was looking at.

Change settings on one page only

Your widget settings live in WorkZen and apply everywhere. To vary them on a single page, add a data-config attribute holding JSON. Put it on the loader script tag to affect the whole page, or on the widget tag to affect just that widget. The widget tag wins where both set the same key.

<wz-floating-button
  config='{"enable_scheduler": false, "contact_us_text": "Ask about bulk pricing"}'>
</wz-floating-button>

These are the keys a page may override:

Anything not on that list stays under WorkZen's control and ignores the page. That includes your theme color, button icon, branding, widget key, working hours, and job types.

Send visitors to a thank-you page

redirect_url sends the visitor somewhere else the moment their submission succeeds, instead of showing the built-in thank-you message. It applies to both the contact form and the booking flow.

<wz-floating-button config='{"redirect_url": "https://example.com/thank-you/"}'>
</wz-floating-button>

The redirect only happens after WorkZen confirms the submission, so a failed send leaves the visitor on your page with their answers intact and the error visible. The conversion event still fires first, which means your Google Analytics or Tag Manager tracking records the lead before the visitor moves on. Because this replaces the built-in confirmation, make your destination page say clearly that the message or booking came through. A dedicated thank-you page is also the easiest way to count conversions in analytics and to run Google Ads conversion tracking on a page view.

Track conversions in GA4 or Google Tag Manager

The widget reports four events to your analytics:

The two _submit events fire only after WorkZen confirms the submission, so they are real conversions and safe to use as Google Ads or GA4 conversion triggers.

Both tools are covered automatically:

• Google Tag Manager: create a Custom Event trigger named workzen_contactform_submit, or use the regular expression workzen_.*_submit to catch every conversion in one trigger. WorkZen pushes to your existing dataLayer and never creates one, so it cannot interfere with your setup.
• GA4 without Tag Manager: the events arrive on their own. Mark the workzen_*_submit events as conversions in the GA4 admin.

Running both is safe and does not double count.