CrunchGuard includes several presentations for the same consent workflow. The public examples show centered, centered dark, bottom, bottom dark, and bottom-left variants.

Choose the position

Use a centered panel when the privacy decision should be prominent. Use a bottom or bottom-left presentation when the message should remain attached to an edge of the viewport. Test the chosen version on a small phone and a wide desktop.

Choose light or dark

Select the appearance that maintains clear contrast against the page behind it. Check the panel text, service rows, OFF and ON controls, links, and the Save, Decline, and Accept buttons in the selected theme.

Edit the panel content

Replace the example heading, introduction, privacy-policy link, service names, and explanations. The example services are Analytics, YouTube, Google Maps, and Fonts; keep only services the site actually uses.

  • Describe what each switch enables.

  • Use the same name in the panel and the page placeholder.

  • Keep accept and decline choices equally understandable.

  • Link to the site’s actual privacy information.

Preserve the controls

The panel includes per-service OFF and ON controls plus Save selection, Decline services, and Accept all. Do not remove required classes or IDs while restyling them.

Keep reset access

Visitors need a way to reopen or reset their choice. The example project provides a cookie icon and a Reset Cookie Settings action. Test that access after the panel has closed.

Related: Getting started with CrunchGuard and Troubleshooting CrunchGuard consent and placeholders.