https://discord.gg/botpress logo
#🤝help
Make the Bot Initiate Conversation When Button is Pressed
# 🤝help
f

fancy-monkey-19130

07/24/2023, 10:11 PM
Hey Guys I'm having some issues trying to connect my bot with my website. I have a CTA button with the id of "startCalculation1" where I want the bot activate the trigger. I tried to following code for my website based on a mix of chatGPT and @straight-musician-77995 code. However I have no luck, the bot just completely disappeared haha. How can I fix this? The code I tried
Copy code
<script src="https://cdn.botpress.cloud/webchat/v0/inject.js"></script>

<script>
  window.botpressWebChat.init({
       // bot configuration
       <script src="https://mediafiles.botpress.cloud/c7353314-2f42-47e8-a8ca-138ba5e0db89/webchat/config.js" defer></script>

  });

// executes when the button is clicked
  document.getElementById('startCalculation1').addEventListener('click', function() {
    // open the chatbot because the trigger doesn't work if the chatbot isn't open
    window.botpressWebChat.sendEvent({ type: "show" });

    // workaround using 'Timeout' cause the 'onEvent(function(), ["LIFECYCLE.LOADED"])' doesn't work and we need to trigger this only after the chatbot is loaded
    setTimeout(function() {
      window.botpressWebChat.sendPayload({
        type: "trigger",
        payload: {}
      });
    }, 3500); // 3.5 seconds, not too short to let it load, not to long to have a message too delayed
  });
</script>
a

acceptable-kangaroo-64719

07/27/2023, 3:40 PM
Hey @fancy-monkey-19130, are you using a trigger node in your bot's flow?
f

fancy-monkey-19130

07/27/2023, 3:42 PM
Yes
a

acceptable-kangaroo-64719

07/27/2023, 3:42 PM
have you assigned an event to the trigger?
f

fancy-monkey-19130

07/27/2023, 3:46 PM
You mean next card?
a

acceptable-kangaroo-64719

07/27/2023, 3:48 PM
nope, this one

https://cdn.discordapp.com/attachments/1133159586627592412/1134150237787791462/image.png

f

fancy-monkey-19130

07/27/2023, 3:51 PM
No I don’t have the trigger event. How can I link that to my website button?
a

acceptable-kangaroo-64719

07/27/2023, 3:52 PM
So you click that "Discover event" button, then you go on your website and you click the button
Then you should see the web event in that popup

https://cdn.discordapp.com/attachments/1133159586627592412/1134151363291525192/image.png

f

fancy-monkey-19130

07/27/2023, 3:55 PM
I tried, nothing new comes up under the list of events. I asume the bot should be open right?
a

acceptable-kangaroo-64719

07/27/2023, 3:56 PM
You should be clicking the button that you want the bot to trigger on
f

fancy-monkey-19130

07/27/2023, 3:57 PM
I am
But no new events found in botpress
a

acceptable-kangaroo-64719

07/27/2023, 3:57 PM
did you click the "refresh" button?
is your trigger on webchat | trigger ?

https://cdn.discordapp.com/attachments/1133159586627592412/1134152665958453278/image.png

f

fancy-monkey-19130

07/27/2023, 4:01 PM
Yes & yes, no luck
Not sure how it should ear for the button pressed tho, is it because when the bot is on the website it listens to everything?
Should I add a filter?

https://cdn.discordapp.com/attachments/1133159586627592412/1134154071813656587/Screenshot_2023-07-27_at_18.03.13.png

a

acceptable-kangaroo-64719

07/27/2023, 4:04 PM
nvm I just tested, it's conversation started not trigger

https://cdn.discordapp.com/attachments/1133159586627592412/1134154368334168126/image.png

f

fancy-monkey-19130

07/27/2023, 4:05 PM
But the bot might not be opened or talked to before the button is pressed
The button is a CTA so way more likly it will be the first thing people press
Will conversation still work for that?
a

acceptable-kangaroo-64719

07/27/2023, 4:08 PM
I think so. Let me whip up an example for ya...
f

fancy-monkey-19130

07/27/2023, 4:11 PM
With the conversation started I now see a bunch of trigger options but no new ones when I press the CTA button so not sure it will link correctly.
Curious to see how you will do it
Did it work as intended?
a

acceptable-kangaroo-64719

07/27/2023, 4:47 PM
f

fancy-monkey-19130

07/27/2023, 4:53 PM
That's awesome! So I want to "Show and Trigger" 1) I see you wrote code, do I need that instead of the other method? 2) I'm still unsure how to link the button, can I do it using code and id?
a

acceptable-kangaroo-64719

07/27/2023, 4:54 PM
Yes, you need to use code. In the demo, a button is linked using code & id
all that's in the bot is

https://cdn.discordapp.com/attachments/1133159586627592412/1134167117965561936/image.png

f

fancy-monkey-19130

07/27/2023, 4:55 PM
So non of these trigger methods will work, correct?
a

acceptable-kangaroo-64719

07/27/2023, 4:56 PM
they will work
just on different things
f

fancy-monkey-19130

07/27/2023, 4:56 PM
but not for this case?
a

acceptable-kangaroo-64719

07/27/2023, 4:56 PM
I wanted this demo bot to trigger off of a button push
correct
f

fancy-monkey-19130

07/27/2023, 4:57 PM
For the code, I see you used the configured instead of pre-configured like I did here (https://discord.com/channels/1108396290624213082/1133159586627592412/1133159586627592412) Do I need configured also?
a

acceptable-kangaroo-64719

07/27/2023, 4:57 PM
nope, you can use the pre-configured
f

fancy-monkey-19130

07/27/2023, 4:59 PM
Ok thanks. I'll try it out and get back if it doesn’t work (very likely haha)
I actually made it work!! Thank you for your help! Last two things I would like to adjust which I could use your feedback on is this 1) When the bot opens it kinda shoots the browser window down 2) In some parts of the website (like the top) the bot menue is unusable. So users have to kinda scroll around to find a spot where it works Here is the website: https://www.adaptive-tax-solutions.com How would I fix this?
a

acceptable-kangaroo-64719

07/28/2023, 10:52 AM
You could probably modify these with CSS, we've got a couple pieces of documentation that can help: * https://styler.botpress.app/ * https://botpress.com/docs/cloud/webchat-customization/overview/#styling-the-web-chat
f

fancy-monkey-19130

08/06/2023, 6:06 PM
I notice when we use the show + trigger function on your code (and my website) 1st click just opens the bot and users need to click again to activate the trigger. This only apply after first use. Is there a way to fix this?
a

acceptable-kangaroo-64719

08/07/2023, 10:50 AM
Depending on how your bot is set up, it may not respond to multiple triggers in a row. For example, if you trigger your bot and then the bot asks a question, the bot will expect a message response not another trigger.