Use Triggers to control the bot with Webpage Buttons Botpress #📖tutorials

Use Triggers to control the bot with Webpage Butto...

acceptable-kangaroo-64719

08/04/2023, 10:24 AM

Watch the video tutorial here:

https://youtu.be/8a7V8mMsRgk▾

This bot demonstrates a few ways to interact with your webpage to do things like: * Show and hide the bot * Send a pre-scripted message to the bot * Make the bot send a message * Send information from the webpage to the bot * Cool combinations of all of the above! The bot is attached to this post, and the web page can be accessed here https://jsfiddle.net/GordyNumberOne/pbhf3L0d/ Make sure your bot is published and embedded in a webpage before starting this tutorial. If you need help with either of those steps, check out these video tutorials: * How to publish your chatbot

https://youtu.be/PjPwrxLfWu4▾

* How to embed your chatbot:

https://youtu.be/tuO9aQGTZtc▾

## How to show/hide the bot Can be done entirely in your webpage, no triggers required! 1. Pick your event! This is the thing that will cause the bot to be shown or hidden. See below for common events 2. Send an event to the bot! This will be of type "show" or "hide" Common events (put these in

<script>

tags on your webpage: ### Show bot on page load:

Copy code

js
window.addEventListener('load', function() {
  window.botpressWebChat.sendEvent({ type: "show" })
}

### Show bot after 5 seconds:

Copy code

js
setTimeout(() =>window.botpressWebChat.sendEvent({type:'show'}), 5000);

This will only show the bot, it will not make the bot say something! To do that, see Triggers below! ### Show the bot on button click:

Copy code

js
 document.getElementById('myButton').addEventListener('click', function() {
             window.botpressWebChat.sendEvent({ type: "show" })
     });

Make sure to change "myButton" to your button's ID!

triggers-bot

acceptable-kangaroo-64719

08/04/2023, 10:29 AM

## How to Send a Scripted Message to the Bot Can also be done entirely in your browser- no triggers required! 1. Figure out what message you want to say to your bot 2. Pick your event 3. Send the message to the bot when the event happens Common use cases: ### Send message to bot on page load:

Copy code

js
window.addEventListener('load', function() {
  window.botpressWebChat.sendPayload({ type: "text", text: "Hello Chatbot!" })
}

### Send message to bot after 5 seconds:

Copy code

js
setTimeout(() =>window.botpressWebChat.sendPayload({ type: "text", text: "Hello Chatbot!" }), 5000);

### Send message to bot on button click:

Copy code

js
 document.getElementById('myButton').addEventListener('click', function() {
             window.botpressWebChat.sendPayload({ type: "text", text: "Hello Chatbot!" })
     });

Make sure to change "myButton" to your button's ID!

acceptable-kangaroo-64719

08/04/2023, 10:36 AM

## How to Make the Bot Send a Message First, start off in your webpage by sending a trigger on your favorite event. ### Send trigger to bot on page load:

Copy code

js
window.addEventListener('load', function() {
  window.botpressWebChat.sendEvent({ type: "trigger"})
}

### Send trigger to bot after 5 seconds:

Copy code

js
setTimeout(() =>window.botpressWebChat.sendEvent({ type: "trigger"}), 5000);

### Send trigger to bot on button click:

Copy code

js
 document.getElementById('myButton').addEventListener('click', function() {
     window.botpressWebChat.sendEvent({ type: "trigger"}));
     });

Then, in your bot: 1. Publish your bot if you haven't already 2. Add a trigger node by right clicking in the studio and selecting "trigger." 3. In the trigger's inspector panel (right side of screen) select "Custom Trigger Advanced" for trigger type 4. Connect your new trigger node to wherever you want the bot to start when it is triggered 5. Publish your bot (again) Back in your webpage, you should now be able to trigger your bot with whatever event you chose!

acceptable-kangaroo-64719

08/04/2023, 10:48 AM

## How to Send Information from the Webpage to the Bot No triggers required! First, start off by adding input fields to your webpage, as well as a submit button.

Copy code

html
 <label for="textInput" id="textInput'">Enter your name:</label>
    <input type="text" id="name" name="nameInput" required>
     <label for="colorSelect">Choose your favorite color:</label>
    <select id="colorSelect" name="colorSelect">
      <option value="red">🔴 Red</option>
      <option value="blue">🔵 Blue</option>
      <option value="green">🟢 Green</option>
      <option value="yellow">🟡 Yellow</option>
    </select>
   <button id="submit">Submit</button>

Then, add an event listener for the submit button (put this in

<script>

tags). When the event is fired, we want to do two things: 1. Pull the information from our inputs 2. Send this information to the bot Let's start off with extracting the information

Copy code

js
document.getElementById('submit').addEventListener('click', function() {
  //Get the name from the text box
  const inputValue = document.getElementById('name').value;
  //Get the webpage's URL
  const currentURL = window.location.href;
  // Get the selected color from the dropdown
  const dropdown = document.getElementById("colorSelect")
  const color = dropdown.options[dropdown.selectedIndex].text;

Next, we send this information in a payload to the bot. Notice how we put what we want the user to see in

text

and our data goes in

payload

Copy code

js
window.botpressWebChat.sendPayload({ 
  type:'text', 
  text:"This is what the user will see in their chat", 
  payload:{
    name:inputValue,
    favColor: color,
    url: currentURL
    }
})

acceptable-kangaroo-64719

08/04/2023, 10:50 AM

Finally, we need to catch this information and process it in our bot. We can add a transition to look for this additional payload, and then route to a node where we parse the data and tell it to the user. 1. Catch the payload with

event.payload.payload

2. Save data to workflow variables with this code:

Copy code

js
let { name, color, url } = event.payload.payload
workflow.name = name
workflow.color = color
workflow.url = url

3. Tell it back to the user by putting a nice message in a text card.

Copy code

md
Thanks for filling out the survey, {{workflow.name}}! Your favorite color is {{workflow.color}} and you're joining us from {{workflow.url}}.

4. (Optional) Save this data to a table

bulky-daybreak-65112

08/23/2023, 1:30 PM

Thanks for the tutorial, could you please make the video public? (

https://youtu.be/8a7V8mMsRgk▾

) 🙏

fresh-fireman-491

08/25/2023, 7:13 PM

The video is private

shy-room-21068

08/27/2023, 2:19 PM

Hola, me pueden indicar o guiar sobre cómo hacer la integración de un chatbot en Google Classroom?

lemon-receptionist-60189

09/27/2023, 2:52 PM

@acceptable-kangaroo-64719 Hey Gordy, thank you for the tutorial. I managed to integrate the events, but when I send the trigger event called 'startBot,' it does start the bot as expected but also displays what looks like an error message. Here is a screenshot:

acceptable-kangaroo-64719

09/27/2023, 4:51 PM

yes the platformed changed in the last month, the way to do it now is like:

Copy code

js
window.botpressWebChat.sendEvent({ type: "show"})

and then use a "Conversation Start" trigger in the bot

lemon-receptionist-60189

09/27/2023, 4:53 PM

There is a conversation start trigger?

acceptable-kangaroo-64719

09/27/2023, 4:54 PM

yep! Right click to make a trigger, then select from the dropdown

lemon-receptionist-60189

09/27/2023, 4:55 PM

Ok, let me try, thanks!

lemon-receptionist-60189

09/27/2023, 5:22 PM

@acceptable-kangaroo-64719 works perfect Gordy! Thanks!

melodic-salesclerk-70876

12/12/2023, 7:10 AM

window.addEventListener('load', function() { window.botpressWebChat.sendPayload({ type: "text", text: "Hello Chatbot!" }) }

melodic-salesclerk-70876

12/12/2023, 7:10 AM

can anyone tell me where should I add this in the code?

9 Views

Previous Next