Personnaliser le widget du site avec votre code

L'extrait d'installation vous donne une bulle flottante dans le coin. C'est le point de départ, pas la limite. Le même script vous permet d'ouvrir le widget depuis des boutons que vous avez déjà conçus, de le piloter avec votre propre JavaScript et d'alimenter vos outils d'analyse avec les conversions.

Tout ce qui suit s'appuie sur l'extrait de Paramètres > Intégrations > Widgets de site web. Si vous ne l'avez pas encore installé, commencez par ajouter le widget de prospects à votre site web.

Ouvrir le widget depuis vos propres boutons

Ajoutez un attribut data-wz-action à n'importe quel élément de la page. Un clic dessus ouvre le widget :

<a data-wz-action="booking">Réserver une visite</a>
<button data-wz-action="contact">Obtenir un devis gratuit</button>
<a data-wz-action="whatsapp">Discuter sur WhatsApp</a>

C'est toute la configuration. Il n'y a rien à initialiser et aucun ID à faire correspondre. Votre bouton « Obtenir un devis » existant dans votre en-tête conserve son design et se met à ouvrir le flux de réservation.

Trois points à connaître :

• Cela fonctionne sur le contenu qui apparaît plus tard. WorkZen écoute au niveau de la page, donc les boutons ajoutés par React, Vue, un carrousel ou un défilement infini fonctionnent sans qu'il soit nécessaire de relancer quoi que ce soit.
• Cela fonctionne avant même que le formulaire n'ait été chargé. Le premier clic charge ce dont il a besoin.
• Une fonctionnalité désactivée ne fait rien. Si WhatsApp est désactivé dans les paramètres de votre widget, un bouton WhatsApp reste silencieux plutôt que d'ouvrir un écran défectueux.

Vous pouvez utiliser ces déclencheurs avec ou sans le bouton flottant. Pour supprimer complètement la bulle, installez le script de chargement et omettez simplement la balise <wz-floating-button>.

Contrôler le widget avec JavaScript

Le script de chargement publie une petite API sur window.WZ :

Un cas d'usage courant consiste à ouvrir le formulaire après l'exécution de votre propre logique :

<button onclick="WZ.openBookingForm()">Planifier mon estimation</button>

Préremplir le message

WZ.openLeadForm() accepte deux options :

WZ.openLeadForm({
  prefillMessage: 'Je suis intéressé par la porte Carriage House en blanc.',
  extraPayload: { product_sku: 'CH-WHT-16' }
});

prefillMessage est placé dans le champ de message, où le visiteur peut le modifier avant l'envoi. Tout ce que vous passez dans extraPayload accompagne le prospect. Ensemble, ils permettent à une page produit, un tableau de prix ou un configurateur de vous indiquer exactement ce que le visiteur consultait.

Modifier les paramètres sur une seule page

Les paramètres de votre widget se trouvent dans WorkZen et s'appliquent partout. Pour les faire varier sur une seule page, ajoutez un attribut data-config contenant du JSON. Placez-le sur la balise du script de chargement pour affecter toute la page, ou sur la balise du widget pour n'affecter que ce widget. La balise du widget l'emporte lorsque les deux définissent la même clé.

<wz-floating-button
  config='{"enable_scheduler": false, "contact_us_text": "Renseignez-vous sur les tarifs de gros"}'>
</wz-floating-button>

Voici les clés qu'une page peut remplacer :

Tout ce qui ne figure pas dans cette liste reste sous le contrôle de WorkZen et ignore la page. Cela inclut la couleur du thème, l'icône du bouton, le branding, la clé du widget, les heures d'ouverture et les types de travaux.

Rediriger les visiteurs vers une page de remerciement

redirect_url envoie le visiteur ailleurs dès que sa soumission réussit, au lieu d'afficher le message de remerciement intégré. Cela s'applique aussi bien au formulaire de contact qu'au flux de réservation.

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

La redirection ne se produit qu'après que WorkZen a confirmé la soumission, de sorte qu'un envoi échoué laisse le visiteur sur votre page, avec ses réponses intactes et l'erreur visible. L'événement de conversion se déclenche tout de même en premier, ce qui signifie que votre suivi Google Analytics ou Tag Manager enregistre le prospect avant que le visiteur ne quitte la page. Comme ceci remplace la confirmation intégrée, assurez-vous que votre page de destination indique clairement que le message ou la réservation a bien été reçu. Une page de remerciement dédiée est aussi le moyen le plus simple de comptabiliser les conversions dans vos outils d'analyse et d'exécuter le suivi des conversions Google Ads sur une vue de page.

Suivre les conversions dans GA4 ou Google Tag Manager

Le widget signale quatre événements à vos outils d'analyse :

Les deux événements _submit ne se déclenchent qu'après que WorkZen a confirmé la soumission, ce sont donc de véritables conversions, sûres à utiliser comme déclencheurs de conversion Google Ads ou GA4.

Les deux outils sont couverts automatiquement :

• Google Tag Manager : créez un déclencheur Événement personnalisé nommé workzen_contactform_submit, ou utilisez l'expression régulière workzen_.*_submit pour capter toutes les conversions dans un seul déclencheur. WorkZen envoie des données à votre dataLayer existant et n'en crée jamais un, il ne peut donc pas interférer avec votre configuration.
• GA4 sans Tag Manager : les événements arrivent d'eux-mêmes. Marquez les événements workzen_*_submit comme conversions dans l'administration de GA4.

Exécuter les deux en même temps est sans risque et n'entraîne pas de double comptage.