https://discord.gg/botpress logo
Join Discord
Powered by
New message indicator - Event
# 🤝help
c
Hey there. I'm struggling to create a "New Message" indicator event, and I can't find information anywhere. Ideally, a small pop-up would appear with a small message like "HI I'm here to help you" with the chat widget still closed. On the Developers Console, the event is being sent, but there is no message indicator. Here's my CSS sheet: https://webchat-styler-css.botpress.app/prod/code/9cfe31d4-53f4-4f3c-b42d-b612f5db2c62/v42437/style.css Here's my event code: document.addEventListener("DOMContentLoaded", function(event) { // Your existing code here window.botpressWebChat.onEvent( function (ev) { console.log('LIFECYCLE.LOADED event fired'); window.botpressWebChat.sendEvent({ type: "loadConversation", }); }, ["LIFECYCLE.LOADED"] ); window.addEventListener("message", function (event) { console.log('Window message event:', event.data.type); if (event.data.type === "LIFECYCLE.READY") { console.log('Sending trigger event'); window.botpressWebChat.sendEvent({ type: "trigger", channel: "web", payload: { text: "", }, }); } }); });
@User @microscopic-shampoo-2255 @bitter-magazine-8114 @bright-magazine-792 @fresh-fireman-491 Sorry for the spam.
m
O nooo! I don't mind at all, I am just troubleshooting myself on something so I am in the water right along side you hahah
q
I am planing also this, but I am not yet there. Cant help you atm, sorry.
b
just run {text} and not {text: "",}
b
Hello, did you send the payload with this method?
Copy code
window.botpressWebChat.sendPayload({
  type: 'trigger',
  payload: {
    myCustomProperty: 'hello',
  },
})
Do you want to try to do it with a popup created by yourself, using event.data.type from botpress to display it for a few seconds?
Create the html element with its respective css, keep it hidden, then use the botpress event when it is loaded to make it visible for a few seconds.
i
if you want something like this, I think it would be nice to send a payload with whatever the user writes in that input to send it to the chat flow. If you don't want that input, just make an html element, a small window with a greeting message that only activates for a few seconds when the chat is mounted.
c
@billowy-morning-42410 Thanks for your help. I'm just a little bit confused. Should I replace all my code with that? If not, whichj part of the code?
I can't make it work... Here's my current code: " document.addEventListener("DOMContentLoaded", function (event) { // Your existing code here window.botpressWebChat.onEvent( function (ev) { console.log('LIFECYCLE.LOADED event fired'); window.botpressWebChat.sendEvent({ type: "loadConversation", }); }, ["LIFECYCLE.LOADED"] ); window.addEventListener("message", function (event) { console.log('Window message event:', event.data.type); if (event.data.type === "LIFECYCLE.READY") { console.log('Sending trigger event'); window.botpressWebChat.sendPayload({ type: "trigger", payload: { myCustomProperty: 'hello', // You can customize this payload as needed }, }); } }); }); "
Do I need to do anything on the BotPress end?
@User
Would love to have your eyes on here @straight-musician-77995 & @bright-magazine-792
q
my code is like this " window.botpressWebChat.onEvent( function (ev) { window.botpressWebChat.sendEvent({ type: "loadConversation", }); }, ["LIFECYCLE.LOADED"] ); window.addEventListener("message", function (event) { // console.log(event.data.type); if (event.data.type == "LIFECYCLE.READY") { window.botpressWebChat.sendPayload({ type: 'trigger', payload: { myCustomProperty: window.location.href, }, }) } }); " curently testing and this works
c
Do you need to do anything on BotPress side besides the custom trigger? Something with that "myCustomProperty"? Thanks for your help @quiet-raincoat-89190
I've copied your code and it just doesn't work... Here's the website: https://thenomadworld.org/
q
is that wordpress site?
c
Yes.
Just a confirmation, @quiet-raincoat-89190 : What I'm struggling with is the chatbot widget to show a "new message" notification, or (even better) to have a new message pop up like this image:
c
@chilly-church-46005 , I can hop on a call and try to help you with this. DM me if you would want to do that.
c
@cool-summer-17043 it's more efficiently to share how than to teach how.
c
Up to you, BorisBarzotto already gave you the answer you are looking for. You have to add elements to your website for this. For the screenshot you've shown, one way to achieve it would be to create the pop-up element on your website. Add a script on your website to trigger the bot after a delay, you already have the code to do that and from what I see from the conversation above you already have that covered. Once that happens, you could get your bot to trigger the website using the custom event node, catch that event on your website and then display the payload sent from the bot on the custom element you created on your website to display the text.
c
As far as I know, the "new message" notification doesn't need new script. Should be included already. Sometimes I get the sound to trigger, but nothing visual. The message would be just a bonus.
q
with code that I share it looks like this . I use wpcode plugin. check this video

https://www.youtube.com/watch?v=Mutn-PIAxjI▾

c
@quiet-raincoat-89190 Thanks for your help. Elementor pro have that feature built-in. In my case I can hear the notification, but the red bubble doesn't show up ever... Maybe because I add images to the chatbot widget itself?
q
did you try incognito mode with chrome to open your site? because I had that issue that my browser or plugings where blocking sound etc.
also I have msg come up in chat when trigger happen you have also?
maybe thats why
just something like "Hi, how may I assist you today?" or so.
c
Tried this, nothing different. I normally try in incognito
I have a full chat flow, that starts with a message by the bot. Not sure what you mean?
s
Sorry man, I quit botpress for now
q
if you have chat flow after trigger that display text, than idk. Need to tag botpress developer here. I dont know which one, maybe @crooked-van-25152 @bumpy-butcher-41910 can help.
c
@famous-jewelry-85388 can you please look at this? Thanks
f
Hey guys,
How can I help?
c
@famous-jewelry-85388 , see the first message from @chilly-church-46005 .
f
Hey @chilly-church-46005 , There is two parts to your question:
1- To show the little red dot like @quiet-raincoat-89190 said
2- showing the message like this one:
where you able to do point numbe 1? The red dot part
?
c
Thanks for trying to help everyone! @famous-jewelry-85388 I'm not able to do neither 1 or 2. The red dot (1) with the chat flow trigger would leave me happy already!
The message (2) is an upcoming feature as I'm aware
f
kk, let's take one bit at a time. Can you share with me the full script after removing the sensitive data?
m
Hey could you give me the code as well
c
@mysterious-cricket-72777 if you are just looking to achieve screenshot 1 shared by Bassam you could do something like the following:
Copy code
<script>
      function handleClick() {
        console.log('Button clicked!')
        window.botpressWebChat.sendPayload({
          type: 'trigger',
          payload: {
            id: 21323123,
          },
        })
      }
 
      const button = document.getElementById('myButton')
      button.addEventListener('click', handleClick)
 
      window.botpressWebChat.onEvent(
        function (event) {
          if (event.type === 'LIFECYCLE.LOADED') {
            window.botpressWebChat.sendEvent({ type: 'hide' })
          }
        },
        ['LIFECYCLE.LOADED']
      )
    </script>
The code above assumes you are using a button to trigger sending a payload to the bot and using that to trigger the bot. If you want to use some other mechanism to trigger the bot, you would need to make corresponding changes. Hope this is clear.
If you want screenshot 2, that's a lot more involved.
m
Alright thanks how much is 2
c
I don't believe there is a UI component that's part of botpress that you can use to display the text. So you would likely have to create one on your website. There are multiple ways you could handle displaying text. - You could use a hard-coded string that pops up when you trigger the bot. This string could be sent to the bot as a trigger payload so the bot can make it a part of the conversation when the user opens the bot. - You could have the bot send your website an event with a payload that you can use to display the text on the website. This method is a little more complicated since you need to make sure you only display this text if the chat window hasn't been opened. You would have to do this on your website.
c
Wow @cool-summer-17043 you really took the time to craft this answer. Thanks 🙂 Feel free to add that to the turorial section! (code + explanation). I'm sure this will help a lot of people.
f
@cool-summer-17043 perfect, what you can do also is to add a div using JS to the Botpress div. And from botpress, use the "SendCustomEvent" action to send the first message to your website. Then from the website you can do the JS append div part.
c
@crooked-van-25152 Sure, I'll work on adding it there soon. @famous-jewelry-85388 I'll add your comment to it as well.
m
Thanks mate
c
Thanks a lot @cool-summer-17043 ! I've tried to adapt your code to trigger on page load and it doesn't work. Here's the code:
Here's the code @famous-jewelry-85388 👆
I've tried all sorts of code, the red bubble never shows up. https://thenomadworld.org/
c
@chilly-church-46005 I have found that using two independent onEvent calls do not work. I would merge them into one. Let me know if it doesn't work after you merge them
Here's an example of what I mean by merging:
Copy code
window.botpressWebChat.onEvent(event => {
          if (event.type === 'TRIGGER' && event.value && event.value.url) {
            window.location.href = event.value.url
          }
          if (event.type === 'LIFECYCLE.LOADED') {
            window.botpressWebChat.sendEvent({ type: 'show' })
          }
          console.log(event)
        },
        ['TRIGGER', 'LIFECYCLE.LOADED']
      )
c
So this would be the code? @cool-summer-17043 " window.botpressWebChat.onEvent( function (event) { if (event.type === 'LIFECYCLE.LOADED') { window.botpressWebChat.sendEvent({ type: 'hide' }) console.log('Chatbot loaded') } if (event.type === 'LIFECYCLE.READY') { setTimeout(() => { window.botpressWebChat.sendPayload({ type: 'trigger', payload: { id: 21323123, }, }) console.log('Payload triggered 3 seconds after page fully loaded') }, 3000); } if (event.type === 'TRIGGER' && event.value && event.value.url) { window.location.href = event.value.url } }, ['LIFECYCLE.LOADED', 'LIFECYCLE.READY', 'TRIGGER'] ) "
I'm trying to glue your info with the help of ChatGPT, but it is still not working...
c
The Trigger was just an example. You don't need that part.
Just tested the following code, it works for me:
Copy code
window.botpressWebChat.onEvent(
        function (event) {
          if (event.type === 'LIFECYCLE.LOADED') {
            window.botpressWebChat.sendEvent({ type: 'hide' })
          }
          if (event.type === 'LIFECYCLE.READY') {
            setTimeout(() => {
              window.botpressWebChat.sendPayload({
                type: 'trigger',
                payload: {
                  id: 21323123,
                },
              })
              console.log('Payload triggered 3 seconds after page fully loaded')
            }, 3000); 
          }
        },
        ['LIFECYCLE.LOADED', 'LIFECYCLE.READY']
      )
@chilly-church-46005 Let me know if the code above does not work
c
Checking right now
It doesn't! The chatbot sends duplicated messages and there is no red bubble for new message
c
Could you describe what happens on your end? Based on what you've described, I'm assuming that when the webpage loads, the webchat window does not open, only the widget is visible. Your bot receives the trigger but you don't see the red number indicating the number of messages. When you open your chat window, you see your bot has sent you messages. Is that accurate?
c
Absolutely right!
Might be something in my css style sheet? But neither me or chatgpt can understand what https://webchat-styler-css.botpress.app/prod/code/9cfe31d4-53f4-4f3c-b42d-b612f5db2c62/v97117/style.css
f
I would say stay away from ChatGPT, it is not that good with code ... unfortunately
c
Unfortunately ChatGPT is a million times better than me with code ^^ And is the best help I have at the moment...
Any suggestion on how to solve this?
f
aggg... understand your pain.
But you have to do some proper JS code and CSS to achieve what you want. Do you have experience with CSS?
c
I have some, yes.
f
k, I will try to make you something, but I will get back to you tomorrow as I am busy today.
Sounds good?
@brainy-summer-1041 I would send that on the #1121494527727902891 ... I am sure they have good experience
@chilly-church-46005 k, so the general idea is: 1- have a div, hidden, on your page let's call it "helloDiv" 2- in your bot, use the "Send Custom Event" card to send info to your website 3- on your website, when you receive the payload from "Send Custom Event", you add it in your "helloDiv", then show it
For step one I did the below: Hello World
just change it to hidden
For step 2 I added the below: 1- A start conversation trigger, that should say "Hello World!" 2- Will send to the website the information/action to do. In my case I just want to hide it
For step 3, I added the below code on the website: window.botpressWebChat.onEvent(event => {if(event.value.action == "hideHelloWorld!")document.getElementById('helloDiv').style = "display:none"}, ['TRIGGER'])
where the website recieve the payload from the bot and hide the "helloDive" div, so user don't see it after they minimize the bot
@chilly-church-46005 was it clear or confusing?
c
@famous-jewelry-85388 Thanks a lot for this, it will for sure help.
But for now I'm trying the freaking notification red bubble that is spinning my mind.
f
aha... I expected that:
So ...
I have this in my bot:
I have this in my website:
Copy code
window.botpressWebChat.onEvent(event => {
if(event.type === 'TRIGGER' && event.value.action == "hideHelloWorld!")
{
console.log('hideHelloWorld')
console.log(event)
document.getElementById('helloDiv').style = "display:none";
}

if(event.type === 'TRIGGER' && event.value.action == "showHelloWorld!")
{
console.log('showHelloWorld')
console.log(event)
document.getElementById('helloDiv').style = "border: 1px solid";
document.getElementById('helloDiv').innerText = 'Hello Bassam!';
}

if (event.type === 'LIFECYCLE.LOADED') {
            window.botpressWebChat.sendEvent({ type: 'trigger',payload: {
    myCustomProperty: 'Hello World!',
  }, })
          }
          }, ['TRIGGER','LIFECYCLE.LOADED'])
</script>
Sorry it is not formatted
c
I got some advances on my side. It's defintely something in the CSS stylesheet: https://webchat-styler-css.botpress.app/prod/code/9cfe31d4-53f4-4f3c-b42d-b612f5db2c62/v97117/style.css I've replaced this part of the code to the default: "/* Change Bot Widget Icon */ .bpw-widget-btn{ border-radius: 50%; background:#6675fa; }"
And the notification is there.
f
c
@chilly-church-46005 I had to step out for a bit but looks like you have managed to isolate the problem and it is linked to css and Bassam has shared a way for you to change the chatbot widget icon. I assume this would resolve your issue but feel free to reach out if you need anything else.
c
I'm getting very close @cool-summer-17043 @famous-jewelry-85388 . On the styler I managed to get the result I want (image 1). But when deployed on the website, the default image still appears on top(image 2)
f
That's a UI issue, can you change the z-index of your orange button?
c
@famous-jewelry-85388 changed the z-index of .bpw-floating-button { Nothing happens. CSS style sheet: https://webchat-styler-css.botpress.app/prod/code/9450c3c6-e3c0-4e01-971e-5666349cd5ca/v99570/style.css
f
@bright-magazine-792 is much better than me when it comes to frontend matters 🙂
b
Copy code
.bpw-floating-button i {
  transition: opacity 0.3s ease;
  opacity: 1;
  fill: inherit;
  stroke: inherit;
  width: 100%;
  padding: 0;
  line-height: 0;
}
Hello, looking at it this quickly, you must modify this part to hide that icon. In a while I'll try it and let you know.
c
Thanks @billowy-morning-42410 🔥
f
@chilly-church-46005 If you can confirm or not that would be great 🙂
b
I already tried it, add
Copy code
display:none
to that css class.
c
Thanks Botbassador 🙂 @billowy-morning-42410 !
c
@famous-jewelry-85388 Let me know if you think I should make any changes: https://discordapp.com/channels/1108396290624213082/1154525992476479538
c
Solved! The "new message notification" is working without any image on top! Thanks a lot @billowy-morning-42410 @cool-summer-17043 @crooked-van-25152 @famous-jewelry-85388
Sometimes the sound doesn't work but I'm assuming it's a trigger issue? Either way this already makes me happy!
Next stop is making the text pop up with chat widget closed
c
Awesome!!!! Thanks to everyone who helped 🙏🏼
f
@chilly-church-46005 good luck with that... that's great news 🙂
@cool-summer-17043 it's amazing, thanks 🙂
@chilly-church-46005 when you do it, send to @cool-summer-17043 to add to his tutorial so we have a full reliable solution 🙂
c
@chilly-church-46005 There is an example on how to implement a basic text pop-up in the tutorial linked above. I'm a css noob so there's a lot of improvements you could make to the css when you implement your solution
s
Hello i was wondering if I can make the bot send a reminder message(like a pop up) to remind the client that they can use it to chat with him
b
hi @strong-iron-51380 Sure thing, I can help with that. Could you tell me more about how you'd like the reminder to appear? Are you thinking of a specific design or UI element for the pop-up?
s
Maybe a pop up
b
Next to the chatbot?
s
yes
b
s
Yes,exactly
a
Did it work?
f
👀
PreviousNext
Powered by