Using a custom Jitsi Meet room in a Matrix channel

9. Jun 2021 | KaratekHD | CC-BY-SA-3.0

Using a custom Jitsi Meet room in a Matrix channel

In Element, you can create nice widgets on top of a channel that contain a Jitsi Meet video conference. However, these Widgets normally point to a Jitsi server from Element and to a random meeting ID. So, here is my step by step guide on how to create a widget with a custom Jitsi room.

  1. Open the room you want to have the widget in.
  2. Click on the room name and select the “Advanced” tab Click on "Advanced"
  3. Click on “Open Devtools”
  4. Select “Send Custom Event”
  5. Click on the red “Event” button. You should see something like this: The custom event screen
  6. In the “Event Type” text field, write this: im.vector.modular.widgets
  7. In the “State Key” text field, write this: dimension-jitsi-1622722886114
  8. Fill the large text box with the following:
    {
     "type": "jitsi",
     "url": "https://dimension.opensuse.org/widgets/jitsi?conferenceId=$conferenceId&domain=$domain&isAudioOnly=$isAudioOnly&displayName=$matrix_display_name&avatarUrl=$matrix_avatar_url&userId=$matrix_user_id",
     "name": "Jitsi Video Conference",
     "data": {
         "conferenceUrl": "<jitsi instance>/<jitsi room>",
         "domain": "<jitsi instance>",
         "conferenceId": "<jitsi room>",
         "isAudioOnly": false,
         "url": "https://dimension.opensuse.org/widgets/jitsi?conferenceId=$conferenceId&domain=$domain&isAudioOnly=$isAudioOnly&displayName=$matrix_display_name&avatarUrl=$matrix_avatar_url&userId=$matrix_user_id",
         "dimension:app:metadata": {
             "wrapperUrlBase": "",
             "wrapperId": "",
             "scalarWrapperId": null,
             "integration": {
                 "category": "widget",
                 "type": "jitsi"
             }
         }
     },
     "id": "dimension-jitsi-1622722886114"
    }
    

    Replace <jitsi instance> with the URL of the Jitsi Server, e.g. https://meet.opensuse.org and replace <jitsi room> with the name of the Jitsi room, e.g. bar A working example looks like this (it links to the openSUSE Bar):

    {
     "type": "jitsi",
     "url": "https://dimension.opensuse.org/widgets/jitsi?conferenceId=$conferenceId&domain=$domain&isAudioOnly=$isAudioOnly&displayName=$matrix_display_name&avatarUrl=$matrix_avatar_url&userId=$matrix_user_id",
     "name": "Jitsi Video Conference",
     "data": {
         "conferenceUrl": "https://meet.opensuse.org/bar",
         "domain": "meet.opensuse.org",
         "conferenceId": "bar",
         "isAudioOnly": false,
         "url": "https://dimension.opensuse.org/widgets/jitsi?conferenceId=$conferenceId&domain=$domain&isAudioOnly=$isAudioOnly&displayName=$matrix_display_name&avatarUrl=$matrix_avatar_url&userId=$matrix_user_id",
         "dimension:app:metadata": {
             "wrapperUrlBase": "",
             "wrapperId": "",
             "scalarWrapperId": null,
             "integration": {
                 "category": "widget",
                 "type": "jitsi"
             }
         }
     },
     "id": "dimension-jitsi-1622722886114"
    }
    
  9. Click on the green “Send” button
  10. Have a lot of fun…

Share this post: