JSFiddle - React, Tailwind, and code Playground

by devmik

HTML

<html>
<head>
  <style>
    body {
      background-color: black;
      color: white;
    }
    button {
      background-color: blue;
      color: white;
      padding: 10px;
      border: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>
    Change the button color
  </h1>
    <h1>
    with Chatbot
  </h1>
<script src="https://cdn.botpress.cloud/webchat/v1/inject.js"></script>
<script>
  window.botpressWebChat.init({
      "composerPlaceholder": "Chat with bot",
      "botConversationDescription": "This chatbot was built surprisingly fast with Botpress",
      "botId": "42760298-b9fe-416d-95b7-6937a907c8a7",
      "hostUrl": "https://cdn.botpress.cloud/webchat/v1",
      "messagingUrl": "https://messaging.botpress.cloud",
      "clientId": "42760298-b9fe-416d-95b7-6937a907c8a7",
      "webhookId": "b9cba662-fe78-458d-955b-c0f64a924d01",
      "lazySocket": true,
      "themeName": "prism",
      "frontendVersion": "v1",
      "useSessionStorage": true,
      "enableConversationDeletion": true,
      "showPoweredBy": true,
      "theme": "prism",
      "themeColor": "#2563eb"
  });
</script>

  <button id="timeButton">TIME</button>

  <script>
    window.botpressWebChat.onEvent(
      function(event) {
        //if (event.type === 'TRIGGER' && event.color) {
          document.getElementById('timeButton').style.backgroundColor = event.value.color;
          console.log(event)
      },
      ['TRIGGER']
    );
  </script>
</body>
</html>