CodePen

Play around with our code snippets for <weavy/>

1
Here's a small CodePen project for you to play around in, you can fork it or simply copy and paste the code into your own project.
2
Your personal demo JWT sub you use when playing around is . Keep this in handy when you start adding <weavy/> to your app and see how it works.
3
That's it. Now play around with the spaces, apps, etc to see how <weavy/>works.
body {
  font-family:Arial;
}

.header { grid-area: header; background:#fbfbfb; border-bottom:1px solid #e0e0e0; padding:0 25px } 
.menu { grid-area: menu; background:#c0c0c0; }
.dashboard { grid-area: main; background:#f5f5f5 }

.grid-container {
  display: grid;
  grid-template:
    'menu header'
    'menu main';
  grid-template-columns: 48px auto;
  grid-template-rows: 50px auto;
  position:absolute;
  top:0px;
  bottom:0px;
  right:0px;
  left:0px;
  height:100%;
}

.grid-dashboard {
  display: grid;
  padding:20px 20px;
  grid-template-columns:auto auto auto;    
  box-sizing:border-box;
  position:absolute;
  top:55px;
  left:65px;
  right:0px;
  bottom:0px;
}

.grid-dashboard>div { box-sizing:border-box; height:100%; position:relative; }

.widget { position:absolute; padding-bottom:20px; top:0px; left:0px; right:0px; bottom:40px; margin:0 5px; }
.widget .head { color:#fff; background:#36ace2; height:40px; padding:0 20px; display:flex; align-items:center; border-radius:5px 5px 0 0 }
.widget .head i { margin-right:10px; }
.widget .body { background:#fff; height:100%; padding:0px; box-sizing:border-box; border-radius:0 0 5px 5px }

.header ul { padding:0; margin:0; list-style:none; float:right; }
.header ul li { position:relative; height:48px; align-items:center; display:flex; width:48px; float:left; }
.header ul li i { cursor:pointer; margin:auto; color:#888; font-size:24px; }
.header ul li.active { background:#36ace2; }
.header ul li.active i { color:#fff; }

.header input {
  width:400px;
  height:36px;
  margin:4px 0;
  padding:0 10px;
  border-radius:4px;
  border:1px solid #e0e0e0;
}

.menu ul { padding:0; margin:0; list-style:none;}
.menu ul li { height:48px; align-items:center; display:flex; width:48px; }
.menu ul li i { cursor:pointer; margin:auto; color:#888; font-size:24px; }

.header ul li.active #messenger-layer {
  opacity:1;
  z-index:100;
  margin-top:0px;
}

#messenger-layer {
  position:absolute;
  background:#fff;
  width:400px;
  height:520px;
  top:48px;
  transform:translateX(-50%);
  box-shadow: 0 50px 100px -20px rgba(50,50,93,.25), 0 30px 60px -30px rgba(0,0,0,.3), 0 -18px 60px -10px rgba(0,0,0,.025);
  z-index:-10;
  border-radius:5px;
  display:grid;
  grid-template-rows:48px auto;
  opacity:0;
  margin-top:5px;
  transition:.5s;
}

#messenger-layer>div:first-child {
  background:#36ace2;
  display:flex;
  align-items:center;
  padding:0 20px;
  color:#fff;
  border-radius:5px 5px 0 0
}

#messenger-layer>div:first-child i { font-size:80%; position:absolute; right:20px; }

.unread-badge {
    background: #F92;
    position: absolute;
    top: 8px;
    right: 6px;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    z-index: 100;
  display:none;
}

#instantmessaging.has-unread .unread-badge {
  display:block;
}
<head>
  <link href="https://cdn.lineicons.com/2.0/LineIcons.css" rel="stylesheet">
  <script src="https://demo.weavycloud.com/javascript/weavy.jquery.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>  
<body>
  <div class="grid-container">
      <div class="header">
        <ul> 
          <li id="instantmessaging">
            <div class="unread-badge"></div>
            <i class='lni lni-comments-alt'></i>
            <div id="messenger-layer">
              <div class="layer-header">Messenger<i class='lni lni-close'></i></div>
              <div id="messenger-placeholder">
              </div>
            </div>
          </li>
          <li><i class='lni lni-user'></i></li>
          <li><i class='lni lni-bulb'></i></li>
          <li><i class='lni lni-cog'></i></li>
        </ul>
      </div>
      <div class="menu">
        <ul>
          <li><i class='lni lni-home'></i></li>
          <li><i class='lni lni-briefcase'></i></li>
          <li><i class='lni lni-layers'></i></li>
        </ul>
      </div>
      <div class="dashboard">
        <div class="grid-dashboard">
          <div>
            <div class="widget">
              <div class="head">
                <i class='lni lni-text-align-justify'></i>My feed
              </div>
              <div class="body" id="feed-placeholder">
                <!-- Placeholder for my feed -->
              </div>
            </div>
          </div>
          <div>
            <div class="widget">
              <div class="head">
                <i class='lni lni-folder'></i>My files
              </div>
              <div class="body" id="files-placeholder">
                <!-- Placeholder for my file -->
              </div>
            </div>
          </div>
          <div>
            <div class="widget">
              <div class="head">
                <i class='lni lni-checkbox'></i>
                My tasks
              </div>
              <div class="body" id="tasks-placeholder">
                <!-- Placeholder for my tasks -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>   
</body>
// ---------------------------------
// -- Welcome to this mock up app where you can play around with  - feel free to
// -- take the code snippets into your own project.
// ---------------------------------

// ---------------------------------
// -- Your demo JWT (GUID)
var sub = '';
// ---------------------------------

if (sub!='') {
  // -- Simplified login with your JWT sub
  var weavy = new Weavy({ jwt: sub }); 

  // -- Create a space in , using sub here as key too - can be anything, but should be unique
  // -- This key is what you use to uniquely attach a space to any view within your app.
  var weavySpace = weavy.space({ key: sub });

  // -- Adding our features to the space (we call it apps), and injects them into the DOM (container)
  // -- All content now created (files, posts, tasks, etc) is now associated with this space 
  
  weavySpace.app({ key: "feed", type: "posts", container: "#feed-placeholder" });
  weavySpace.app({ key: "files", type: "files", container: "#files-placeholder" });
  weavySpace.app({ key: "tasks", type: "tasks", container: "#tasks-placeholder" });
  weavySpace.app({ key: "messenger", type: "messenger", container: "#messenger-placeholder" });

  // -- Handle badge update for new messages
  weavy.on("badge", function (e, data) {
      var im = $("#instantmessaging");
      data.conversations > 0 ? im.addClass("has-unread") : im.removeClass("has-unread");
  });
}

// ---------------------------------

$('.header li').click(function() {
  if ($(this).hasClass('active')) {
    $(this).removeClass('active');
  } else {
    $('.header li').removeClass('active');
    $(this).addClass('active');
  }
});

$('.layer-header i').click(function() {
  $(this).parent().parent().removeClass('active');
});

Next steps

item.card_image.alt

Documentation

We've got you covered with everything from APIs, SDKs, and more.

item.card_image.alt

FAQ

Read through our FAQ to find answers to your questions.

item.card_image.alt

Talk to our experts

Get in touch with our experts and schedule a meeting.