https://discord.gg/botpress logo
Join Discord
Powered by
Adding a small message bubble in webchat to bring ...
# 📖tutorials
r
Add this script on top the script of Botpress in your website (separated): 
<div class="chat-bubble"> <span>We are live now!<span class="dot">•</span></span> </div>
then add this CSS:
Copy code
.bp-widget-side { 
        z-index: 999999999 !important;
}
and
Copy code
/*Chatbot Small Bubble Start*/

.chat-bubble {
    z-index:50;
    position: fixed;
    font-weight: 500;
    right: 110px;
    bottom: 43px;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 1px 20px;
    box-shadow: 1px 11px 28px 0px rgb(0 0 0 / 9%);
    -webkit-box-shadow: 1px 11px 28px 0px rgb(0 0 0 / 9%);
    -moz-box-shadow: 1px 11px 28px 0px rgba(0, 0, 0, 0.07);
        animation: bubbleIn 0.6s ease-out;
        /*animation: bubbleIn 0.6s ease-out 3s;*/

}

.chat-bubble span {
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
}

@media only screen and (max-width: 600px) {
.chat-bubble {
    font-size:12px;
    bottom: 46px;
    padding: 0px 10px 0px 10px;
}
}

@keyframes bubbleIn {
    0% {
        transform: scale(0) translateY(50%);
        opacity: 0;
    }
    60% {
        transform: scale(1.1) translateY(-10%);
        opacity: 1;
    }
    100% {
        transform: scale(1) translateY(0);
    }
}

.dot {
    color: green;
    font-size: 30px;
    margin-left: 5px;
    animation: pulse 1s infinite;
    /*display: inline-block;*/
        text-shadow: #1dc91d 1px 1px 7px;
}

@media only screen and (max-width: 600px) {
.dot {
       font-size: 24px; 
       margin-bottom: 0px;
}
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(4);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/*Chatbot Small Bubble End*/
it's responsive too. Change the preferences as you need Good luck! @rhythmic-lizard-47527 for the pulse effect check https://discord.com/channels/1108396290624213082/1228959794069639188. https://cdn.discordapp.com/attachments/1244909544430239776/1244909544652406814/2222.PNG?ex=6656d3dc&is=6655825c&hm=2472ceec1670c5ad13b9de3ef688de042a87278df51b4ca61b06b1b04dfcec0c&
i
🔥 nice
r
you did it wrong pal
add this CSS: .bp-widget-side { z-index: 999999999 !important; }
e
How could I make it close when the chatbot is opened? Or else, it will be covered by the bot. So that it is not always visible if the conversation has already started. Thank you very much for your code! 🙏
r
there is someone who is selling code for the close button you asked for, we will do it later by ourself
i
just give the code to chatgpt and tell him to implement that feature worked perfectly fine for me
p
Could anyone provide some assistance with this? I am trying to integrate it with my site, have tried to just do it in a blank html webpage but this aspect is not showing up at all?
Actually no worries, all set thanks
a
r
gooooooooood!
p
send the css pls
a
I sure will. I am making a tutorial where I will provide custom calendly extension + image upload + the proactive message css as well.
p
very nice!
h
Hey Anfii would you provide me the css for the proactive messages. I have been trying myself to create something like this, but with no success..
n
n
r
It's so much fun to see how it helped you guys!
c
Hi I am sorry but I tried putting the message into my CSS styles but nothing changed
w
All css and js must be on your page not in Botpress webchat style
c
w
You are missing tag for css
c
what is the tag. Is it included in the code above?
w
Copy code
html
<div class="chat-bubble">
  <span>We are live now!<span class="dot">•</span></span>
</div>
<style>
  /*Chatbot Small Bubble Start*/

  .chat-bubble {
    z-index: 50;
    position: fixed;
    font-weight: 500;
    right: 110px;
    bottom: 43px;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 1px 20px;
    box-shadow: 1px 11px 28px 0px rgb(0 0 0 / 9%);
    -webkit-box-shadow: 1px 11px 28px 0px rgb(0 0 0 / 9%);
    -moz-box-shadow: 1px 11px 28px 0px rgba(0, 0, 0, 0.07);
    animation: bubbleIn 0.6s ease-out;
    /*animation: bubbleIn 0.6s ease-out 3s;*/
  }

  .chat-bubble span {
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
  }

  @media only screen and (max-width: 600px) {
    .chat-bubble {
      font-size: 12px;
      bottom: 46px;
      padding: 0px 10px 0px 10px;
    }
  }

  @keyframes bubbleIn {
    0% {
      transform: scale(0) translateY(50%);
      opacity: 0;
    }
    60% {
      transform: scale(1.1) translateY(-10%);
      opacity: 1;
    }
    100% {
      transform: scale(1) translateY(0);
    }
  }

  .dot {
    color: green;
    font-size: 30px;
    margin-left: 5px;
    animation: pulse 1s infinite;
    /*display: inline-block;*/
    text-shadow: #1dc91d 1px 1px 7px;
  }

  @media only screen and (max-width: 600px) {
    .dot {
      font-size: 24px;
      margin-bottom: 0px;
    }
  }

  @keyframes pulse {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(4);
      opacity: 0.7;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  /*Chatbot Small Bubble End*/
</style>
<script src="https://cdn.botpress.cloud/webchat/v2.2/inject.js"></script>
<script src="https://files.bpcontent.cloud/yyyy/mm/dd/hh/yyyymmddhhnnss-XXXXXXXX.js"></script>
c
you are awesome thank you so much
literally tears of joy rn
w
My pleasure 😊
r
🚀 🚀 🚀 🚀
w
Thank to @rhythmic-lizard-47527 for his work I had only write with markdown color sintax
g
hi anfii, you can provide me the css?
If someone wants to hide the message when they press the bubble, I added the following script below this code. const chatBubble = document.querySelector('.chat-bubble'); const iframe = document.querySelector('iframe[name="webchat"]'); const observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.type === 'attributes' && mutation.attributeName === 'class') { if (iframe.classList.contains('bpOpen')) { chatBubble.style.display = 'none'; } } }); }); observer.observe(iframe, { attributes: true });
w
Nice code! Thanks for your input. 😉 I added the reverse functionality: when the webchat is hidden, the 
chat-bubble
is displayed.
Nice code! Thanks for your input. 😉 I added the reverse functionality: when the webchat is hidden, the chat-bubble is displayed. https://cdn.discordapp.com/attachments/1244909544430239776/1355845981194948790/chat-bubble.html?ex=67ea6978&is=67e917f8&hm=a3ca448812aad91b908b9f54d0a6a38502c971de573302e00195a95e973f634e&
66 Views
PreviousNext
Powered by