Suggest Edits

Plugin Slots API

Plugins make use of “slots” in order to change Talk’s interface.

By default, Talk has various plugins provided by default. We can see this in plugins.default.json: 

{
  "server": [
    "talk-plugin-auth",
    "talk-plugin-featured-comments",
    "talk-plugin-offtopic",
    "talk-plugin-respect"
  ],
  "client": [
    "talk-plugin-auth",
    "talk-plugin-author-menu",
    "talk-plugin-comment-content",
    "talk-plugin-featured-comments",
    "talk-plugin-flag-details",
    "talk-plugin-ignore-user",
    "talk-plugin-member-since",
    "talk-plugin-moderation-actions",
    "talk-plugin-offtopic",
    "talk-plugin-permalink",
    "talk-plugin-respect",
    "talk-plugin-sort-most-replied",
    "talk-plugin-sort-most-respected",
    "talk-plugin-sort-newest",
    "talk-plugin-sort-oldest",
    "talk-plugin-viewing-options"
  ]
}

Let’s only focus on the plugins which are listed under client - these are the plugins that use slots to inject certain functionality into the Talk UI.

For example, if we look at the Respect plugin (talk-plugin-respect), we can see its client/index.js looks like this:

import RespectButton from './RespectButton';
import translations from './translations.yml';

export default {
  translations,
  slots: {
    commentReactions: [RespectButton],
  },
};

Inside the slots property, we specify which slots the plugin will use. Above we are saying that the RespectButton component is being injected into the slot commentReactions.

Slots can receive an Array of components, so we can use one plugin or many for one slot.

Anatomy of the Slot Component

In Talk core, we have 32 slots available for us to use. The component Slot has a fill property where we establish the name of the slot. It looks like this:

<Slot 
  fill="commentReactions"
    {...props}
/>

You won’t have to use this to build plugins, but it’s helpful to find where to embed your plugin.

Slot List

  • adminCommentDetailArea

  • adminCommentMoreDetails

  • adminCommentLabels

  • adminModerationSettings

  • adminOrganizationSettings

  • adminStreamSettings

  • adminTechSettings

  • adminCommentInfoBar

  • adminCommentContent

  • adminSideActions

  • adminModeration

  • adminModerationIndicator

  • commentInputDetailArea

  • commentAvatar

  • commentAuthorName

  • commentAuthorTags

  • commentTimestamp

  • commentInfoBar

  • commentContent

  • commentReactions

  • commentActions

  • commentInputArea

  • commentTombstone

  • draftArea

  • streamSettings

  • historyCommentTimestamp

  • profileSections

  • embed

  • stream

  • streamFilter

  • streamQuestionArea

  • login

  • userProfile

  • userDetailCommentContent

Where should I insert my plugin?

The first thing we should consider is what components will be affected by our plugin’s functionality. For example, if we want to add functionality to all the comments that are rendered in a total list of comments, we would use the component Comment.

The slots that are able to add functionality to comments start with comment, like commentContent, or commentReactions, as you can see above.

Disabling plugins via plugins_config

Typically, you will manage plugins via your plugins.json file. If you want to remove a plugin, you would simply delete it there. However, we can also do this directly with the plugins_config.

Let’s look at our example article, views/article.ejs. Here we see we have the Talk embed, and within the embed, we can also send a configuration object. To disable a plugin visually, we can pass true to the property disable_components. Like so:

plugins_config: {
  'talk-plugin-love': {
    disable_components: true,
   },
}

Sending information to slots and plugins

Inside our plugins_config, we can also send properities and our plugins will receive them. For example, if we send this:

plugins_config: {
  test: 'data'
}

The plugin will receive a config object with the properties we’ve passed. If we do a console.log with this.props, we would see:

config: {test: 'data'}

Debugging slots and plugins

You can debug slots and plugins simply by passing the debug property with value true:

plugins_config: {
  debug: true
}

This will turn on a visual aid to show you all of Talk’s available slots and their names. Just move your mouse around!

Slot ClassNames

Slots autogenerate their classes with the prefix talk-slot, followed by the name of the slot in kebab case.

For example, the class autogenerated for the slot commentContent is talk-slot-comment-content.