Code for Button Click to Open Chat
# 🤝helps
stale-processor-97052
08/30/2023, 4:19 AMI need help to figure out how to open Botpress chat on WordPress website with click of the button. I am using Elementor Page Builder in case if that helps. Please assist asap. Thank you 🙂
b
brainy-summer-1041
08/30/2023, 6:35 AMCheck this out, it could help you:
https://jsfiddle.net/GordyNumberOne/pbhf3L0d/71/
s
stale-processor-97052
08/30/2023, 8:36 PM@brainy-summer-1041 Thank you for sharing this, I am not a coder. I see there are a few different triggers for the bot in the code. Can you please break-down for me and let me know what code I need to add to the website? Thank you heaps 🙂
b
brainy-summer-1041
08/30/2023, 8:41 PMThe code is on the left side of the screen
brainy-summer-1041
08/30/2023, 8:42 PMJust choose the kind of button you’d like to add and copy the relative code
s
stale-processor-97052
08/30/2023, 9:05 PM
// Load the Botpress Web Chat JavaScript library.
const botpressWebChat = window.botpressWebChat || {};
// Initialize the Botpress Web Chat library.
botpressWebChat.init({
"composerPlaceholder": "Chat with Bot",
"botConversationDescription": "Bot by BotPress",
"botId": "a3c3c7c9-57ca-4a72-96d3-d025c69e5399",
"hostUrl": "https://cdn.botpress.cloud/webchat/v0",
"messagingUrl": "https://messaging.botpress.cloud",
"clientId": "a3c3c7c9-57ca-4a72-96d3-d025c69e5399",
});
// Attach an event listener to the
startChatstale-processor-97052
08/30/2023, 9:05 PMdoes this look correct to you? It is not working
b
brainy-summer-1041
08/30/2023, 9:07 PMDo you want the popup in the low right corner?
brainy-summer-1041
08/30/2023, 9:07 PMOr a dedicated button to click that opens the chatbot
s
stale-processor-97052
08/30/2023, 9:07 PMboth
stale-processor-97052
08/30/2023, 9:08 PMI want the chat bubble in the right corner and click button to open chat
stale-processor-97052
08/30/2023, 9:09 PMthe button id is set to startChat
stale-processor-97052
08/30/2023, 9:10 PMI was trying to share a screenshot, but it is saying failed to send the message
stale-processor-97052
08/30/2023, 9:10 PMhttps://cdn.discordapp.com/attachments/1146298037778522233/1146552648762400798/Screenshot_2023-08-31_7.09.19_AM.png▾
stale-processor-97052
08/30/2023, 9:11 PMhttps://cdn.discordapp.com/attachments/1146298037778522233/1146552874348847294/Screenshot_2023-08-31_7.11.25_AM.png▾
stale-processor-97052
08/30/2023, 9:38 PM@brainy-summer-1041 Hi Michele, are you still around to help with this? Thank you 🙂
b
brainy-summer-1041
08/30/2023, 9:42 PMYou probably won’t be able to do it, it’s an Elementor button and it doesn’t have a custom code section
brainy-summer-1041
08/30/2023, 9:43 PMYou can try to add a custom code block and paste in the html code
s
stale-processor-97052
08/30/2023, 10:33 PMOkay, so make a button with HTML and then run this code?
b
brainy-summer-1041
08/31/2023, 6:52 AMThe code should already create a button (just like the ones in the link i sent you)
11 Views