Any idea on how to design the chatbot button?

[SmartMart69]

Hi there,
I am really struggling with the limitations of the design of the intial chatbot button. It takes a prominent and fixed place on the homepage and should really integrate in the overall website design.
Especially the size of the image is very very tiny (it seems to be 30x30 pixels or so) and if I choose the very limited option to make the button bigger, only the colored ring gets bigger.
If you have a feeling for design then you will probably agree that the impression of a homepage can be pulled down by a small (and most likely distorted) image in the corner.
Any workarounds maybe apart from changing the flowise code?
Thanks and regards
Martin

[amansoniamazatic]

@SmartMart69 instead of using import of flowise use my import i slightly modify the chat embed and it will solve your issue below is my embed code:

    import Chatbot from "https://cdn.jsdelivr.net/gh/amansoniamazatic/OneYou_template@latest/web.js";
    Chatbot.init({
        chatflowid: "Enter_Your_Id",
        apiHost: "Enter_Your_API_Host",
        chatflowConfig: {
        // topK: 2
        },
        theme: {
        button: {
            backgroundColor: '#FF6B00',
            right: 10,
            bottom: 25,
            size: 'large',
            iconColor: 'white',
            customIconSrc: 'Chatbot_Icon.gif',
        },
        chatWindow: {
            showTitle: true, // show/hide the title bar
            title: "OneYou - IT’S ALL ABOUT YOU",
            titleAvatarSrc: 'OneYou_main_logo.png',
            welcomeMessage: 'Hello! Welcome to OneYou. How can we help you?',
            backgroundColor: '#FFFFFF',
            width: 400,
            fontSize: 16,
            poweredByTextColor: '#000000',
            botMessage: {
            backgroundColor: '#F7F8FF',
            textColor: '#484F51',
            showAvatar: true,
            avatarSrc: 'Chat_message_logo.png',
            },
            userMessage: {
            backgroundColor: '#3B81F6',
            textColor: '#FFFFFF',
            showAvatar: true,
            avatarSrc: 'Chat_message_user.gif',
            },
            textInput: {
            placeholder: 'Type your question',
            backgroundColor: '#FFFFFF',
            textColor: '#303235',
            sendButtonColor: '#3B81F6',
            },
        },
        },
    });

[SmartMart69]

@amansoniamazatic
Ok cool, looks interesting - but how can I change the design of the button? For example the shape should be round...?

[ChatGurus]

Ok, hosting my own web.js is the solution - within that I can try to find the right spot where to influence some ui details

[amansoniamazatic]

@ChatGurus I have already said the same thing. Please check my imported file; it has already been modified.