Custom css doesn't affect copilot

[arkarn]

I am not able to remove the footer in copilot, however I am able to do the same in main UI using custom css. It seems the css doesn't impact copilot, is that by design? If yes, what's the workaround? Please help.

If can't remove footer, then I need to change "Built with {chainlit logo}" to "{my-custom-logo}".

I already tried using custom logo like putting logo_dark.png in /public. This changes the header logo, but not the footer logo.

I am using: chainlit==1.1.202

[jayabdulraman]

I am having the same issue. Has anyone found a fix for this?

[hareeshmu]

Here is the workaround I ended up with:

<script>
  function checkAndHideWatermark() {
      var widget = document.querySelector('#chainlit-copilot');
      var shadowRoot = widget && widget.shadowRoot;
      var watermarkDiv = shadowRoot && shadowRoot.querySelector('div.watermark');
      if (watermarkDiv) {
          watermarkDiv.style.display = 'none';
      }
      setTimeout(checkAndHideWatermark, 100);
  }
  checkAndHideWatermark();
</script>

[pachu4u]

Hi Hareesh,

Thanks for this. Did you add it into the chainlit custom js file or added it into the header where u embed the copilot?

[hareeshmu]

Hi Hareesh,

Thanks for this. Did you add it into the chainlit custom js file or added it into the header where u embed the copilot?

It should be added in the html page where you are embedding the copilot.