UI Control
Programmatically show and hide the consent banner, preferences dialog, and fixed preferences button.
The OptinStack.ui API lets you programmatically control the visibility of consent UI elements.
ui.show(target)
Shows a consent UI element.
window.OptinStack.ui.show('banner');
window.OptinStack.ui.show('preferences');
window.OptinStack.ui.show('fixedPreferences');Targets
| Target | Description |
|---|---|
'banner' | The main consent banner |
'preferences' | The full preferences/settings dialog |
'fixedPreferences' | The persistent "Manage Cookies" button |
ui.hide(target)
Hides a consent UI element.
window.OptinStack.ui.hide('banner');
window.OptinStack.ui.hide('preferences');
window.OptinStack.ui.hide('fixedPreferences');Common Patterns
"Manage Cookies" Link
Add a link anywhere on your page that opens the preferences dialog:
<a href="#" id="manage-cookies">Cookie Settings</a>
<script>
document.getElementById('manage-cookies').addEventListener('click', function (e) {
e.preventDefault();
window.OptinStack.ui.show('preferences');
});
</script>Re-prompt After Consent Expiry
Use consent.renew() to reset choices and re-show the banner:
window.OptinStack.consent.renew();This resets the stored consent to defaults and shows the banner again, letting the user make fresh choices.
Programmatic Accept Flow
Build a custom consent flow in your own UI and use the API to record the decision:
// Your custom "Accept" button
document.getElementById('my-accept-btn').addEventListener('click', function () {
window.OptinStack.consent.update({
analytics: true,
marketing: false,
preferences: true,
});
});When using the API to record consent, the SDK still handles script unblocking, cookie persistence, server sync, and Google Consent Mode updates automatically.