https://discord.gg/botpress logo
Join Discord
Powered by
Is there a possibility to add a CTA / Popup?
# 🤝help
b
Is there a possibility to add a CTA / Popup that in the right corner of the side that says something like "Click here to chat with us!". Basically anything that makes this tiny icon seen better without having to making it too big. That would be very helpful!
f
I dont think there is any way to add something to the icon. You can change the image for the icon if that helps. You can also contact botpress support. Another alternative to this is adding a bubble on your website which points down to the widget like this
heres the code for the basic bubble if your interested: body { background-color: #bbbbbb; margin: 0; /* Remove default margin */ } section { width: 100%; height: 89.9vh; display: flex; justify-content: flex-end; /* Align content to the right */ align-items: flex-end; /* Align content to the bottom */ padding: 20px; /* Add some padding */ box-sizing: border-box; /* Include padding in the total width */ } div.chatBubble { background-color: #fff; width: 250px; padding: 20px; border-radius: 10px; } div.chatBubble p { margin: 0; font-size: 18px; text-align: center; } div.chatBubble::before { content: ''; position: absolute; top: 87%; right: 20px; /* Adjust the distance from the right side */ border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #fff; } Click here to chat with us!
b
Thank you so much! I put this code in the same part as the botpress code is in. Somehow it is not displaying right, like it is on your side.
f
thats strange, can you send me a screenshot of both the code and what its displaying, there might be a formatting error
b
Here the code and an image of the result. @future-action-19564 thanks
message
f
this line here: 
margin: 0; /* Remove default margin /
you forgot to add a 
*
before the last 
/
also the comments are all messed up, which is messing everything up, ill delete the comments and give you the code
This should work
Copy code
<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: #bbbbbb;
            margin: 0; 
        }

        section {
            width: 100%;
            height: 89.9vh;
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;
            padding: 20px; 
            box-sizing: border-box; 
        }

        div.chatBubble {
            background-color: #fff;
            width: 250px;
            padding: 20px;
            border-radius: 10px;
        }

        div.chatBubble p {
            margin: 0;
            font-size: 18px;
            text-align: center;
        }

        div.chatBubble::before {
            content: '';
            position: absolute;
            top: 87%;
            right: 20px; 
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-top: 20px solid #fff;
        }
    </style>
</head>
<body>
    <section>
        <div class="chatBubble">
            <p>Click here to chat with us!</p>
        </div>
    </section>
</body>
</html>
b
Ok, now everything is broken haha. Maybe take a look at the site: https://galabau-bidon.de You have to accept all cookies to display the chatbot.
f
Alright, I did a few changes which seemed to work on my portfolio website which is kind of similar to your website but im not 100% if it would work on yours, so try this:
Copy code
<!DOCTYPE html>
<html>
<head>
    <style>
        section {
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;
            box-sizing: border-box; 
        }
    
        div.chatBubble {
            background-color: #a39e9e;
            width: 250px;
            padding: 20px;
            border-radius: 10px;
            position: fixed;
            top: 82%;
            right: 20px; 
        }
    
        div.chatBubble p {
            margin: 0;
            font-size: 18px;
            text-align: center;
        }
    
        div.chatBubble::before {
            content: '';
            position: fixed;
            top: 87%;
            right: 20px; 
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-top: 20px solid #a39e9e;
        }
        div.text{
            margin-top: 500px;
        }
    </style>
</head>
<body>
    <section>
        <div class="chatBubble">
            <p>Click here to chat with us!</p>
        </div>
    </section>
</body>
</html>
a
message has been deleted
f
mb
b
So this is already looking still better, but still not prefect. 1. My header is looking buggy. 2. This Bubble is just showing up on a specific layers, so it would have to be on the upper layer.
s
Thanks to @future-action-19564 I've designed my button in such a way that it doesn't look too bad 😊 take a look at it here: https://unikataesthetik.de
f
No problem and your website looks great !
b
Forgot to add pictures. @future-action-19564
f
Ok, so for the other parts overlapping, we can use a simple trick called z-index which i added to the section part of the code and set it to 9999, you can change it if youd like. This value forces the sign to be over everything on the webpage including the botpress widget but if youd like for it to be under the botpress widget but above everything else: you can set the z-index of the botpress widget in your bot's CSS stylesheet to 9999 and the z-index of the sign to 9998.
For the top part being messed up, I just added margin and padding 0 to the body
Heres the final code, hope this works lol
Copy code
<!DOCTYPE html>
<head>
     <style>
        body {
            position: relative;
            margin: 0;
            padding: 0;
        }
    
        section {
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;
            box-sizing: border-box;
            position: fixed;
            bottom: 130px;
            right: 20px;
            z-index: 9999;
        }
    
        div.chatBubble {
            background-color: #a39e9e;
            width: 250px;
            padding: 20px;
            border-radius: 10px;
            position: absolute;
            bottom: 100%;
            right: 0;
        }
    
        div.chatBubble p {
            margin: 0;
            font-size: 18px;
            text-align: center;
        }
    
        div.chatBubble::before {
            content: '';
            position: absolute;
            top: 100%;
            right: 20px;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-top: 20px solid #a39e9e;
        }
    </style>
</head>
<body>
    <section>
        <div class="chatBubble">
            <p>Click here to chat with us!</p>
        </div>
    </section>
</body>
</html>
b
Seems like this code has pretty much the same 2 problems. 1. Header is still buggy 2. Bubble just shows up on certain sections, even after editing the z index
f
ok i have redesigned the code now and the top bar shouldn't be affected up anymore. As for the z-index, im not exactly sure what the problem might be especially since i havent seen your website's code and everything but Im guessing it might have to do with the Javascript you implemented for the scroll effects. I'd reccommend putting all your HTML + CSS + JS into ChatGPT and ask it for what might be the problem or go to some online forum like Stack Overflow
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
    <style>

    
        .chat-bubble {
        position: fixed;
        bottom: 90px;
        right: 1px; 
        z-index: 9999; 
        background-color: #f1f1f1;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        transform: translate(-50%, -50%);
        }

        .triangle {
        position: absolute;
        top: 100%;
        left: calc(50% + 20px);
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #f1f1f1;
        }



        .content {
        color: black;
        }

    </style>
</head>
<body>
    <div class="chat-bubble">
        <div class="triangle">

        </div>
        <div class="content">
          Talk with us!
        </div>
    </div>     
</body>
</html>
@brash-cricket-68797
b
That worked perfectly, thank you so much!
p
Hi Aurélien! What have you done to add the chat bubble behind the chat box?
b
Hey, you have to play around with the z-index of the bubble.
p
Got it, thanks! And how could you remove the chat conversation history and that down button? Thanks for the previous reply!
b
You have to add some extra code in the . Here my settings: 'useSessionStorage': true, 'showBotInfoPage': false, 'enableConversationDeletion': true, 'enableTranscriptDownload': false, 'showConversationsButton': false, 'enablePersistHistory': false, 'showTimestamp': false,
p
thanks man! worked great!
f
Hi I know this is an old thread but I’m trying to do the same thing can anyone help?
Hi I know this is an old thread but I’m trying to do the same thing can anyone help?
137 Views
PreviousNext
Powered by