Replace icon by banner
# 🤝helpj
jolly-rocket-42656
04/12/2024, 7:00 AMI want to replace the icon by a bigger icon, like a banner or pop up notification. So when the banner is click, the chat is open. I tried styler, but it only allows 52 max px, and it must be inside de circle. Any of you tried something similar?
s
square-toddler-30705
04/14/2024, 9:39 AMHi,
Implement your own icon on the page and use JS to trigger/open the chat.
Give your icon/image/banner an ID - in my case I used "openChatLink":
square-toddler-30705
04/14/2024, 9:39 AM
document.addEventListener("DOMContentLoaded", function() {
// Adding an event listener to the chat link
var chatLink = document.getElementById("openChatLink");
if (chatLink) {
chatLink.addEventListener("click", function(event) {
event.preventDefault(); // Prevent the default link behavior
initializeChat(); // Call the function to initialize chat
});
}
function initializeChat() {
// Initialize the Botpress WebChat with the required parameters
window.botpressWebChat.init({
'botId': '...',
'hostUrl': 'https://cdn.botpress.cloud/webchat/v0',
'messagingUrl': 'https://messaging.botpress.cloud',
'clientId': '...',
/USE YOUR BOT Integration -> Webchat -> Configurable/
});
// Opens up the Chatbot by default
// This lets users start chatting with the Chatbot without needing to click any buttons or menus.
window.botpressWebChat.onEvent(
function (event) {
if (event.type === 'LIFECYCLE.LOADED') {
window.botpressWebChat.sendEvent({ type: 'show' })
}
// HIDE YOUR CUSTOM ICON WHEN THE CHAT IS OPEN
if (event.type === 'UI.OPENED') {
chatLink.classList.remove("loading");
chatLink.classList.add("hidden");
}
// SHOW YOUR CUSTOM ICON WHEN THE CHAT IS CLOSED
if (event.type === 'UI.CLOSED') {
chatLink.classList.remove("hidden");
chatLinkMessageNumber.classList.remove("hidden");
chatSpeechBubble.classList.remove("hidden");
}
}
},
['LIFECYCLE.LOADED', 'LIFECYCLE.READY', 'TRIGGER', 'UI.OPENED', 'UI.CLOSED']
);
}
});
j
jolly-rocket-42656
04/14/2024, 2:24 PMBig thanks! The snippet help me out a lot. Now it starts with my custom icon, then the chat is loaded , but when I close it, the default bubble icon remains there... I tried to find the default element with querySelector('.bpw-widget-btn'), but no luck. Did you identify the default bubble so you can hide it? is chatSpeechBubble what it's pointing there?
s
square-toddler-30705
04/14/2024, 8:24 PMThe default icon should be disabled all the time:
// Initialize the Botpress WebChat with the required parameters
window.botpressWebChat.init({
...
'hideWidget': true,
...
});
This way you will have only your custom icon.
j
jolly-rocket-42656
04/15/2024, 7:43 AMoh god, thank you!
jolly-rocket-42656
04/15/2024, 7:43 AMso easy, I complicated things and start looking other places
s
square-toddler-30705
04/15/2024, 9:52 AMGlad I could help you
9 Views