JSFiddle - React, Tailwind, and code Playground

by GordyNumberOne

HTML

<html>
<body>
<h1>
Triggers Example!
</h1>
<p>
Press the button to trigger the bot
</p>
<script src="https://cdn.botpress.cloud/webchat/v0/inject.js"></script>
<script>
  window.botpressWebChat.init({
      "composerPlaceholder": "Chat with bot",
      "botConversationDescription": "This chatbot was built surprisingly fast with Botpress",
      "botId": "c0fbf0dd-a989-4515-b53c-c134185945b8",
      "hostUrl": "https://cdn.botpress.cloud/webchat/v0",
      "messagingUrl": "https://messaging.botpress.cloud",
      "clientId": "c0fbf0dd-a989-4515-b53c-c134185945b8"
  });
</script>
 <button id="showButton">Show the bot</button>
 <button id='triggerButton'>Trigger the bot</button>
 <button id="sayButton">Say Hello</button>
 <br>
 <button id="showAndSay">Show Bot and Say Something</button>
 <button id="showAndTrigger">Show Bot and Trigger</button>
 <p>
 There may be a delay of ~10 seconds for the bot to pop up
 </p>
  <script>
        // JavaScript code to handle button click event
        document.getElementById('showButton').addEventListener('click', function() {
        		 console.log("showing bot...")
             window.botpressWebChat.sendEvent({ type: "show" })
             });
        document.getElementById('triggerButton').addEventListener('click', function() {
        		 console.log("triggering bot...")
             window.botpressWebChat.sendEvent({type:'trigger'})
             });
        document.getElementById('sayButton').addEventListener('click', function() {
             console.log("sending payload...")
             window.botpressWebChat.sendPayload({type:'text', text:"Greetings!"});
             });
        document.getElementById('showAndSay').addEventListener('click', function() {
             console.log("showing bot...")
             window.botpressWebChat.sendEvent({ type: "show" })
             console.log("sending payload...")
             window.botpressWebChat.sendPayload({type:'text', text:"Hello Chatbot"})
             
             });
...