Posts building block

Use the posts block to render a feed of posts and comments inside your application. The posts block has a number of nice features as seen below. You can read more about the individual features here.

Attachments
Comment threads
Emoji reactions
Image carousels
Media previews
Mentions
News feed
Notifications
Polls
Secure
URL previews
Video meetings
Dropbox support
Google Drive support
OneDrive support

Get started

Follow the steps below to get started in minutes!

1. Create account

Sign up for an account on https://get.weavy.com.

2. Create environment

Now that you have an account go ahead and create your first environment. The entry-level is free, making it a great starting point. Make a note of the environment url as you'll need it later.

3. Create API key

Next, navigate to your environment and create an API key. Take note of the created key as you'll need it the next step.

4. Create access token

For the building block to be fully functional your need to supply it with an access_token for a user (the building block communicates with the Weavy environment and the token is used to identify the user and authorize access).

In a real world application, issuing access tokens is done with a server-to-server call from your backend to the Weavy environment, but in this guide we'll use a curl command to simplify things.

Replace {WEAVY-SERVER} and {API-KEY} with the values from step 2 and 3 above and then run the following command in your terminal.

curl -X POST {WEAVY-SERVER}/api/users/demouser/tokens -H "Authorization: Bearer {API-KEY}"

Then copy the access_token from the response since it's needed in the final step.

{"access_token":"wyu_qf2llm...","expires_in":3600}

5. Add building block

Finally, you'll want to add the <wy-posts> building block to your application. Copy the snippet below and replace the {WEAVY-SERVER} and {ACCESS-TOKEN} placeholders for a fully functional example.

<!doctype html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/@weavy/uikit-web/dist/weavy.js"></script>
    <script>
        const weavy = new Weavy();
        weavy.url = "{WEAVY-SERVER}";
        weavy.tokenFactory = async () => "{ACCESS-TOKEN}";
    </script>
  </head>
  <body>
    <wy-posts uid="demoposts"></wy-posts>
  </body>
</html>

You should now have a fully functional news feed in your application. Click "Post" to submit your first message.

If things are not working as expected, check the output in the dev-tools window of your browser for any warnings or errors. Or join our community in Discord and ask for help!

If you want to try out the building block real quick and don't want to mess around in your existing application just yet, you can use a coding playground like JSFiddle - just paste the snippet in the HTML-part, edit the {WEAVY-SERVER} and {ACCESS-TOKEN} and run it!

Next steps

This guide was intentionally very simple to get you started quickly, and we've taken some shortcuts such as hardcoding the access_token. As a next step we suggest reading more about how to install the UIKit and how to authenticate and sync users etc.

Later on you probably want to add some styling to make it fit better into your UI. You might also want to learn more about the Web API and how to configure webhooks to listen for events etc.

If you are using a JS-framework and are curious about how to integrate Weavy you can find help in our guides for Angular and React.

Weavy Docs