How to Add Custom JavaScript to a Contact Form Widget (e.g., for GA4 / GTM Conversion Tracking)

This article explains how to inject a custom JavaScript snippet into a LiveAgent contact form widget — for example, to fire a Google Analytics 4 (GA4) conversion event or a Google Tag Manager (GTM) trigger when the form is submitted.

Overview

LiveAgent's contact form widget supports custom CSS through a built-in editor. While this editor is intended for CSS only, it is possible to temporarily "escape" the CSS context and insert a <script> block alongside your styles. This technique allows you to attach custom JavaScript — such as a GA4 gtag() conversion call or a GTM dataLayer.push() event — directly to the widget without modifying your website's source code.

Prerequisites

• Administrator access to your LiveAgent account
• A configured contact form widget
• Basic familiarity with JavaScript and your analytics/tag manager setup (GA4, GTM, etc.)

How to Add a Custom Script to the Contact Form Widget

1. Log in to your LiveAgent account and navigate to Configuration.
2. Go to Configuration > Contact form > Contact Buttons/In-page Forms and open the contact form widget you want to modify.
3. In the widget configuration window, select the Design tab.
4. Scroll to the bottom of the Design section and click edit custom CSS.

5. In the custom CSS editor, use the following pattern to temporarily close the CSS block, insert your JavaScript, and then reopen the CSS block:

   </style>
   
   <script>
     // Your custom JavaScript goes here
     // Example: GA4 conversion tracking on form submission
   </script>
   
   <style>

6. Click Save to apply your changes.

How This Works

The custom CSS editor wraps its content inside a <style> tag. By entering </style> at the beginning of your input, you close that tag early. You can then write any valid HTML — including a <script> block — before reopening the style block with <style> at the end. This allows custom scripts to be rendered alongside the widget on the page.

Important Notes

This approach relies on an unofficial workaround using the CSS editor. Always test your changes thoroughly before deploying to a live environment.

• Make sure the </style> and <style> tags are placed correctly — one at the very beginning and one at the very end of your custom CSS editor content — to avoid breaking the widget's styling.
• Any existing custom CSS you have should be placed between the reopened <style> tag and the end of the editor field.