Make the Bot Initiate Conversation When Button is ...
# 🤝help
f
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
Hey @fancy-monkey-19130, are you using a trigger node in your bot's flow?
f
Yes
a
have you assigned an event to the trigger?
f
You mean next card?
a
nope, this one

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

f
No I don’t have the trigger event. How can I link that to my website button?
a
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
I tried, nothing new comes up under the list of events. I asume the bot should be open right?
a
You should be clicking the button that you want the bot to trigger on
f
I am
But no new events found in botpress
a
did you click the "refresh" button?
is your trigger on webchat | trigger ?

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

f
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
nvm I just tested, it's conversation started not trigger

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

f
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
I think so. Let me whip up an example for ya...
f
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
f
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
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
So non of these trigger methods will work, correct?
a
they will work
just on different things
f
but not for this case?
a
I wanted this demo bot to trigger off of a button push
correct
f
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
nope, you can use the pre-configured
f
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
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
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
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.