JSFiddle - React, Tailwind, and code Playground

by Decay15

HTML

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>
<script src="https://cdn.botpress.cloud/webchat/v0/inject.js"></script>
</body>
</html>

CSS

/* Full-screen styling for the chat widget iframe container */
.bp-widget-side {
  width: 100% !important; /* This will ensure that the width of the iframe container is full-screen */
  height: 100vh !important; /* This ensures that the height is the full height of the viewport */
  position: fixed !important; /* This will position the iframe relative to the viewport */
  top: 0 !important; /* Align the top edge of the iframe with the viewport */
  left: 0 !important; /* Align the left edge of the iframe with the viewport */
  right: 0 !important; /* Align the right edge of the iframe with the viewport */
  bottom: 0 !important; /* Align the bottom edge of the iframe with the viewport */
  border: none !important; /* Optional: remove the border */
  border-radius: 0 !important; /* Optional: remove the border radius */
  overflow: hidden !important; /* Hide the overflow to prevent scrollbars */
}

JavaScript

window.botpressWebChat.init({
      userData: {
        name: 'Jack Black',
      },
      "composerPlaceholder": "Chat with bot",
      "botConversationDescription": "This chatbot was built surprisingly fast with Botpress",
      "botId": "f15ad1b2-afbf-4d85-9e55-8cfd12ca9d7d",
      "hostUrl": "https://cdn.botpress.cloud/webchat/v1",
      "messagingUrl": "https://messaging.botpress.cloud",
      "clientId": "f15ad1b2-afbf-4d85-9e55-8cfd12ca9d7d",
      "webhookId": "9ee63f30-4e04-49f8-b556-273bc8df73a2",
      "lazySocket": true,
      "themeName": "prism",
      "stylesheet": "https://webchat-styler-css.botpress.app/prod/code/fde8847c-1142-4d54-9732-ef606ac59770/v6266/style.css",
      "frontendVersion": "v1",
      "showPoweredBy": true,
      "theme": "prism",
      "themeColor": "#2563eb"
  });
  window.botpressWebChat.onEvent(
    function () {
        window.botpressWebChat.sendEvent({ type: "show" });
    },
    ["LIFECYCLE.LOADED"]
);