Reference
UIKit
Posts

Posts component

<wy-posts> | WyPosts

Use the Posts component to render a feed of posts and comments as seen on many social networks.

Importing

If you installed the UIKit with npm you can use the following snippet to import the component into your project. Otherwise, if you installed the UIKit as a <script> you can ignore this section.

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

Examples

As seen in this example, specifying the app identifier (uid) is required, and automatically creates a corresponding app on your Weavy environment when the component is first initialized.

<wy-posts uid="test-posts" name="Test feed"></wy-posts>

Here's another example that render a feed without embeds and polls.

<wy-posts uid="test-feed" noEmbeds noPolls></wy-posts>

It's often useful to base the uid on something that identifies the location where the component is rendered. Typically you would use something like a product id, page id, path or URL.

HTML attributes

Attributes can be set when using the component in HTML. All attributes have corresponding Javascript properties.

Most attributes are optional and/or has sensible default values. Any required attributes are indicated with an asterisk (*).

Learn more about attributes and properties.

Attribute	Value	Description
`uid`*	`string`	Unique identifier for the app.
`annotations`	`"buttons-inline", "none"`	Set the appearance of annotations. Defaults to `"buttons-inline"`.
`contextualData`	`string`	Contextual data for agents to reference.
`enterToSend`	`"never", "modifier", "auto", "always"`	Sets whether to use enter to send in the editor. Modifier is enter combined with `Ctrl` or `Cmd`. Defaults to `"auto"`.
`features`	`string`	Explicit space separated list of enabled features. All default features are enabled when this property is not defined.
`generateUid`	`string`	Sets the `uid` property with automatically appended user and agent name (where applicable).
`name`	`string`	Optional display name for the app (used in notifications etc.)
`placeholder`	`string`	Placeholder text for the editor. Overrides default text.
`reactions`	`string`	Space separated string of unicode emojis to use for reactions. Defaults to reactions from the `Weavy` instance or `<wy-context>`.

JavaScript properties

Properties can be used in JavaScript. Some of them have corresponding HTML attributes where applicable. Any required attributes are indicated with an asterisk (*).

Property	Type	Default	Description
`uid`*	`string, number`		Unique identifier or app id for the Weavy component. The unique identifier should correspond to the uid of the app created using the server-to-server Web API.
`annotations`	`"buttons-inline", "none"`	`"buttons-inline"`	Appearance of annotations.
`app`	`AppType`		The app data.
`contextualData`	`string`		Contextual data for agents to reference. Provide descriptive data for optimal results.
`enterToSend`	`"never", "modifier", "auto", "always"`	`"auto"`	Enter-to-send keymap in the editor. `"modifier"` is `Enter` combined with `Ctrl` or `Cmd`.
`features`	`string`		Config for only enabling specific features in the Weavy component.
`generateUid`	`string`		Sets the `uid` property with automatically appended user and agent name (where applicable).
`link`	`LinkType`		Any provided link that should be loaded, shown and highlighted.
`name`	`string`		Optional display name for the app (used in notifications etc.)
`placeholder`	`string`		Placeholder text for the message editor.
`reactions`	`string`	`"😍 😎 😉 😜 👍"`	A space separated string of available reaction emojis in unicode.

JavaScript methods

Methods for the component are available in JavaScript. Methods that are async return a promise.

Method	Returns	Description
`reset()`		Sets the component to it's initial state and resets the `app` state.
`subscribe(subscribe: boolean)`	async	Subscribes or unsubscribes to notification updates from the app. Check `.app.is_subscribed` to see current state.
`whenApp()`	async `AppType`	Waits for `app` data and returns the data when available.

DOM Events

The component triggers custom events that bubbles up the DOM tree. They can be listened to using the addEventListener() method.

Learn more about events.

Event	Type	Description
`wy-app`	`WyAppEventType`	Emitted when the `app` changes.
`wy-action`	`WyActionEventType`	Emitted when an action is performed on an embed.
`wy-preview-open`	`WyPreviewOpenEventType`	Emitted when preview is about to be opened. The event may be prevented.
`wy-preview-close`	`WyPreviewCloseEventType`	Emitted when preview is closed

Slots

The slots can be used to inject elements into the component. All predefined child nodes of the slot will be replaced with the injected content.

Slot	Description
`actions`	Floating buttons placed in the top right.

To prevent child nodes from rendering before the component has loaded you can hide them using CSS.

wy-posts:not(:defined) {
  display: none;
}

Available features

The following features are available for the component. Configure them with a space separated list using the features attribute. Features that are available but disabled by default are indicated by parenthesis ().

Learn more about features.

Feature	Description
`attachments`	Possibility to upload local files.
`cloud_files`	Cloud file picker (Google Drive, Dropbox etc.).
`comments`	Commentary feed on entities.
`context_data`	Possibility to upload contextual data.
`embeds`	Creating embeds from urls in editor text.
(`google_meet`)	Google Meet video meetings.
(`meetings`)	General availability for meetings. This can be ignored if using all individual meeting feature flags, i.e. `google_meet`, `microsoft_teams` and `zoom_meetings`.
`mentions`	Possibility to mention other people from the current directory in the editor.
(`microsoft_teams`)	Microsoft Teams video meetings.
`polls`	Possibility to create polls in editor.
`previews`	Previews of files and attachments.
`reactions`	Possibility to add emoji reactions to a message, post or comment.
(`zoom_meetings`)	Zoom video meetings.