Attaching an event into a notification

GravityView allows you to add custom JavaScript directly to a View through the Custom Code tab in the View Settings. The JavaScript loads only when that View renders, so it won’t run on other pages.

Note: The Custom Code tab requires GravityView 2.19 or later. Placeholders require GravityView 2.50 or later.

How to add custom JavaScript #

Edit your View in WordPress.
Scroll down to the Settings metabox.
Click the Custom Code tab (the code icon).
Enter your JavaScript in the Custom JavaScript field.
Click Update or Publish.

The JavaScript is placed inside <script> tags in the page’s footer, after GravityView’s scripts have loaded. This means jQuery and GravityView’s frontend library are available when your code runs.

Available placeholders #

GravityView provides placeholders that are automatically replaced with View-specific values. These work in both the Custom CSS and Custom JavaScript fields.

Placeholder	Replaced with	Example output
`VIEW_SELECTOR`	A CSS selector targeting only this View	`.gv-container.gv-container-123`
`VIEW_ID`	The View’s ID number	`123`
`GF_FORM_ID`	The connected Gravity Forms form ID	`5`

Example: highlight a row on click

jQuery( 'VIEW_SELECTOR .gv-table-view tbody tr' ).on( 'click', function() {
    jQuery( this ).toggleClass( 'highlighted' );
});

jQuery( 'VIEW_SELECTOR .gv-table-view tbody tr' ).on( 'click', function() {
    jQuery( this ).toggleClass( 'highlighted' );
});

Example: log the View and form IDs

console.log( 'View ID:', 'VIEW_ID' );
console.log( 'Form ID:', 'GF_FORM_ID' );

console.log( 'View ID:', 'VIEW_ID' );
console.log( 'Form ID:', 'GF_FORM_ID' );

Important notes #

Placeholders are case-sensitive and must be uppercase.
Placeholders are replaced everywhere in your code, including inside comments and strings.
Custom JavaScript is output only once per View, even if the same View is embedded multiple times on a page.
If the View does not have a connected form, GF_FORM_ID is left as-is.
Warning: Invalid JavaScript can break GravityView’s functionality. Test your code in the browser console first.

Developer notes #

Custom JavaScript is added using WordPress’s wp_add_inline_script() function, attached to the gravityview-fe-view script handle with the after position. This means your code runs after GravityView’s frontend script has loaded.

You can add custom placeholders using the gk/gravityview/custom-code/placeholders filter:

add_filter( 'gk/gravityview/custom-code/placeholders', function( $placeholders, $view, $content ) {
    $placeholders['SITE_URL'] = home_url();
    return $placeholders;
}, 10, 3 );

add_filter( 'gk/gravityview/custom-code/placeholders', function( $placeholders, $view, $content ) {
    $placeholders['SITE_URL'] = home_url();
    return $placeholders;
}, 10, 3 );