Botpress v2.2: Change the bubble image using image URL or data:image

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://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<!doctype html>
<html lang="en">
  <!-- 
    Thank you to the Botpress community (https://discord.com/channels/1108396290624213082) for their suggestions regarding this example.
    A special greeting to Decay, for his post: https://discord.com/channels/1108396290624213082/1293736690518855761/1293944262857199706
  -->
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
  </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="container-fluid">
      <div class="bg-body-tertiary p-5 border rounded-3">
        <h2>Change the bubble image using image URL or data:image</h2>
        
        <p class="lead">Example 1: paste this code in Webchat Theme Tab.</p>
        <pre><code>
.bpFabIcon {
   background-image: url("https://mediafiles.botpress.cloud/2c56f350-6e19-406a-b018-a4781deb5ff3/integration/icon.svg");
   -webkit-mask: unset;
   mask: unset
}
        </code></pre>

        <p class="lead">Example 1: paste this code in Webchat Theme Tab.</p>
        <pre><code>
 .bpFabIcon {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.36c.74 0 1.36.62 1.36 1.36 0 .74-.62 1.36-1.36 1.36-.74 0-1.36-.62-1.36-1.36 0-.74.62-1.36 1.36-1.36zm-9.28 0c.74 0 1.36.62 1.36 1.36 0 .74-.62 1.36-1.36 1.36-.74 0-1.36-.62-1.36-1.36 0-.74.62-1.36 1.36-1.36zM12 20c-2.2 0-4.06-1.22-5-3h10c-.94 1.78-2.8 3-5 3z'/%3E%3C/svg%3E");
   mask: unset;
   -webkit-mask: unset;
}
       </code></pre>
      </div>
    </main>

    <footer class="footer...

CSS

.smile {
  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.36c.74 0 1.36.62 1.36 1.36 0 .74-.62 1.36-1.36 1.36-.74 0-1.36-.62-1.36-1.36 0-.74.62-1.36 1.36-1.36zm-9.28 0c.74 0 1.36.62 1.36 1.36 0 .74-.62 1.36-1.36 1.36-.74 0-1.36-.62-1.36-1.36 0-.74.62-1.36 1.36-1.36zM12 20c-2.2 0-4.06-1.22-5-3h10c-.94 1.78-2.8 3-5 3z'/%3E%3C/svg%3E\");
}
.chat {
  backgound-image:...

JavaScript

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