# 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.

**warning 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](/runtime/attributes#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;
}
```

## Related

- [JavaScript API reference](/runtime/api) for every `FinsweetConsentPro.elements` method
- [Open preferences trigger](/webflow/#open-preferences-trigger) for the same thing on a Webflow site, using the `fs-consent-element="open-preferences"` attribute