Mintplex-Labs/anything-llm
1
0
Fork 0
mirror of https://github.com/Mintplex-Labs/anything-llm.git synced 2026-07-19 14:13:35 -04:00
Code Issues 328 Packages Projects Releases 10 Wiki Activity

[GH-ISSUE #676] [FEAT]: AnythingLLM Embed via iframe #390

New Issue
Closed
opened 2026-02-22 18:19:16 -05:00 by yindo · 3 comments
yindo commented 2026-02-22 18:19:16 -05:00
Owner
Copy Link
Copy Source

Originally created by @timothycarambat on GitHub (Feb 5, 2024).
Original GitHub issue: https://github.com/Mintplex-Labs/anything-llm/issues/676

What would you like to see?

Like we have for #656, we should add portability for iframe of the embed via a src attribute with styling via URL query parameters.

Functionally, this works the same as the regular chat embed, but it will scale to the container dimensions of the iframe

Originally created by @timothycarambat on GitHub (Feb 5, 2024). Original GitHub issue: https://github.com/Mintplex-Labs/anything-llm/issues/676 ### What would you like to see? Like we have for #656, we should add portability for `iframe` of the embed via a `src` attribute with styling via URL query parameters. Functionally, this works the same as the regular chat embed, but it will scale to the container dimensions of the iframe
yindo added the enhancementfeature request labels 2026-02-22 18:19:16 -05:00
yindo closed this issue 2026-02-22 18:19:16 -05:00
yindo commented 2026-02-22 18:19:16 -05:00
Author
Owner
Copy Link
Copy Source

@jopdorp commented on GitHub (Apr 18, 2024):

This would be grat, because currently the embed breaks the styling of many websites

@jopdorp commented on GitHub (Apr 18, 2024): This would be grat, because currently the embed breaks the styling of many websites
yindo commented 2026-02-22 18:19:16 -05:00
Author
Owner
Copy Link
Copy Source

@Smocvin commented on GitHub (May 24, 2024):

This is what I did on my website without breaking the styles. On all pages with the chat, you should include the style and script:

<style>
    /* Style for the iframe */
    #myframeme {
        position: fixed;
        height: 100%;
        width: 100%;
        bottom: 0;
        right: 0;
        z-index: -100;
        border: none;
    }

    /* Style for the green button */
    .green-button {
        position: fixed;
        width: 60px;
        height: 60px;
        background-color: rgba(0, 128, 0, 0.5);
        background-image: url(https://www.your-website.com/chat/chat.png);
        background-size: cover;
        background-position: center;
        border-radius: 50%;
        bottom: 0;
        right: 0;
        cursor: pointer;
        z-index: 1001;
        margin-bottom: 3rem;
        margin-right: 2rem;
        transition: width 0.2s ease, height 0.2s ease, margin 0.2s ease;
    }

    /* Hover effect for the green button */
    .green-button:hover {
        width: 65px;
        height: 65px;
        margin-bottom: 2.75rem;
        margin-right: 1.75rem;
    }
</style>

<!-- Container for the iframe -->
<div class="myframe"></div>

<!-- Green button element -->
<div class="green-button" id="greenButton"></div>

<script>
    window.onload = function() {
        var frameContainer = document.querySelector(".myframe");

        // Check if the iframe is already present, if not, create it
        if (!frameContainer.querySelector("#myframeme")) {
            var iframe = document.createElement("iframe");
            iframe.id = "myframeme";
            iframe.style.cssText = "position:fixed; height:100%; width:100%; bottom:0; right:0; z-index:-100; border:none;";
            iframe.src = "https://www.your-website.com/chat/";
            frameContainer.appendChild(iframe);
        }

        // Add click event listener to the green button
        document.getElementById("greenButton").addEventListener("click", function() {
            var iframe = document.getElementById("myframeme");
            iframe.style.zIndex = "2001";  // Bring the iframe to the front

            // Create a MutationObserver to observe changes in the iframe's document
            // NOTE: This will not work for cross-origin iframes
            new MutationObserver(function(mutations, observer) {
                (function(observer) {
                    try {
                        var closeButton = (iframe.contentDocument || iframe.contentWindow.document).querySelector('button[aria-label="Close"]');
                        if (closeButton) {
                            // Add event listener to the close button to send the iframe back
                            closeButton.addEventListener("click", function() {
                                iframe.style.zIndex = "-100";
                                observer.disconnect();
                            });
                        }
                    } catch (error) {
                        console.error("Error accessing iframe contents:", error);
                    }
                })(observer);
            }).observe(iframe.contentDocument || iframe.contentWindow.document, {
                childList: true,
                subtree: true
            });

            // Set a timeout to ensure the iframe content is loaded
            setTimeout(function() {
                try {
                    var toggleButton = (iframe.contentDocument || iframe.contentWindow.document).querySelector('button[aria-label="Toggle Menu"]');
                    if (toggleButton) {
                        toggleButton.click();  // Click the toggle button if found
                    } else {
                        iframe.style.zIndex = "2001";  // Ensure iframe is in front
                    }
                } catch (error) {
                    console.error("Error accessing iframe contents:", error);
                    iframe.style.zIndex = "2001";  // Ensure iframe is in front
                }
            }, 100);
        });
    };
</script>

Note that the script will not work on cross-origin websites.
Change all links in the files from "your-website" to your actual website. (The script will load HTML)
XXXXXXXXXXXXXXXXXXXXXXXXXXXXX - change to you chat embed-id
next HTML code will be in https://www.your-website.com/chat/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Embedded Content</title>
</head>
<body>
    <script
        defer
        data-embed-id="XXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
        data-base-api-url="https://your-website.com:3001/api/embed"   // only use https if Anything LLM will run with SSL 
        src="https://www.your-website.com/chat/anythingllm-chat-widget.min.js">
    </script>
</body>
</html>

Download zip anythingllm-chat-widget.min.zip and extract to https://www.your-website.com/chat/

@Smocvin commented on GitHub (May 24, 2024): **This is what I did on my website without breaking the styles. On all pages with the chat, you should include the style and script:** ``` <style> /* Style for the iframe */ #myframeme { position: fixed; height: 100%; width: 100%; bottom: 0; right: 0; z-index: -100; border: none; } /* Style for the green button */ .green-button { position: fixed; width: 60px; height: 60px; background-color: rgba(0, 128, 0, 0.5); background-image: url(https://www.your-website.com/chat/chat.png); background-size: cover; background-position: center; border-radius: 50%; bottom: 0; right: 0; cursor: pointer; z-index: 1001; margin-bottom: 3rem; margin-right: 2rem; transition: width 0.2s ease, height 0.2s ease, margin 0.2s ease; } /* Hover effect for the green button */ .green-button:hover { width: 65px; height: 65px; margin-bottom: 2.75rem; margin-right: 1.75rem; } </style> <!-- Container for the iframe --> <div class="myframe"></div> <!-- Green button element --> <div class="green-button" id="greenButton"></div> <script> window.onload = function() { var frameContainer = document.querySelector(".myframe"); // Check if the iframe is already present, if not, create it if (!frameContainer.querySelector("#myframeme")) { var iframe = document.createElement("iframe"); iframe.id = "myframeme"; iframe.style.cssText = "position:fixed; height:100%; width:100%; bottom:0; right:0; z-index:-100; border:none;"; iframe.src = "https://www.your-website.com/chat/"; frameContainer.appendChild(iframe); } // Add click event listener to the green button document.getElementById("greenButton").addEventListener("click", function() { var iframe = document.getElementById("myframeme"); iframe.style.zIndex = "2001"; // Bring the iframe to the front // Create a MutationObserver to observe changes in the iframe's document // NOTE: This will not work for cross-origin iframes new MutationObserver(function(mutations, observer) { (function(observer) { try { var closeButton = (iframe.contentDocument || iframe.contentWindow.document).querySelector('button[aria-label="Close"]'); if (closeButton) { // Add event listener to the close button to send the iframe back closeButton.addEventListener("click", function() { iframe.style.zIndex = "-100"; observer.disconnect(); }); } } catch (error) { console.error("Error accessing iframe contents:", error); } })(observer); }).observe(iframe.contentDocument || iframe.contentWindow.document, { childList: true, subtree: true }); // Set a timeout to ensure the iframe content is loaded setTimeout(function() { try { var toggleButton = (iframe.contentDocument || iframe.contentWindow.document).querySelector('button[aria-label="Toggle Menu"]'); if (toggleButton) { toggleButton.click(); // Click the toggle button if found } else { iframe.style.zIndex = "2001"; // Ensure iframe is in front } } catch (error) { console.error("Error accessing iframe contents:", error); iframe.style.zIndex = "2001"; // Ensure iframe is in front } }, 100); }); }; </script> ``` **Note that the script will not work on cross-origin websites. Change all links in the files from "your-website" to your actual website. (The script will load HTML) XXXXXXXXXXXXXXXXXXXXXXXXXXXXX - change to you chat embed-id next HTML code will be in https://www.your-website.com/chat/index.html** ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Embedded Content</title> </head> <body> <script defer data-embed-id="XXXXXXXXXXXXXXXXXXXXXXXXXXXXX" data-base-api-url="https://your-website.com:3001/api/embed" // only use https if Anything LLM will run with SSL src="https://www.your-website.com/chat/anythingllm-chat-widget.min.js"> </script> </body> </html> ``` **Download zip [anythingllm-chat-widget.min.zip](https://github.com/Mintplex-Labs/anything-llm/files/15441096/anythingllm-chat-widget.min.zip) and extract to https://www.your-website.com/chat/**
yindo commented 2026-02-22 18:19:16 -05:00
Author
Owner
Copy Link
Copy Source

@andul commented on GitHub (Dec 3, 2024):

Yes, an iframe embed would be great and easy! Read on the main page that

@andul commented on GitHub (Dec 3, 2024): Yes, an iframe embed would be great and easy! Read on the main page that <iframe> is already possible but then came to this issue.
yindo changed title from [FEAT]: AnythingLLM Embed via `iframe` to [GH-ISSUE #676] [FEAT]: AnythingLLM Embed via `iframe` 2026-06-05 14:35:03 -04:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Desktop
Docker
Integration Request
Integration Request
OS: Linux
OS: Mobile
OS: Windows
UI/UX
blocked
bug
bug
core-team-only
documentation
duplicate
embed-widget
enhancement
feature request
github_actions
good first issue
investigating
needs info / can't replicate
possible bug
pull-request
Mirrored from GitHub Pull Request
 question
stage: specifications
wontfix
No Label enhancement feature request
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: Mintplex-Labs/anything-llm#390
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?