How to make your chatbot shake when user receives ...
# 📖tutorialsg
glamorous-guitar-39983
03/05/2024, 9:28 PM
Botpress Widget Shaking On Notifications
**
@keyframes shake-animation {
0% { transform:translate(0,0) }
1.78571% { transform:translate(5px,0) }
3.57143% { transform:translate(0,0) }
5.35714% { transform:translate(5px,0) }
7.14286% { transform:translate(0,0) }
8.92857% { transform:translate(5px,0) }
10.71429% { transform:translate(0,0) }
100% { transform:translate(0,0) }
}**
* *
**window.botpressWebChat.onEvent(
(event) => {
if (event.type === 'UI.OPENED') {
document.querySelector('.bp-widget-widget').style.animation = 'none';
} else if (event.type === 'MESSAGE.RECEIVED') {
document.querySelector('.bp-widget-widget').style.animation = 'shake-animation 3s ease infinite';
}
},
['UI.OPENED', 'MESSAGE.RECEIVED']
);**
glamorous-guitar-39983
03/05/2024, 9:33 PMWhat is in bold characters is what you must have in your code to make the chat icon shake
c
crooked-van-25152
03/05/2024, 10:01 PMPretty cool @glamorous-guitar-39983 ! If you have a quick video (loom or somethign) of the end result, it would be great to add it here before people dive into trying it out for their bot ✨ !
crooked-van-25152
03/05/2024, 10:02 PMThanks so much for sharing this tutorial with the community ❤️
g
glamorous-guitar-39983
03/05/2024, 10:09 PMc
crooked-van-25152
03/05/2024, 10:13 PMYou're going to make 100000 happy Discord members! @glamorous-guitar-39983 🥇
crooked-van-25152
03/05/2024, 10:13 PM@ambitious-vr-9887 👀
g
glamorous-guitar-39983
03/05/2024, 10:22 PMBut I do not have a sound coming with the shaking
glamorous-guitar-39983
03/05/2024, 10:26 PMThis is why I like Botpress so much, wouldn't have been possible without knowing the event for receiving a message/opening the chat
a
ambitious-vr-9887
03/05/2024, 10:27 PMGreat work @glamorous-guitar-39983 🤩
p
proud-memory-60003
03/06/2024, 10:30 AMNice job!
b
bland-agent-12616
03/06/2024, 8:42 PMThats so neat! I'm gonna yoink this code! 😅 Thank you! ❤️
a
ambitious-vr-9887
03/07/2024, 3:13 PMj
jolly-policeman-82775
03/21/2024, 11:48 AMim using Wordpress where can i put this in ?
g
glamorous-guitar-39983
03/21/2024, 9:15 PMI don't know, I've never used Wordpress
s
square-energy-41150
03/21/2024, 9:15 PMHi AbsorbingJet719! It seems there might have been a misunderstanding. Could you please describe the issue you're experiencing with the Botpress Webchat? This will help us assist you better.
g
glamorous-guitar-39983
03/21/2024, 9:16 PMI guess you only need to go to where you've integrated your script and add these lines of code:
window.botpressWebChat.onEvent(
(event) => {
if (event.type === 'UI.OPENED') {
document.querySelector('.bp-widget-widget').style.animation = 'none';
} else if (event.type === 'MESSAGE.RECEIVED') {
document.querySelector('.bp-widget-widget').style.animation = 'shake-animation 3s ease infinite';
}
},
['UI.OPENED', 'MESSAGE.RECEIVED']
);
glamorous-guitar-39983
03/21/2024, 9:16 PM__I'm not sure this part can be done using javascript:__
@keyframes shake-animation {
0% { transform:translate(0,0) }
1.78571% { transform:translate(5px,0) }
3.57143% { transform:translate(0,0) }
5.35714% { transform:translate(5px,0) }
7.14286% { transform:translate(0,0) }
8.92857% { transform:translate(5px,0) }
10.71429% { transform:translate(0,0) }
100% { transform:translate(0,0) }
}
glamorous-guitar-39983
03/22/2024, 6:13 PMideally @jolly-policeman-82775 try to find a place where you can integrate html.
c
cold-cartoon-97133
04/04/2024, 2:10 AMCould you help me with a question? How do I get this notification without having to initiate an interaction?
g
glamorous-guitar-39983
04/04/2024, 11:37 AMLet me know if this works
c
cold-cartoon-97133
04/04/2024, 1:12 PMIt didn't work it sends the notification after I open the chat the interaction occurs and the timeout message arrives. The notification needs to be in the chat as soon as I access the page, without having to open it and interact. But thanks for responding.
g
glamorous-guitar-39983
04/04/2024, 8:50 PMIm not sure but I think the fact that I didnt put the lifecycle loaded event before ui opened changes its effects
glamorous-guitar-39983
04/04/2024, 9:20 PMI know why it doesn't work
glamorous-guitar-39983
04/04/2024, 9:21 PMI can't query selector the bp-widget-widget, don't ask me why, I don't know
glamorous-guitar-39983
04/04/2024, 9:23 PMActually I just thought about it
glamorous-guitar-39983
04/04/2024, 9:27 PMI've managed to make it work : now when you enter the website, the chatbot will automatically start shaking until you open the chatbot
Code :
Botpress Widget Shaking On Notifications
@keyframes shake-animation {
0% { transform:translate(0,0) }
1.78571% { transform:translate(5px,0) }
3.57143% { transform:translate(0,0) }
5.35714% { transform:translate(5px,0) }
7.14286% { transform:translate(0,0) }
8.92857% { transform:translate(5px,0) }
10.71429% { transform:translate(0,0) }
100% { transform:translate(0,0) }
}
.bp-widget-widget {
animation:shake-animation 3s ease infinite;
}
window.botpressWebChat.onEvent(
(event) => {
if (event.type === 'UI.OPENED') {
document.querySelector('.bp-widget-widget').style.animation = 'none';
} else if (event.type === 'MESSAGE.RECEIVED') {
document.querySelector('.bp-widget-widget').style.animation = 'shake-animation 3s ease infinite';
}
},
['UI.OPENED', 'MESSAGE.RECEIVED']
);
glamorous-guitar-39983
04/08/2024, 11:55 PM@cold-cartoon-97133 Does that work?
j
jolly-policeman-82775
04/14/2024, 9:44 PMWorks
jolly-policeman-82775
04/14/2024, 9:44 PMhell yeah !
c
cold-cartoon-97133
04/24/2024, 5:21 PMHello, I haven't done the test yet on my project I'll make the change and let you know later thank you very much.
cold-cartoon-97133
04/26/2024, 2:51 PMThank you very much it makes the widget shake when accessing the page it somehow catches the users attention. 💯
cold-cartoon-97133
04/26/2024, 2:54 PMDo you know how to change the language of Select... in the dropdown?
https://cdn.discordapp.com/attachments/1214686055026921574/1233430932963459092/image.png?ex=662d1192&is=662bc012&hm=94aba8ed033a21ce2f668c812592dd8b6500c89ac259036066a09d021746adfd&
g
glamorous-guitar-39983
04/26/2024, 8:50 PMNo but you can make a post in #1111009377525186570 for this
a
able-accountant-6548
05/05/2024, 2:36 PMI have the same problem - did you already find a solution for this?
c
cold-cartoon-97133
05/06/2024, 11:55 AMI still don't have any information on how to resolve it. 🫤