The session style has issues after Dify is embedded in the website.

[niemingxing-poper]

Self Checks

• This is only for bug report, if you would like to ask a question, please head to Discussions.
• I have searched for existing issues search for existing issues, including closed ones.
• I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
• [FOR CHINESE USERS] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:）
• Please do not modify this template :) and fill in all the required fields.

Dify version

Version 0.12.1

Cloud or Self Hosted

Cloud

Steps to reproduce

The session style has issues after Dify is embedded in the website, with the top of the session being completely obscured.

✔️ Expected Behavior

No response

❌ Actual Behavior

No response

[dosubot]

@niemingxing-poper Hello there! I'm here to assist you with any bugs, questions, or contributions you may have regarding Dify. Let's work together to solve this issue!

To address the session styling issues you're experiencing with Dify when embedded in a website, consider the following steps:

1. Modify CSS Variables: You can customize the default styles using CSS variables. For example, adjust the position or size of elements to ensure they are not obscured. Here's a basic example of how you might change the background color:

   #dify-chatbot-bubble-button {
       --dify-chatbot-bubble-button-bg-color: #ABCDEF;
   }

2. Use containerProps Option: This allows you to set inline styles or apply CSS classes to the Dify components. You can adjust styles like width, height, and position to ensure visibility:

   window.difyChatbotConfig = {
       containerProps: {
           style: {
               backgroundColor: '#ABCDEF',
               width: '60px',
               height: '60px',
               borderRadius: '30px',
           },
       },
   }

3. Check for Conflicting Styles: Ensure that your website's CSS is not conflicting with Dify's styles. Use browser developer tools to inspect the elements and see which styles are being applied.

4. Adjust iFrame Styles: If you're using an iframe to embed Dify, you can directly modify the style attribute in the iframe code to adjust its appearance and position:

   <iframe src="https://udify.app/chatbot/ez1pf83HVV3JgWO4" style="width: 80%; height: 80%; min-height: 500px; border: 2px solid #000; position: fixed; bottom: 20px; right: 20px;" frameborder="0" allow="microphone"></iframe>

These steps should help you troubleshoot and resolve the styling issues you're encountering. If the problem persists, reviewing the specific CSS rules applied to the embedded Dify components might provide further insights ^[1][2].

To continue talking to Dosu, mention @dosu.