Appearance

Open Preferences from a Link ​

After a visitor makes a consent choice, Consent Pro shows a small floating button that reopens the preferences panel. You set its corner with Preferences trigger on the Banner Style tab.

If you would rather give visitors a link in your footer (or anywhere else on the page), you can add your own link and hide the floating button.

Keep a way back to preferences

Once the floating button is hidden, your link is the only way for visitors to change their choice. Put it on every page where Consent Pro runs, typically in a shared footer.

1. Add the link ​

Any element can open the preferences panel by calling FinsweetConsentPro.elements.preferences.show().

For example, add this to your footer:

html
<a href="#" id="cookie-settings">Cookie settings</a>

<script>
  document.getElementById('cookie-settings').addEventListener('click', (event) => {
    event.preventDefault();
    window.FinsweetConsentPro?.elements?.preferences?.show?.();
  });
</script>

Keep the script after the link, so the link exists when the script runs. You can change the text and style the link however you want.

In a JavaScript framework ​

In React, Vue, Svelte, or similar, call the API from the element's click handler instead:

jsx
<button type="button" onClick={() => window.FinsweetConsentPro?.elements?.preferences?.show?.()}>
  Cookie settings
</button>

In a custom placeholder ​

The same call works anywhere on the page, including inside your own custom placeholders, so visitors can open the preferences panel right where the blocked content would be:

html
<div id="analytics-placeholder">
  <p>This content is blocked. Accept analytics cookies to load it.</p>
  <a href="#" id="placeholder-cookie-settings">Cookie settings</a>
</div>

<script>
  document.getElementById('placeholder-cookie-settings').addEventListener('click', (event) => {
    event.preventDefault();
    window.FinsweetConsentPro?.elements?.preferences?.show?.();
  });
</script>

2. Hide the floating button ​

Add this rule to your site's stylesheet:

css
consentpro-fixed-preferences {
  display: none !important;
}