How to
# 🤝helpp
purple-dream-91712
03/17/2024, 1:04 PMI have a WordPress website that I built using Elementor, on the website I also have a chatbot that I built using BotPress.
I want to do the following function, when a website user clicks on a button, I want it to open or show or trigger the chatbot.
How can I do that?
[I think there should be a JS code somewhere and a button, but I am not sure of the actual steps and code]
b
billowy-morning-42410
03/18/2024, 2:43 PMHi!, this is the code you have to put in your wordpress HTML.
The wordpress button you create must add an ID (as in the "myButton" example) so that this script can relate to the button.
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Triggers</title>
</head>
<body>
<script src="https://cdn.botpress.cloud/webchat/v0/inject.js"></script>
<script src="https://mediafiles.botpress.cloud/{botId}/webchat/config.js" defer></script>
<button id="myButton">Click Me!</button>
<script>
function handleClick() {
console.log('Button clicked!')
window.botpressWebChat.sendPayload({
type: 'trigger',
payload: {
myCustomProperty: 'hello',
},
})
}
const button = document.getElementById('myButton')
button.addEventListener('click', handleClick)
window.botpressWebChat.onEvent(
function (event) {
if (event.type === 'LIFECYCLE.LOADED') {
window.botpressWebChat.sendEvent({ type: 'show' })
}
},
['LIFECYCLE.LOADED']
)
</script>
</body>
</html>billowy-morning-42410
03/18/2024, 2:43 PMThis code is explained in our documentation https://botpress.com/docs/cloud/toolbox/events-triggers/ 😉
p
purple-dream-91712
03/19/2024, 9:50 AMThanks a lot @billowy-morning-42410 ! Where should I deploy the code exactly if you don't mind me asking :))