Not another floating Bubble - Need alternative method

Ask the Community Customization
1

  • Issue description:
    Hi there!
    I tested the chatbot and decided to integrate it into my website. However, instead of using a floating bubble, I’d prefer to have the chat directly accessible via a link. This link would lead to a dedicated page where the chat is already open and ready to use.
    I already have a floating WhatsApp bubble on my site, and adding another bubble feels overwhelming. Instead, I’d like to add a link in my main menu that opens a page with the chat interface. Ideally, the chat should have a custom width, around 90–100%.
    I believe this should be achievable with JavaScript and CSS, but I’ve been unable to get it working so far. I’m still trying, but any guidance would be greatly appreciated.

  • Link to the page with the widget in question:
    Currently not integrated. Here is the Widget: https://810dbf75a79e4020bd7ca65f1913b764.elf.site

2 Likes
2

Hi @Patrick_Prziborsky
You can try to implement it using this example.

Activate the floating page via a link

To hide the floating bubble add this code to custom css

[class^="FloatingButton__FloatingButtonContainer-sc"] {
  display: none;
}
3 Likes
4

Hi there, @Patrick_Prziborsky :wave:

So, you want to add a chatbot link to the menu on your website, and when someone clicks on it, it will open a page with the chat in a new tab, right?

If it is, you can just add a Share Link of your widget to this menu section. To make the chat window opened by default, please add this code to the Custom JS field on the General tab of your widget’s settings:

function waitForElement(selector, root = document) {
    return new Promise((res) => {
        let i = 0;

        function check() {
            const component = root.querySelector(selector);

            if (component) {
                res(component);
            } else if (i !== 50) {
                setTimeout(check, 100);
                i++;
            }
        }

        check();
    });
}

waitForElement("[class*='eapps-ai-chatbot'] button").then((bubble) => {
    const window = bubble.parentNode.parentNode.querySelector("[class*='window-transition__Container-sc']");
    if (!window) {
        bubble?.click();
    }
});

To adjust the width of the chat window, feel free to use this CSS code:

[class*='window-transition__Container-sc'] {
  width: 500px;
}

However, if it’s not exactly what you meant, please provide more details on your use case :slightly_smiling_face:

1 Like