< Back

Matrix Live - Generate Link and Embedding Code

Matrix Live is a liveblogging tool built on the Matrix platform. This form allows you to specify the homeserver and room you want to use for your liveblogging. This tool will test whether they are configured correctly for use with Matrix Live and will generate the URL or embed code you can use to link to or include Matrix Live on your blog. If you have any additional questions, refer to the README for details.

For this generator to work, you already need to have chosen a suitable Matrix homeserver to use (that needs to support HTTPS and guest access). You also need to have set-up a room in Matrix (that has Room Preview enabled, which means its history needs to be publicly viewable) where you will liveblog. You can use the great Riot client for Matrix to get started.

This is not a valid domain. Please omit https:// and trailing slashes.
Please provide the domain name of the homeserver you want to connect to, without the https:// or trailing slash. For example, if you connect to your homeserver in Riot using https://matrix.org/, enter matrix.org in the field. The specified homeserver needs to support HTTPS connections (the generator does not support generating code for unencrypted connections) and needs to allow guest access.
You need to enter the technical room ID of the room, not an alias.
Please provide the technical room ID of the room you want to use for liveblogging. The technical room ID can be accessed in Riot Web by accessing the little green cog wheel of the room (top right). The internal room ID is given at the very bottom of that view under "Advanced". It always starts with an exclamation mark (!) and ends with a colon followed by the home server it was created on, e.g. !cURbafjkfsMDVwdRDQ:matrix.org. The specified room needs to allow Room Previews, which means that the "Who can read history?" option on the same Riot pane needs to be set to "Anyone". We also recommend that you keep the room as invite-only (or limit messages to sufficiently high power levels) as otherwise strangers can join your room and post into your liveblog.
Only relevant for the direct link. You can specify a title here that will be displayed on the page the link we generate will point to. If you leave it empty, it will default to "Matrix Live". Note that this has no effect on the embed code, which does not display a title.
Please enter a number or leave the field empty to use the default value of 60.
Only relevant for the embed code. This number specified how many Matrix events should be retrieved from the room when a user opens the liveblogging page, i.e. how far "back" the view should be. Afterwards, new events will be added to the page irrespective of this number as long as the user stays on the page. It defaults to 60 if left empty. Note that this does not have to exactly correspond to the number of news items that will be displayed: It specifies how many technical Matrix events will be retrieved, not all of which will be displayable news. Thus, you should set it to a number that is a bit higher than the number of actual elements you want to display. The link version always loads the default 60 events.
(Advanced) Load jQuery prior to Matrix Live:      
Only relevant for the embed code. Leave at default value of "Yes" if unsure. Specifies whether jQuery should be loaded prior to Matrix Live. If (and only if) you already load jQuery on the site you plan to embed Matrix Live, you do not need to load it again and can set this option to "No".

Method 1: Direct Link

You can use the following link to link directly to the liveblogging version of your room. Just right-click and select "Copy Link Address" to copy the link to the clipboard and from there into your favorite blogging tool:

Method 2: Embed Code

Alternatively, if you want more control, you can also embed the liveblog into an existing page or blog post on your website. Just open the HTML for the page and place the following code at the place where you want the liveblog to appear:



     
In addition, you also need to place the following HTML code somewhere on the page, preferably at the very end (as this will make sure that the JavaScript loads last and does not delay your page rendering):

     


     
Finally, you need to embed the CSS style sheet that determines how the liveblog will look like. This part needs to go into the <head> section of your site:


     


     
If you do not like the look and feel of the liveblog, you can make a copy of this CSS file, modify it to your taste and replace the link with a reference to your modified version. You can also disable the Matrix Live footer by adding the attribute show-footer="false" to the <matrix-live> tag above.


     
All done!

     
That's it. You are all set. You can now join your room using Riot or another Matrix client and post text or pictures, which will appear as you send them for your users in your new liveblog environment.