how to remove "made with chainlit" footer?

[rakshithsajjan]

I want to build a product using chain lit but the footer makes it kinda unprofessional. Is there anyway to remove it?

[willydouhard]

Not as of now, but we are interested to hear about your use case and requirement to provide the best solution. Can you ping me on discord?

[gilfernandes]

If you are on 0.7.0 or later you can hide the footer by using a custom CSS file.

Instructions:

Add this line to section UI in config.toml in folder .chainlit:

# Custom CSS file that can be used to customize the UI.
custom_css = '/assets/test.css'

In /assets/test.css or whichever CSS file you have add this:

a[href*='https://github.com/Chainlit/chainlit'] {
    visibility: hidden;
}

[wxp16]

hello @gilfernandes , the above version doesn't work for chainlit "0.7.2". The "made with chainlit" footer was still there after setting the custom_css in the config.toml file. Did I miss something?

[onepointconsulting]

@wxp16 Actually I tried out these instructions and it works.

So make sure that you add the property with the css to your ..config.toml file:

# Specify a CSS file that can be used to customize the user interface.
# The CSS file can be served from the public directory or via an external link.
custom_css = "/public/elastic.css"

Then add the file like this:

Then put this in your css file:

a[href*='https://github.com/Chainlit/chainlit'] {
    visibility: hidden;
}

And you get the results:

Here are my dependencies just for checking:

[DaviReisVieira]

Is that actually working? For me, in 0.7.700, no.

[JaredChung]

Stopped working for me when I upgraded to latest chainlit==1.0.100

[enriqueramosg]

It does still work. However, i added also this rule: `css a img[alt="watermark"] { display: none; }

a[href*='https://github.com/Chainlit/chainlit'] { visibility: hidden; }`

[snavid]

it still doesn' t work

[enriqueramosg]

Then explain this :)

[ggralla]

In case it's useful, for version chainlit==1.0.200 this line in the custom CSS file did the trick for me:

.watermark {
  display: none !important;
}

[Nikhi-l]

.watermark {
  display: none !important;
}

not working, any other workaround?

[ggralla]

@Nikhi-l 2 things to check if this still isn't working for you:

1. Confirm that the custom CSS file is being loaded correctly (can use Network tab of Dev Tools of browser)
2. Manually apply styles using "Inspect Element" in Dev Tools of browser to troubleshoot any CSS issues

[Nikhi-l]

@ggralla custom css is not loaded.

i have added the custom css file path in config though

[tonykay]

I didn't play around too much, but it appeared to me (Chainlit version 1.0.200) that the path has to start /public, and I found .public/ or /assets/ both failed. That said I didn't investigate too much.

[Reymond190]

worked for me with chainlit==1.0.401, i did this: config.toml: custom_css = '/public/test.css'

test.css: .watermark { display: none !important; }

[kcentric]

any tip on how to add your own custom logo maybe?

[Spritan]

@kcentric https://docs.chainlit.io/customisation/custom-logo-and-favicon

[tomatyss]

any tip on how to add your own custom logo maybe?

Use custom js like

document.addEventListener('DOMContentLoaded', function() {
    // Function to override the target element content
    function overrideTargetElement() {
      // Select the target element by its class
      const targetElement = document.querySelector('.MuiStack-root.watermark');
      console.log(targetElement);
      
      if (targetElement) {
        // Replacing the content of the target element
        targetElement.innerHTML = `
          <div>
            <p>some text</p>
          </div>
        `;
  
        // Console verification
        console.log('Custom script executed successfully!');
      } else {
        // Console error if the target element is not found
        console.error('Target element not found!');
      }
    }
  
    // Create a MutationObserver to watch for changes in the DOM
    const observer = new MutationObserver(function(mutationsList, observer) {
      for (const mutation of mutationsList) {
        if (mutation.type === 'childList') {
          // Try to find the target element whenever child nodes are added
          const targetElement = document.querySelector('.MuiStack-root.watermark');
          if (targetElement) {
            // If the target element is found, override its content and stop observing
            overrideTargetElement();
            observer.disconnect();
          }
        }
      }
    });
  
    // Start observing the entire document for child node changes
    observer.observe(document.body, { childList: true, subtree: true });
  
    // Call the function initially in case the element is already present
    overrideTargetElement();
  });

[AnupamKris]

@tomatyss will it work even if I toggle the sidebar? or does it revert back to the original?

[Spritan]

@AnupamKris this will do work if you toggle the sidebar

a[href*='https://github.com/Chainlit/chainlit'] {
    visibility: collapse;/* Hides the original text */
    position: relative;
}

a[href*='https://github.com/Chainlit/chainlit']::after {
    content: "Its me."; /* New text to display */
    visibility: visible;
    color: black; /* Color of the new text */
    position: absolute;
    width: 100%;
    height: 100%;
}

[ThatOneCoder20]

@Spritan Is there a way to remove the chainlit logo in the footer and keep the "Built with" text?

[Spritan]

@ThatOneCoder20 havent tried it yet, but best option i can think of is to replace it while keeping he text

[yuyuyu2118]

@ThatOneCoder20,

Yes, it's possible to remove the Chainlit logo from the footer while keeping the "Built with" text. Here are the steps:

1. Uncomment custom_js in the config.toml file.

2. Create a file in the root directory where Chainlit is running, following the same path structure specified in custom_js. For example, if custom_js = "/public/script.js". Note that by default custom_js = "/public/test.js".

3. In this JavaScript file, use the following code:

document.addEventListener('DOMContentLoaded', function() {
    function overrideFooterElement() {
        const footerElement = document.querySelector("#root > div > div > div > div.MuiStack-root.css-1ylu0bo > div.MuiStack-root.css-zpi9s5 > div > div > div.MuiBox-root.css-mww0i9 > div.MuiStack-root.watermark.css-1705j0v > a");
        if(footerElement) {
            const pElement = footerElement.querySelector('p');
            if(pElement) {
                pElement.textContent = 'example text';
            }
        }
    }

    setTimeout(overrideFooterElement, appropriate_time);
});

Replace appropriate_time with the amount of time you want to wait before the function is executed.

This code should be implemented after the DOM is generated. I've used setTimeout for this, but there are also methods to monitor DOM elements. However, my code does not utilize such methods and may not be the cleanest solution.

One thing to note is that using DomContentLoaded alone won't work because this link is dynamically generated. You'll need to use a process like setTimeout or a DOM observer.

This is a temporary solution and there may be better ways to handle this. I hope it can serve as a useful reference for you. Let me know if you have any other questions.

[ThatOneCoder20]

@yuyuyu2118

It didn't work, is there anything in CSS I could use?

[VioletRaven]

Any news about how to remove the footer? There is really no easy solution I guess...