📄 Starter Template

At minimum, a slime2 widget is composed of 3 files: HTML, CSS, and JS. An assets folder is also necessary if you want to have image, video, or audio input settings.

widget.css
widget.html
widget.js

⚠️

When testing a widget that uses stream data, you'll have a SLIME2_PLATFORM_KEY.js file. When releasing your widget to the public, make sure that file is not included in your release zip.

If you'd like to start off with a full widget, you can build off of the lastest release of Slime Chat (opens in a new tab).

Otherwise, if you want to start from scratch, you can start with these template files:

⚠️

Make sure to replace slime2@version with a released slime2 version (opens in a new tab), like slime2@1.0.0.

widget.html

<!doctype html>
<html lang="en">
  <head>
    <!-- JQuery -->
    <script
      src="https://code.jquery.com/jquery-3.7.1.slim.min.js"
      integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8="
      crossorigin="anonymous"
    ></script>
 
    <!-- widget JS/CSS -->
    <script src="widget.js"></script>
    <link href="widget.css" rel="stylesheet" />
 
    <!-- replace slime2@version below with the slime2 version you want to use, like slime2@1.0.0 -->
    <script
      type="module"
      crossorigin
      src="https://cdn.jsdelivr.net/gh/zaytri/slime2@version/release/slime2.js"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/zaytri/slime2@version/release/slime2.css"
    />
  </head>
 
  <body>
    <main id="slime2-root"></main>
  </body>
 
  <template id="message-template">
    <div class="message"></div>
  </template>
</html>

Welcome!Event Listeners