Posts component

Use the Posts component to render a feed of posts and comments.

Element: <wy-posts>
Class: WyPosts

Initialize app

Before the <wy-posts> component can be loaded, a Posts app with the corresponding uid must first be created in the Weavy environment. This is typically something you do in your server-side code before rendering the page. Here's what it would look like using curl.

curl https://{WEAVY-SERVER}/api/apps/init
-H "Authorization: Bearer {API-KEY}"
--json "{'app': { 'uid': 'product-1-feed', 'type': 'posts', 'name': 'Product feed' }, 'user': { 'uid': 'user-1' } }"

The code above creates a new Posts app in Weavy (if it doesn't already exist). The uid is set to product-1-feed which is the same uid you'll use when adding the <wy-posts> component to your HTML.

Additionally the user with uid=user-1 is added as a member (the user passed in is usually the authenticated user in your application).

Note: The unique ids (uid) used when creating apps, users etc. is something you decide what it should be. Since the apps are contextual, the uid is often related to the context it's in. For example product-123-chat, customer-2-files etc.

Usage

First import and configure Weavy and the WyPosts component.

import { Weavy, WyPosts } from "@weavy/uikit-web";

const weavy = new Weavy();
weavy.url = "https://myenvironment.weavy.io";
weavy.tokenFactory = async (refresh) => "token_from_server";

Then add the <wy-posts> component to your HTML. Since it is a contextual app you must specify the uid property.

<wy-posts uid="product-1-feed"></wy-posts>

Properties

Property Type Default Description
uid string Unique identifier for the Posts app to load
features FeaturesConfigType {} Overrides the default features available for the product

The available features are controlled by your product license. The features config is opt-out, meaning you can disable available features, but never enable features that are not included in your license.

Feature Description
attachments Disable the possibility to upload local attachments
cloudFiles Disable the cloud file picker (Google Drive, Dropbox etc.)
embeds Disable creating embeds from urls in the post text
meetings Disable Zoom meetings
mentions Disable the possibility to mention other people in the directory
previews Disable previews of files
reactions Disable the possibility to add emoji reactions to a message. Setting this to false will only enable the thumbs up reaction
polls Disable possibility to create a poll
comments Disable comments on a post

Example: Render a posts component with disabled polls and disabled embeds.

const posts = new WyPosts();
posts.features = {
    polls: false,
    embeds: false
};

document.body.append(posts);

Events

The WyPosts component emits the following events.

Event Detail Description
wy:post_created { post: PostType } New post created.
wy:comment_created { comment: CommentType } New comment created on a post.
wy:reaction_added { reaction: string, entity: EntityType } Post reaction added.
wy:reaction_removed { reaction: string, entity: EntityType } Post reaction removed.
Weavy Docs