Hello world!

Reading time: 5 mins

Introduction

This article will guide you on how to get Weavy Server SDK up and running, and then easily add our apps with our Drop-in UI using our Client SDK.

Get your Server SDK up and running

First, you need to set up your instance of our Server SDK so you can start adding embed our apps into your app.

Follow the instructions on how to set up the Server SDK, after that's done continue this guide.

Authentication Clients

When your instance of the Server SDK is up and running, we need to add an Authentication Client so we can authenticate users through the Client SDK.

To manage Authentication Clients, navigate to https://{your-url}/manage/clients in your Server SDK instance and click the plus sign in the bottom right.

Give your Authentication Client a display name and Save it.

Add the Client SDK to your project

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

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

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


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


<script>var weavy = new Weavy();</script>

JWT Token

To keep it simple in our Hello World example, we're going to generate a token through JSON Web Tokens with an expiration date in the far future.

Put this snippet into the PAYLOAD section on the JSON Web Tokens site.

{

    "sub": "demouser",

    "name": "Demo User",

    "exp": 2516239022,

    "iss": "#### YOUR CLIENT ID ####",

    "dir": "demo-dir",

    "email": "demo@user.com",

    "username": "demo"

}

And in the VERIFY SIGNATURE section put the Client Secret you created.

The end result should look similar to this;

Let's add an Activity Feed to your app

Now it's time, let's add a Weavy app to your app - in this case, we're going to ad an activity feed app.

Make sure you have a container in your app named id="weavy-feeds"

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: "posts-demo",

      type: "posts",

      container: "#weavy-feeds"

    });

</script>

Hello there!

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

Now go ahead and learn more about Spaces, Apps, and more to you understand the whole concept of Weavy!