How to customize the panel header and footer

How to customize the panel header and footer

You may want to customize the header and the footer of the preference panel using your HTML.
Guess what? It is possible and simple.

To add a custom header, create a div with id jgc-panel-header and a class hidden (or prefix-hidden if you use a custom prefix).

<div id="jgc-panel-header" class="hidden">
  <div class="max-w-3xl flex justify-center mx-auto">
    <div class="px-5 py-3">
      <img class="w-[140px] m-0 p-0" src="/assets/logo.svg" alt="" />
    </div>
  </div>
</div>

Do the same for the footer, just change the ID to jgc-panel-footer

<div id="jgc-panel-footer" class="hidden">
  <div class="max-w-3xl bg-custom mx-auto">
    <div class="px-5 py-3 text-white text-xs flex justify-between uppercase">
      <p>Copyright 2022</p>
      <p>Privacy policy</p>
    </div>
  </div>
</div>