BugWP logo BugWP
Back to Community
Home / Community / Plugin → Gutenberg blocks with ai by kadence wp – page builder features

How to Add Custom JavaScript to Kadence Advanced Buttons

24 threads Sep 9, 2025 Plugin → Gutenberg blocks with ai by kadence wp – page builder features

Content

Many users of the Gutenberg Blocks with AI by Kadence WP plugin want to add custom JavaScript functionality, like tracking a goal or pushing data to Google Tag Manager, when a button is clicked. A common request is to add an onclick attribute directly to an Advanced Button block.

Why You Can't Add an Onclick Attribute Directly

The Advanced Button block's interface is designed for configuring standard link and style options. It does not include a field for adding raw HTML attributes like onclick. If you attempt to edit the block's HTML manually to insert this code, the Gutenberg editor will likely flag the block as containing invalid content and may break its visual editing capabilities.

The Recommended Workaround

The most reliable method, as suggested in the sample threads, is to use a separate HTML block or a site-wide script to attach the event listener to your button. This keeps your button block intact and functional within the editor.

Method 1: Using an HTML Block and Script

This method is best for a one-off button on a single page.

  1. Add your Advanced Button block to the page and configure its text, link, and style as normal.
  2. Note the unique CSS class assigned to your button. It will look something like kt-btn-0-action.
  3. Add an HTML block to the same page, preferably after the button.
  4. Paste the following script into the HTML block, replacing 'YOUR_GOAL_ID' with your actual Fathom goal ID and kt-btn-0-action with your button's class.
<script>
document.getElementsByClassName("kt-btn-0-action")[0].addEventListener('click', function(event) {
    // Optional: Prevent the button's default link action if you only want the tracking
    // event.preventDefault();
    
    // Your custom JavaScript here
    fathom.trackGoal('YOUR_GOAL_ID', 0);
});
</script>

Method 2: Using a Site-Wide Script

This method is better if you use the same tracking on multiple buttons across your site.

  1. Add a unique CSS ID to your Advanced Button block. You can find this option in the block's 'Advanced' settings panel.
  2. Add the following code to your theme's functions.php file or a custom code snippet plugin, replacing #your-unique-id with the ID you assigned to the button.
function my_custom_button_tracking() {
    ?>
    <script>
    document.getElementById("your-unique-id").addEventListener('click', function() {
        // Your custom JavaScript here
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'event': 'buttonClick',
            'buttonID': 'your-unique-id'
        });
    });
    </script>
    <?php
}
add_action( 'wp_footer', 'my_custom_button_tracking' );

Conclusion

While the Kadence Advanced Button block does not natively support adding an onclick attribute, the workarounds using JavaScript event listeners are effective and maintain the block's integrity. Based on community feedback, there is a feature request for the Kadence team to consider adding a direct 'on click' function field in a future update.

Related Support Threads Support