How to put/embed this html into quarto web footer?

[dikiprawisuda]

Description

Greetings!

I want to put the following AI attribution "badge" into my webpage footer. The badge is generated from https://aiattribution.github.io/

<div style="display: flex; align-items: center; white-space: nowrap; gap: 0.5rem; padding: 8px;">
  <div style="font-family: IBM Plex Sans; font-weight: 400; font-size: 16px; line-height: 22px; letter-spacing: 0px;">
    <a rel="noopener noreferrer" href="https://aiattribution.github.io/statements/AIA-HAb-SeCe-Hin-R-v1.0" data-cy="recommended-attribution-statement-text" target="_blank" style="font-family: IBM Plex Sans; font-weight: 400; font-size: 16px; line-height: 22px; letter-spacing: 0px;">AIA Human-AI blend, Stylistic edits, Content edits, Human-initiated, Reviewed v1.0 </a>
  </div>
  <div style="display: flex; gap: 0.5rem;">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g clip-path="url(#clip0_50_8)">
        <path d="M12 23.5C18.3513 23.5 23.5 18.3513 23.5 12C23.5 5.64873 18.3513 0.5 12 0.5C5.64873 0.5 0.5 5.64873 0.5 12C0.5 18.3513 5.64873 23.5 12 23.5Z" fill="#525252" stroke="#161616">
        </path>
        <path d="M11.5 23.4892C5.38069 23.2274 0.5 18.1836 0.5 11.9999C0.5 5.8162 5.38069 0.772398 11.5 0.51062V23.4892Z" fill="white" stroke="#161616">
        </path>
        <path d="M11 1.05078L12 1V23L11 22.9654V1.05078Z" fill="white">
        </path>
        <path d="M9.33184 12.74H6.67184V15.6H5.15184V8.61998H6.67184V11.4H9.33184V8.61998H10.8518V15.6H9.33184V12.74Z" fill="#161616">
        </path>
        <path d="M18.3971 15.6L17.8971 13.94H15.5671L15.0671 15.6H13.5271L15.8271 8.61998H17.7071L19.9771 15.6H18.3971ZM16.7471 9.99998H16.6971L15.9271 12.65H17.5271L16.7471 9.99998Z" fill="white">
        </path>
      </g>
      <defs>
        <clipPath id="clip0_50_8">
          <rect width="24" height="24" fill="white">
          </rect>
        </clipPath>
      </defs>
    </svg>
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx="12" cy="12" r="11.5" stroke="#161616">
      </circle>
      <path d="M18.8535 6.64652L17.3535 5.14652C17.3071 5.10007 17.252 5.06322 17.1913 5.03808C17.1307 5.01294 17.0656 5 17 5C16.9343 5 16.8693 5.01294 16.8087 5.03808C16.748 5.06322 16.6929 5.10007 16.6465 5.14652L13.7929 8.00002H12.5473C11.4072 8.0009 10.2955 8.3557 9.36562 9.01543C8.43576 9.67516 7.73364 10.6073 7.35618 11.6831L5.02808 18.335C4.99702 18.4239 4.99166 18.5197 5.01262 18.6114C5.03358 18.7032 5.08001 18.7871 5.14658 18.8537C5.21314 18.9202 5.29713 18.9666 5.38889 18.9875C5.48065 19.0085 5.57645 19.0031 5.66528 18.972L12.3171 16.6439C13.3929 16.2664 14.325 15.5642 14.9847 14.6343C15.6444 13.7045 15.9991 12.5928 16 11.4527V10.2071L18.8535 7.35352C18.8999 7.30711 18.9368 7.252 18.9619 7.19135C18.9871 7.13069 19 7.06568 19 7.00002C19 6.93436 18.9871 6.86934 18.9619 6.80869C18.9368 6.74803 18.8999 6.69293 18.8535 6.64652ZM15.1465 9.64652C15.0527 9.74026 15 9.86742 15 10V11.4527C14.9992 12.3855 14.7089 13.2951 14.1692 14.0559C13.6294 14.8167 12.8668 15.3912 11.9865 15.7L7.40268 17.3045L12 12.7071L11.2929 12L6.69568 16.5974L8.29998 12.0135C8.60883 11.1332 9.18331 10.3706 9.94411 9.83083C10.7049 9.29105 11.6145 9.00076 12.5473 9.00002H14C14.1326 8.99999 14.2597 8.94729 14.3535 8.85352L17 6.20707L17.7929 7.00002L15.1465 9.64652Z" fill="#161616">
      </path>
    </svg>
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx="12" cy="12" r="11.5" stroke="#161616">
      </circle>
      <path d="M14 7H8V8H14V7Z" fill="#161616">
      </path>
      <path d="M14 9H8V10H14V9Z" fill="#161616">
      </path>
      <path d="M11 11H8V12H11V11Z" fill="#161616">
      </path>
      <path d="M10 16H8V17H10V16Z" fill="#161616">
      </path>
      <path d="M18.8535 13.6465L17.3535 12.1465C17.3071 12.1001 17.252 12.0632 17.1913 12.0381C17.1307 12.0129 17.0657 12 17 12C16.9343 12 16.8693 12.0129 16.8087 12.0381C16.748 12.0632 16.6929 12.1001 16.6465 12.1465L12 16.7929V19H14.2071L18.8535 14.3535C18.9 14.3071 18.9368 14.252 18.9619 14.1913C18.9871 14.1307 19 14.0657 19 14C19 13.9343 18.9871 13.8693 18.9619 13.8087C18.9368 13.748 18.9 13.6929 18.8535 13.6465ZM13.7929 18H13V17.2071L15.5 14.7071L16.2929 15.5L13.7929 18ZM17 14.7929L16.2071 14L17 13.2071L17.7929 14L17 14.7929Z" fill="#161616">
      </path>
      <path d="M10 19H7C6.73487 18.9997 6.48068 18.8943 6.2932 18.7068C6.10572 18.5193 6.00028 18.2651 6 18V6C6.00028 5.73487 6.10572 5.48068 6.2932 5.2932C6.48068 5.10572 6.73487 5.00028 7 5H15C15.2651 5.00028 15.5193 5.10572 15.7068 5.2932C15.8943 5.48068 15.9997 5.73487 16 6V11H15V6H7V18H10V19Z" fill="#161616">
      </path>
    </svg>
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M18 17H16.5V16H18V8H16.5V7H18C18.2651 7.0003 18.5193 7.10576 18.7068 7.29323C18.8942 7.4807 18.9997 7.73488 19 8V16C18.9996 16.2651 18.8942 16.5193 18.7067 16.7067C18.5193 16.8942 18.2651 16.9996 18 17Z" fill="#161616">
      </path>
      <path d="M15.5 13C16.0523 13 16.5 12.5523 16.5 12C16.5 11.4477 16.0523 11 15.5 11C14.9477 11 14.5 11.4477 14.5 12C14.5 12.5523 14.9477 13 15.5 13Z" fill="#161616">
      </path>
      <path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" fill="#161616">
      </path>
      <path d="M8.5 13C9.05228 13 9.5 12.5523 9.5 12C9.5 11.4477 9.05228 11 8.5 11C7.94772 11 7.5 11.4477 7.5 12C7.5 12.5523 7.94772 13 8.5 13Z" fill="#161616">
      </path>
      <path d="M7.5 17H6C5.73488 16.9997 5.4807 16.8942 5.29323 16.7068C5.10576 16.5193 5.0003 16.2651 5 16V8C5.00026 7.73486 5.10571 7.48066 5.29319 7.29319C5.48066 7.10571 5.73486 7.00026 6 7H7.5V8H6V16H7.5V17Z" fill="#161616">
      </path>
      <circle cx="12" cy="12" r="11.5" stroke="#161616">
      </circle>
      <circle cx="12" cy="12" r="11.5" stroke="#161616">
      </circle>
    </svg>
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx="12" cy="12" r="11.5" stroke="#161616">
      </circle>
      <path d="M10 6C10.4945 6 10.9778 6.14662 11.3889 6.42133C11.8 6.69603 12.1205 7.08648 12.3097 7.54329C12.4989 8.00011 12.5484 8.50277 12.452 8.98773C12.3555 9.47268 12.1174 9.91814 11.7678 10.2678C11.4181 10.6174 10.9727 10.8555 10.4877 10.952C10.0028 11.0484 9.50011 10.9989 9.04329 10.8097C8.58648 10.6205 8.19603 10.3 7.92133 9.88893C7.64662 9.4778 7.5 8.99445 7.5 8.5C7.5 7.83696 7.76339 7.20107 8.23223 6.73223C8.70107 6.26339 9.33696 6 10 6ZM10 5C9.30777 5 8.63108 5.20527 8.0555 5.58986C7.47993 5.97444 7.03133 6.52107 6.76642 7.16061C6.50151 7.80015 6.4322 8.50388 6.56725 9.18282C6.7023 9.86175 7.03564 10.4854 7.52513 10.9749C8.01461 11.4644 8.63825 11.7977 9.31718 11.9327C9.99612 12.0678 10.6999 11.9985 11.3394 11.7336C11.9789 11.4687 12.5256 11.0201 12.9101 10.4445C13.2947 9.86892 13.5 9.19223 13.5 8.5C13.5 7.57174 13.1313 6.6815 12.4749 6.02513C11.8185 5.36875 10.9283 5 10 5Z" fill="#161616">
      </path>
      <path d="M15 19H14V16.5C14 15.837 13.7366 15.2011 13.2678 14.7322C12.7989 14.2634 12.163 14 11.5 14H8.5C7.83696 14 7.20107 14.2634 6.73223 14.7322C6.26339 15.2011 6 15.837 6 16.5V19H5V16.5C5 15.5717 5.36875 14.6815 6.02513 14.0251C6.6815 13.3687 7.57174 13 8.5 13H11.5C12.4283 13 13.3185 13.3687 13.9749 14.0251C14.6313 14.6815 15 15.5717 15 16.5V19Z" fill="#161616">
      </path>
      <path d="M16.5 12.09L15.205 10.795L14.5 11.5L16.5 13.5L20 10L19.295 9.295L16.5 12.09Z" fill="#161616">
      </path>
    </svg>
  </div>
</div>

I have saved it in html/ai-attribution-full.html. Can I include the following in _quarto.yml, expecting it to render the SVG as well?

website:
  title: "tiutle"
  navbar:
  page-footer:
    center: html/ai-attribution-full.html

format:

---

EDIT:

I can make it work by changing it into this:

website:
  title: "tiutle"
  navbar:
  page-footer: |
    <embed src="html/ai-attribution-short.html" width="100%" height="100%"/>

format:

But there are other issues.

1. The "element" is asking for a bigger vertical "margin/padding" than I am expecting.
2. It failed to "render" the HTML in another child qmds, i.e., it shows a big element with a big GitLab logo in it and 404.

[mcanouil]

page-footer only supports strings not file paths, see https://quarto.org/docs/websites/website-navigation.html#page-footer.

The "element" is asking for a bigger vertical "margin/padding" than I am expecting.

Use your favourite browser to figure out the page-footer selectors and tweak the CSS as you need.

It failed to "render" the HTML in another child qmds, i.e., it shows a big element with a big GitLab logo in it and 404.

You need to ensure the path is resolved properly regardless of the page calling the footer.
here the path is relative thus why it does not work everywhere.

[dikiprawisuda]

Thank you!

If I want to put this "badge" on the footer, is there a way to do this using page-footer? Maybe using shortcodes or Quarto extension?
For now, it works using include-after-body:

format:
  html:
   include-after-body: html/ai-attribution-short.html

[mcanouil]

Shortcodes might work, you'll have to try.