Search code examples
javascriptdomsapui5web-chatsap-conversational-ai

How to make DOM element draggable on SAPUI5 app?

I am using Sap Conversational AI on my SAPUI5 app via Webchat. I added Webchat script on my apps Component.js. It works fine but the chat icon covers the app's footer and I couldn't make it draggable.

Here is component.js code;

    if ( !document.getElementById("chat-bot" )) {
            var s = document.createElement("script");
            s.setAttribute("id", "chat-bot");
            s.setAttribute("src", "https://cdn.cai.tools.sap/webchat/webchat.js");
            document.getElementsByTagName('head')[0].appendChild(s);
        }
        s.setAttribute("channelId", "XXXXX-XXXX-XXXX-XXXXX-XXXXXXX");
        s.setAttribute("token", "XXXXXXXXXXXXXXXXXXXXXXXX");

And here how it looks: Chat-Icon covering footer

Anyone knows how can I make it draggable or put the icon on the footer too?

Solution

  • I don't think this is possible as of now. The chatbot button is included with the below-attached CSS. Obviously overriding this style class you can move the button around but it's not suggestable.

    For your use case, you can try giving the class 'sapUiLargeMarginEnd' to the last footer button to shift the footer buttons to the left.

    By inspecting the button we can see the following properties. If SAP would have provided it to be button integration it would have been easy for us to do the placement.

    enter image description here