Botpress v2.2 - Live Demo

by Zannax_Botpress

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://getbootstrap.com/docs/5.3/examples/sidebars/sidebars.css">
<script src="https://getbootstrap.com/docs/5.3/examples/sidebars/sidebars.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  <style>button {margin-bottom: 0.25rem;}</style>
</head>

<body>
  <script src="https://cdn.botpress.cloud/webchat/v2.2/inject.js"></script>
  <script src='https://files.bpcontent.cloud/yyyy/mm/dd/hh/yyyymmddhhnnss-XXXXXXXX.js'></script>

  <main class="d-flex flex-nowrap">
    <div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-white" style="width: 380px;">
      <a href="https://botpress.com/docs/embedded-webchat#webchat-controls" target="_blank" class="d-flex align-items-center flex-shrink-0 p-3 link-body-emphasis text-decoration-none border-bottom">
        <span class="fs-5 fw-semibold">Methods - click items to test</span>
      </a>
      
      <div class="list-group list-group-flush border-bottom scrollarea">
      
        <a href="#" onclick="botpress.open()" class="list-group-item list-group-item-action py-3 lh-sm">
          <div class="d-flex w-100 align-items-center justify-content-between">
            <strong class="mb-1">botpress.open()</strong>
            <small class="" style="width:50px;background-color:var(--bs-blue)">&nbsp;</small>
          </div>
          <div class="mb-1 small">Opens the webchat interface.</div>
        </a>
        <a href="#" onclick="botpress.close()" class="list-group-item list-group-item-action py-3 lh-sm">
          <div class="d-flex w-100 align-items-center justify-content-between">
            <strong class="mb-1">botpress.close()</strong>
            <small class=""...

CSS

.b-example-divider {
  height: 3rem;
  background-color: rgba(0, 0, 0, 0.1);
  border: solid rgba(0, 0, 0, 0.15);
  border-width: 1px 0;
  box-shadow:
    inset 0 0.5em 1.5em rgba(0, 0, 0, 0.1),
    inset 0 0.125em 0.5em rgba(0, 0, 0, 0.15);
}

.b-example-vr {
  flex-shrink: 0;
  width: 1.5rem;
  height: 100vh;
}

JavaScript

/**
 * To try your theme comment lines below and at line 34 replace <code>https://files.bpcontent.cloud/yyyy/mm/dd/hh/yyyymmddhhnnss-XXXXXXXX.js
 */
window.botpress.init({
  configuration: {
    botAvatar:
     ...