Let's Add Activity Feeds

Now it's time, let's add in-app activity feeds to your app.

First, let's add the Client SDK. Include the Client SDK globally. 

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script src="https://{your-url}/javascript/weavy.js"></script>

The {your-url} refers to the hostname where you installed the Weavy Server SDK.

When you have loaded the SDK, you can create a new Weavy() instance anywhere at any point in your app.

The Weavy instance is the main entry point used when embedding Weavy. It sets up a connection to a Weavy server and handles realtime communication, event distribution, and more.

To avoid timing issues when loading it may be a good idea to make sure you instantiate Weavy at the window DOMContentLoaded event.

For our example, make sure you have a container in your app named id="weavy-feed" The container must also have a specified width & height.

Use the encoded JWT you generated in the previous step. 

<script>

  var jwt = "{your generated jwt token}";

  var weavy = new Weavy({ jwt: jwt });

  var space = weavy.space({ key: "demo" });

  space.app({

    key: "feed-demo",

    type: "posts",

    container: "#weavy-feed"

  });

</script>

Spaces

Spaces are used in Weavy to group apps around a subject or entity. Within those spaces are members. Any members within a space have access to any apps within that space.

In order to set up the Weavy space, we need a unique identifier - a key - in the sample snippet above that's key: "feed-demo"

Keys must be unique because they are used to grab the contextual information for that specific space or app. Any unique identifier will do - it just can't be too long.

Congratulations!

If you've done everything correctly, you should now see Weavy Activity Feed rendered in your UI - cool, right? 😉

Could look like something like this...