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",
      "stylesheet":"https://webchat-styler-css.botpress.app/prod/code/abfbae7e-a9b8-47bd-8cfa-feb6a19792a7/v19300/style.css",
      "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>
 <h2>Send form info to the bot!</h2>

    <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>
  <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...")
            ...

CSS

body {
  background-color: lightblue;
}