JSFiddle - React, Tailwind, and code Playground

by devmik

HTML

<html>

  <body>
    <h1>
      Login page
    </h1>
    <p>Login to app</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": "16bd9fc5-0453-46d4-89c3-093082bd8ae6",
        "hostUrl": "https://cdn.botpress.cloud/webchat/v1",
        "messagingUrl": "https://messaging.botpress.cloud",
        "clientId": "16bd9fc5-0453-46d4-89c3-093082bd8ae6",
        "webhookId": "feb41737-c97b-4696-b2b8-611f000ee56d",
        "lazySocket": true,
        "themeName": "prism",
        "frontendVersion": "v1",
        "useSessionStorage": true,
        "enableConversationDeletion": true,
        "theme": "prism",
        "themeColor": "#2563eb"
      });

    </script>

    <label for="textInput" id="textInput'">Your name:</label>
    <br>
    <input type="text" id="name" name="nameInput" required>
    <br><br>
    <label for="textInput" id="textInput'">Your email:</label>
    <br>
    <input type="text" id="email" name="emailInput" required>
    <br><br>

    <button id="login">Log in</button>
    <button id="logout">Log out</button>

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

      loginButton.addEventListener('click', function() {
        const nameValue = document.getElementById('name').value;
        const emailValue = document.getElementById('email').value;
        window.botpressWebChat.sendPayload({
          type: 'text',
          text: "User logged in",
          payload: {
            name: nameValue,
            email: emailValue,
          }
        })

      });

      logoutButton.addEventListener('click', function() {
        const nameValue = document.getElementById('name').value;
        const emailValue =...

CSS

body {
  background-color: lightblue;
}