[HELP] How to make a custom widget that receives a matrix user's userid?

[153]

Let's say my friend hosts a hypothetical video game that allows users to join without registration, and a URL like https://coolgame.com/?guestname= allows the browser to suggest a pre-filled username (similar to KiwiIRC, some wikis, Jitsi, etherpad, etc). When I simply add $matrix_user_id to the end of the URL (e.g. /addwidget https://coolgame.com/?guestname=$matrix_user_id ) the game website thinks that a guest wants to use the name $matrix_user_id, instead of alice, bob etc

If I host a file, e.g. https://mysite.com/coolgame.html, can I simply use
<script src="https://unpkg.com/[email protected]/dist/api.min.js"></script>
+
<iframe src="https://coolgame.com/?guestname=$matrix_user_id"></iframe>

then in Element enter /addwidget https://mysite.com/coolgame.html to allow my Matrix users to open the game widget with their name pre-filled for them?

I tried to ask about this kind of scenario in the Matrix room and am still a bit lost. I think that asking this as an issue is useful, because if other people wonder how to do this hypothetical scenario in the future (it will become more common as Matrix and Element, etc grow) this issue / future documentation should be able to cover this hypothetical usecase: help someone who's not a webdev or JS person make a custom widget that listens to Matrix suggestions (eg: room name, username) with as little work as possible.

Sorry to be a nuisance, and I am very grateful for any support 🙏

[toger5]

To me it sounds like the Iframe is part of mysite right? and mysite also includes the widget api script? so my site is the widget in the end? If that is all right the situation is the following:

The way the $matrix_user_id works is that element replaces this part of the url. (to my understanding this is not a widgetApi feature. so the widget Api would not even be needed to be included)
If you don't extend the url with the $matrix_user_id inside element $matrix_user_id will just get interpreted as a plain string.
What would be needed is an extension to the widget api, that it could also request those paramters

 const variables = Object.assign({}, widget.data, {
        'matrix_room_id': params.widgetRoomId || "",
        'matrix_user_id': params.currentUserId,
        'matrix_display_name': params.userDisplayName || params.currentUserId,
        'matrix_avatar_url': params.userHttpAvatarUrl || "",
        'matrix_widget_id': widget.id,

        // TODO: Convert to stable (https://github.com/matrix-org/matrix-doc/pull/2873)
        'org.matrix.msc2873.client_id': params.clientId || "",
        'org.matrix.msc2873.client_theme': params.clientTheme || "",
        'org.matrix.msc2873.client_language': params.clientLanguage || "",
    });

manually.
Than you could use the widget Api to get the parameters you need and initilaize <iframe src="https://coolgame.com/?guestname=$matrix_user_id"></iframe> using them.

But I dont see what the issue is with just extending the url of the widget. its not a url that has to be pretty and also does not need to be shared a lot.

Also check the (example)[https://github.com/matrix-org/matrix-widget-api/blob/master/examples/widget/index.html] on how to then actually get the parameters from the url. (see the utils.js file.) .