Embedding Matrix chat in a WordPress page

Matrix is a new-ish network for exchanging messages. Currently it’s main use is with one of several clients as an instant messenger for 1:1 or group chat. How cool would it be to embed a chatroom in a webpage…

Update 2021-3-9: Cactus Comments look promising!

First things first, Matrix is pretty awesome. During the several years I’ve been using it it’s been getting better and better.

Matrix uses a classic concept of chat rooms. By default, to join a chat room you need to create an account with a nickname, get an invitation and join. To make a chat room function more like a forum thread accessible by guests, set it to:

  • Unencrypted (obviously)
  • With all history readable by anyone (not just participants)
  • Accessible by link (allows users and guests to join without an invitation)

Element web

If you want to join that chat room using your browser, there is an official web client – Element (formerly Riot). It is possible to use it as a full-featured client. You can also use it to directly access the chat room using a “share” link. This works well if you are willing to click through several pages before seeing the chat room.

However, there doesn’t seem to be a way to embed it in a website. There was an attempt as a GSOC project, but it’s marked as a “work in progress” with no progress since September 2020.

Matrix Live

Another option is Matrix Live. It’s an embeddable HTML component for live-blogging based on Matrix. It allows to view contents of a chat room directly on a webpage. Read-only, no possibility to send messages. Embedding is simple, just generate a few lines of HTML using the generator, insert into the page itself and that’s it. In WordPress, just jam both generated snippets into a “Custom HTML” block and insert the CSS in global “Additional CSS” (Appearance -> Customize). In order to make the embed look a bit better it’s possible to just copy the contents as custom CSS and modify them a bit (yes, I didn’t do a great job, sorry).

As you can see below the result is not perfect and unfortunately Matrix Live doesn’t show any signs of recent development. But it seems to be all that’s available at the moment and sufficient for some use cases. Let’s see what the future brings.


Cactus Comments

A newcomer in this area is Cactus Comments. It allows both viewing and posting comments, pretty neat! The project is clearly very new and some features are missing (posting images, editing comments, …) but it seems to be promising and alive.

There is even support for basic moderation (user-banning) using an automatically generated moderation room. Spam from guest-access might prove to be an issue though. Let’s see what solution do the devs come up with.

Try it out yourself!

Leave a Reply

Your email address will not be published. Required fields are marked *