https://discord.gg/botpress logo
#🤝help
New message indicator - Event
# 🤝help
c

chilly-church-46005

09/09/2023, 1:11 PM
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

microscopic-shampoo-2255

09/09/2023, 2:26 PM
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

quiet-raincoat-89190

09/09/2023, 3:55 PM
I am planing also this, but I am not yet there. Cant help you atm, sorry.
b

brief-accountant-68119

09/10/2023, 2:16 AM
just run {text} and not {text: "",}
b

billowy-morning-42410

09/10/2023, 9:47 PM
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

chilly-church-46005

09/13/2023, 4:38 PM
@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

quiet-raincoat-89190

09/14/2023, 6:28 PM
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

chilly-church-46005

09/15/2023, 10:58 AM
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

quiet-raincoat-89190

09/15/2023, 1:02 PM
is that wordpress site?
c

chilly-church-46005

09/15/2023, 1:39 PM
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

cool-summer-17043

09/15/2023, 2:18 PM
@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

chilly-church-46005

09/15/2023, 2:19 PM
@cool-summer-17043 it's more efficiently to share how than to teach how.
c

cool-summer-17043

09/15/2023, 2:27 PM
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

chilly-church-46005

09/15/2023, 4:28 PM
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

quiet-raincoat-89190

09/15/2023, 6:08 PM
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

chilly-church-46005

09/16/2023, 9:38 PM
@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

quiet-raincoat-89190

09/16/2023, 9:42 PM
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

chilly-church-46005

09/17/2023, 2:42 PM
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

straight-musician-77995

09/17/2023, 7:14 PM
Sorry man, I quit botpress for now
q

quiet-raincoat-89190

09/18/2023, 3:13 AM
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

crooked-van-25152

09/18/2023, 3:43 PM
@famous-jewelry-85388 can you please look at this? Thanks
f

famous-jewelry-85388

09/18/2023, 5:39 PM
Hey guys,
How can I help?
c

crooked-van-25152

09/18/2023, 5:54 PM
@famous-jewelry-85388 , see the first message from @chilly-church-46005 .
f

famous-jewelry-85388

09/18/2023, 6:34 PM
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

chilly-church-46005

09/19/2023, 12:43 PM
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

famous-jewelry-85388

09/19/2023, 3:33 PM
kk, let's take one bit at a time. Can you share with me the full script after removing the sensitive data?
m

mysterious-cricket-72777

09/19/2023, 4:51 PM
Hey could you give me the code as well
c

cool-summer-17043

09/19/2023, 6:01 PM
@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

mysterious-cricket-72777

09/19/2023, 6:07 PM
Alright thanks how much is 2
c

cool-summer-17043

09/19/2023, 6:18 PM
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

crooked-van-25152

09/19/2023, 6:29 PM
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

famous-jewelry-85388

09/19/2023, 6:34 PM
@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

cool-summer-17043

09/19/2023, 6:42 PM
@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

mysterious-cricket-72777

09/20/2023, 5:02 AM
Thanks mate
c

chilly-church-46005

09/20/2023, 2:03 PM
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

cool-summer-17043

09/20/2023, 2:04 PM
@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

chilly-church-46005

09/20/2023, 2:10 PM
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

cool-summer-17043

09/20/2023, 2:12 PM
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

chilly-church-46005

09/20/2023, 2:20 PM
Checking right now
It doesn't! The chatbot sends duplicated messages and there is no red bubble for new message
c

cool-summer-17043

09/20/2023, 2:33 PM
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

chilly-church-46005

09/20/2023, 2:44 PM
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

famous-jewelry-85388

09/20/2023, 3:53 PM
I would say stay away from ChatGPT, it is not that good with code ... unfortunately
c

chilly-church-46005

09/20/2023, 4:12 PM
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

famous-jewelry-85388

09/20/2023, 4:13 PM
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

chilly-church-46005

09/20/2023, 4:40 PM
I have some, yes.
f

famous-jewelry-85388

09/20/2023, 4:43 PM
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

chilly-church-46005

09/20/2023, 5:22 PM
@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

famous-jewelry-85388

09/20/2023, 5:24 PM
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

chilly-church-46005

09/20/2023, 5:25 PM
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

famous-jewelry-85388

09/20/2023, 5:26 PM
c

cool-summer-17043

09/20/2023, 6:12 PM
@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

chilly-church-46005

09/21/2023, 1:32 PM
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

famous-jewelry-85388

09/21/2023, 1:45 PM
That's a UI issue, can you change the z-index of your orange button?
c

chilly-church-46005

09/21/2023, 1:58 PM
@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

famous-jewelry-85388

09/21/2023, 2:03 PM
@bright-magazine-792 is much better than me when it comes to frontend matters 🙂
b

billowy-morning-42410

09/21/2023, 2:32 PM
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

crooked-van-25152

09/21/2023, 4:13 PM
Thanks @billowy-morning-42410 🔥
f

famous-jewelry-85388

09/21/2023, 4:50 PM
@chilly-church-46005 If you can confirm or not that would be great 🙂
b

billowy-morning-42410

09/21/2023, 5:52 PM
I already tried it, add
Copy code
display:none
to that css class.
c

crooked-van-25152

09/21/2023, 9:10 PM
Thanks Botbassador 🙂 @billowy-morning-42410 !
c

cool-summer-17043

09/21/2023, 9:16 PM
@famous-jewelry-85388 Let me know if you think I should make any changes: https://discordapp.com/channels/1108396290624213082/1154525992476479538
c

chilly-church-46005

09/22/2023, 9:29 AM
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

crooked-van-25152

09/22/2023, 1:31 PM
Awesome!!!! Thanks to everyone who helped 🙏🏼
f

famous-jewelry-85388

09/22/2023, 3:21 PM
@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

cool-summer-17043

09/22/2023, 3:42 PM
@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

strong-iron-51380

10/16/2023, 1:18 PM
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

bright-magazine-792

11/08/2023, 11:01 AM
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

strong-iron-51380

11/08/2023, 1:36 PM
Maybe a pop up
b

bright-magazine-792

11/08/2023, 1:37 PM
Next to the chatbot?
s

strong-iron-51380

11/08/2023, 1:37 PM
yes
b

bright-magazine-792

11/08/2023, 1:55 PM
s

strong-iron-51380

11/08/2023, 4:32 PM
Yes,exactly
a

agreeable-elephant-30510

12/21/2023, 6:33 PM
Did it work?
f

famous-jewelry-85388

01/08/2024, 6:52 PM
👀