CSS Customization Issue with Dify Embedded AI Application

Self Checks

[X] I have searched for existing issues search for existing issues, including closed ones.
[X] I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
[X] Please do not modify this template :) and fill in all the required fields.

1. Is this request related to a challenge you're experiencing? Tell me about your story.

Hello Dify Team,

I wanted to share my excitement about Dify - this product is absolutely amazing and the best knowledge base project I have ever used!

What surprised me the most is the ability to embed AI applications into business websites by simply copying the script code into the or tag.

However, I encountered an issue with the no-code configuration. By default, Dify positions itself at the bottom right of the website with a 1rem margin. This position covers the buttons on my website. Regardless of whether I use the script or iframe method to embed Dify, I cannot modify its CSS.

I have previously reported this issue as well, see #5409

I have thought of 3 possible solutions, any of which should meet the requirements:

Passing styles via URL parameters, for example:

<script>
window.difyChatbotConfig = {
token: 'wCXbSRqy3FKmmzqU',
baseUrl: 'http://10.8.2.70',
customCssUrl: 'http://xxx.css' 
}
</script>
<script
src="http://10.8.2.70/embed.min.js"
id="wCXbSRqyz3FKm1mqU"
defer>
</script>

Allow users to customize the DOM and write their own CSS.
Allow developers to completely overwrite the entire page.

Thank you very much for looking into my issue. I have also raised another issue previously, please take a look when you have some time: #5410.

Thanks again!

2. Additional context or comments

No response

3. Can you help us with this feature?

[X] I am interested in contributing to this feature.

langgenius / dify