How to add a pulse effect on your chatbot toggle b...
# 📖tutorials
r
just change this last part of CSS in the advanced style sheet and adjust your color later: ----Start Here---- /* Change Bot Widget Icon */ .bpw-widget-btn{ margin: 8px 8px 8px 8px; border-radius: 50%; background:#206CFF; -webkit-box-shadow: 0 0 0 rgba(204, 169, 44, 0.4); box-shadow: 0 0 0 rgba(204, 169, 44, 0.4); animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(204, 169, 44, 0); } 100% { box-shadow: 0 0 0 0 rgba(204, 169, 44, 0); } } .bpw-widget-btn:hover { background:#206CFF; animation: 1s ease-in; } .bpw-floating-button::before { background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='white' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z' /%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; height:undefinedpx !important; width:undefinedpx !important; } .bpw-floating-button { box-shadow: 10px 10px black; } .bpw-floating-button:hover { box-shadow: none !important; } // .bpw-floating-button > i { // display: none; // } ----End here---- After you save add your stylesheet URL to your Botpress script Also, I would recommend the Botpress team add it as default to all bots It will get us more clicks instantly instead of a static icon. 😉 Enjoy! ❤️ https://cdn.discordapp.com/attachments/1228959794069639188/1228959794249990194/ASDAD.png?ex=662df0ff&is=661b7bff&hm=9f4709bd8323ea635d7583c5a2aa9a20476f7816f377ca13427c338a2e058443&
j
Doesnt work, what part of my CSS should i pu tthis in ?\
r
you will see at the end of advanced css the same classes just copy and paste from top to bottom and press play 🙂
j
Devmik and Decay what is the controler emojie for ?
and the joystick...
You guys just use random amojies lol
Doestn work.
Works
good job man
r
thanks
e
Doesn't work after the update...
r
works for me for all my bots
a
Where do I put the script? I dont understand.
w
this is for the webchat version 1, classes are changed in version 2.2
a
Ok, thanks anyways.
15 Views