asaadmahmood / hovercardexample

Example hovercard webapp plugin for Mattermost

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Mattermost Hovercard Example Plugin

An example plugin that overrides the profile popover (aka hovercard) of the Mattermost webapp.

Template generated using the Mattermost Developer Kit tool.


Must have npm installed.


  1. Clone this repository:
git clone
  1. Change into the repository directory and build:
cd hovercardexample
make build
  1. Upload the plugin at dist/hovercardexample.tar.gz to your Mattermost server, with plugins enabled

  2. (Optional) To display additional LDAP attributes on the hovercard, enable the built-in ldapextras plugin

How this plugin was made

  1. Used the mdk tool to generate the template:
$ mdk init webapp
Performing setup for webapp plugin...
Plugin name: HovercardExample
Description: Example hovercard plugin with Skype and LDAP integration
? What components would you like to override with your plugin?
❯◉ ProfilePopover
Plugin generated at: ./hovercardexample
  1. Modified webapp/client/client.js to send a request to the LDAP Mattermost plugin. Note that authentication is handled by existing cookies.
  • Set url in the constructor to window.location.origin, which will be the Mattermost URL.
  • Created the getUserLdapAttributes() async function to make a request to the built-in LDAP plugin.
  1. Added a Redux-style action in webapp/actions/actions.js, named getUserLdapAttributes. The action:
  • Awaits on the getUserLdapAttributes() client function created in step 2.
  • Returns an object with data and error as necessary.
  1. Modified the hovercard container at webapp/components/profile_popver/index.js.
  1. Modifed the hovercard component at webapp/components/profile_popver/profile_popover.jsx.
  • Added an action prop definition for getUserLdapAttributes.
  • Added loading and attributes fields to state.
  • Added React lifecycle function componentDidMount() and used the action to populate state.
  • Updated the render() function to display user information.
    • Skype call link created with <a href="skype:<username>"</a>. For Skype for Business, this can be updated to <a href="sip:<username>@<domain>"</a>.
    • Added loading indicator and displayed LDAP attributes when loading complete.
  • Added a list CSS style under the getStyle function and used it for the <ul> tag in the render() function.
  1. Ran make build and uploaded it to a Mattermost server for testing.
ezoic increase your site revenue


Example hovercard webapp plugin for Mattermost

License:Apache License 2.0


Language:JavaScript 87.8%Language:Makefile 12.2%