You may want to provide your visitors with an easy way to reopen the preferences panel—allowing them to adjust their consent choices at any time—directly from a custom link or button on your site. The WPConsent plugin makes this possible via the JavaScript method WPConsent.showPreferences().

This article covers 3 common approaches:

• Inline (using the onClick attribute in your HTML)
• Adding a click event listener using JavaScript
• How to easily add your custom code to WordPress using the WPCode plugin

1. Inline Approach: Using onClick on an Anchor or Button

You can directly assign the preferences panel to open when a user clicks a link or button using the onClick attribute:

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

Note:
Adding return false; at the end of the onClick prevents the default action of the link (such as scrolling to the top of the page). It’s generally recommended for a smoother user experience.

2. JavaScript Event Listener Approach

For a cleaner separation of markup and behavior (and to avoid inline JavaScript), you can target any element with JavaScript and attach a click event.

Example HTML:

<a href="#" class="showWPConsentPreferences">Show Preferences</a>

JavaScript:

document.querySelector('.showWPConsentPreferences').addEventListener('click', function(e) {
    e.preventDefault();
    WPConsent.showPreferences();
});

• e.preventDefault(); ensures the link doesn’t trigger its default behavior.
• You can use any selector and apply this logic to multiple elements if needed.

Notes

• The method WPConsent.showPreferences() is available after the WPConsent script loads. Ensure your JavaScript runs after the document is ready, or place it at the end of your HTML before the closing </body> tag.
• You can apply this to other element types (e.g., <button>), not just anchor tags.

Example Integration

<!-- HTML -->
<button id="open-preferences">Manage Consent Preferences</button>

<!-- JavaScript -->
<script>
document.getElementById('open-preferences').addEventListener('click', function(e) {
    e.preventDefault();
    WPConsent.showPreferences();
});
</script>

3. Adding Custom JavaScript Easily with the WPCode Plugin

If you aren’t comfortable editing theme files directly or want a safer, update-proof way to add custom JavaScript to your site, you can use the WPCode plugin.

To use WPCode to add your WPConsent.showPreferences() code:

1. Install and activate the WPCode plugin from your WordPress dashboard.
2. In the admin menu, go to Code Snippets > Add Snippet.
3. Select Add Your Custom Code (New Snippet).
4. Give your snippet a name (e.g., “WPConsent Preferences Button”).
5. Choose JavaScript as the code type.
6. Paste your code, for example:
   document.querySelector('.showWPConsentPreferences').addEventListener('click', function(e) { e.preventDefault(); WPConsent.showPreferences(); });
7. Under “Insertion,” select Auto Insert and set to Site Wide Footer (so the code loads on all pages).
8. Save and activate the snippet.

Now, you can add your custom link or button anywhere in your content or theme, for example:

<a href="#" class="showWPConsentPreferences">Show Preferences</a>

The WPConsent preferences panel will appear when that link is clicked.