Upload images

by devmik

HTML

<html>

  <body>
    <h1>
      Upload images
    </h1>
    <p>Users can upload images here</p>
<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": "7e36b1ba-e643-48de-a327-27e99ac412c0",
      "hostUrl": "https://cdn.botpress.cloud/webchat/v1",
      "messagingUrl": "https://messaging.botpress.cloud",
      "clientId": "7e36b1ba-e643-48de-a327-27e99ac412c0",
      "webhookId": "c17e8887-4d18-4ddb-b594-9d11ecf45fb6",
      "lazySocket": true,
      "themeName": "prism",
      "frontendVersion": "v1",
      "useSessionStorage": true,
      "enableConversationDeletion": true,
      "showPoweredBy": true,
      "theme": "prism",
      "themeColor": "#2563eb"
  });
</script>

    <label for="textInput" id="textInput'">Image URL:</label>
    <br>
    <input type="text" id="name" name="nameInput" required>
    <br><br>

    <button id="login">UPLOAD</button>

    <script>
      const loginButton = document.getElementById('login');

      loginButton.addEventListener('click', function() {
        const imageUrl = document.getElementById('name').value;
        window.botpressWebChat.sendPayload({
          type: 'text',
          text: "Here is my image! 🛠️",
          payload: {
            imageURL: imageUrl,
          }
        })

      });



    </script>
  </body>

</html>

CSS

body {
  background-color: #a7bcb9;
}