langgenius/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-07-23 04:55:28 -04:00
Code Issues 775 Packages Projects Releases 10 Wiki Activity

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

New Issue
Closed
opened 2026-02-21 18:18:16 -05:00 by yindo · 1 comment
yindo commented 2026-02-21 18:18:16 -05:00
Owner
Copy Link
Copy Source

Originally created by @niemingxing-poper on GitHub (Nov 29, 2024).

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.
WechatIMG294

✔️ Expected Behavior

No response

❌ Actual Behavior

No response

Originally created by @niemingxing-poper on GitHub (Nov 29, 2024). ### Self Checks - [X] This is only for bug report, if you would like to ask a question, please head to [Discussions](https://github.com/langgenius/dify/discussions/categories/general). - [X] I have searched for existing issues [search for existing issues](https://github.com/langgenius/dify/issues), including closed ones. - [X] I confirm that I am using English to submit this report (我已阅读并同意 [Language Policy](https://github.com/langgenius/dify/issues/1542)). - [X] [FOR CHINESE USERS] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:） - [X] 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. ![WechatIMG294](https://github.com/user-attachments/assets/ada4b9ca-e4bf-4996-9935-cb80802bd4aa) ### ✔️ Expected Behavior _No response_ ### ❌ Actual Behavior _No response_
yindo added the 🐞 bugcloud labels 2026-02-21 18:18:16 -05:00
yindo closed this issue 2026-02-21 18:18:16 -05:00
yindo commented 2026-02-21 18:18:16 -05:00
Author
Owner
Copy Link
Copy Source

@dosubot[bot] commented on GitHub (Nov 29, 2024):

@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.

@dosubot[bot] commented on GitHub (Nov 29, 2024): <!-- Greeting --> @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! <!-- Answer --> 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: ```css #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: ```javascript 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: ```html <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 <sup>[[1]](https://github.com/langgenius/dify-docs/blob/main/en/guides/application-publishing/embedding-in-websites.md)</sup><sup>[[2]](https://github.com/langgenius/dify-docs/blob/main/zh_CN/guides/application-publishing/embedding-in-websites.md)</sup>. <!-- Dosu Comment Footer --> *To continue talking to [Dosu](https://dosu.dev), mention @dosu.*
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Knowledge Pipeline
Proposal
WIP
cloud
dependencies
feat:webapp
good first issue
outdated
performance
pull-request
Mirrored from GitHub Pull Request
 python:uv
refactor
size:L
stale
status: accepting prs
status: blocked
status: in discussion
stt & tts
vulnerablity
web
wont-fix
🌊 feat:workflow
🌚 invalid
🐞 bug
👻 feat:rag
💪 enhancement
📚 documentation
🔨 feat:tools
🙋‍♂️ question
🙏 help wanted
🤔 cant-reproduce
🤖 feat:agent
No Label cloud 🐞 bug
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#6988
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?