WPConsent allows your visitors to change their cookie preferences at any time. This guide shows you how to add a button or link to your website that opens the preferences panel. We offer several methods, from the easiest no-code options to more advanced JavaScript approaches.

Method 1: Using the CSS Class (Easiest)

The simplest way to open the preferences panel is by adding the CSS class wpconsent-open-preferences to any clickable element. WPConsent automatically detects clicks on elements with this class and opens the preferences panel – no JavaScript required.

Adding the Class in Gutenberg

To add the class to a Button block in the WordPress block editor:

1. Add a Button block to your page
2. Enter your button text (e.g., “Cookie Settings” or “Manage Preferences”)
3. Select the button and open the Block settings panel on the right
4. Scroll down to Advanced and expand it
5. In the Additional CSS class(es) field, enter: wpconsent-open-preferences

That’s it! The button will now open the preferences panel when clicked.

Using the Class in HTML

If you’re adding HTML directly (in a Custom HTML block, theme template, or page builder), you can use the class on any element:

On a button:

<button class="wpconsent-open-preferences">Manage Consent</button>

On a link:

<a href="#" class="wpconsent-open-preferences">Cookie Settings</a>

On any element:

<span class="wpconsent-open-preferences" style="cursor: pointer;">Change Preferences</span>

Method 2: Using the Shortcode

WPConsent includes a shortcode that outputs a ready-made preferences button. You can add this to any page, post, widget, or page builder that supports shortcodes.

Basic usage:

[wpconsent_preferences_button]

This outputs a button with the default text “Cookie Preferences”.

Customizing the button text:

[wpconsent_preferences_button text="Manage Cookies"]

Adding custom CSS classes for styling:

[wpconsent_preferences_button text="Cookie Settings" class="my-custom-class"]

Method 3: Inline JavaScript onClick (Advanced)

For more control, you can call the WPConsent.showPreferences() function directly using an onClick attribute:

<a href="#" onClick="WPConsent.showPreferences(); return false;">Show Preferences</a>

The return false; prevents the link from navigating away from the page.

Method 4: JavaScript Event Listener (Advanced)

For developers who prefer separating HTML and JavaScript:

HTML:

<a href="#" class="my-preferences-link">Show Preferences</a>

JavaScript:

document.querySelector('.my-preferences-link').addEventListener('click', function(e) {
    e.preventDefault();
    WPConsent.showPreferences();
});

Method 5: Using WPCode Plugin

If you need to add custom JavaScript but aren’t comfortable editing theme files, you can use a code snippets plugin:

1. Install and activate the WPCode plugin
2. Navigate to Code Snippets > Add Snippet
3. Select “Add Your Custom Code”
4. Name your snippet (e.g., “WPConsent Preferences Button”)
5. Choose JavaScript as the code type
6. Paste your JavaScript code
7. Set insertion to “Auto Insert” with “Site Wide Footer”
8. Save and activate

Which Method Should I Use?

Important Notes

• The JavaScript methods (3-5) require the WPConsent script to be loaded first
• The CSS class and shortcode methods handle this automatically
• All methods work with both WPConsent Lite and Pro versions