Learn what a widget is and how to create and use MediaWiki widgets.
MediaWiki Widgets, empowered by the Widgets extension, are vital for site enhancement. A widget is a small application or tool that easily integrates external services or content, from social feeds to interactive tools, enriching the user experience of a wiki. Widgets are tailored for customization and boosting interactivity and significantly elevate the functionality and engagement of any MediaWiki site.
Popular widgets include, e.g., Google Calendar, Google Docs, Google Form, Google Spreadsheet, PayPal donation, PDF, YouTube, Vimeo, Video, SoundCloud, Audio, and Iframe.
In MediaWiki, widgets are reusable blocks of HTML code that are otherwise not permitted on regular pages for security reasons. Using widgets is similar to using templates and as easy.
It is possible to either build your own widgets for your wiki from scratch or use readymade widgets that other users have already created. Here, we will focus on using predefined widgets. You can find them on the Widgets Catalog Wiki, which holds a variety of more than 60 widgets that anyone can copy, adapt, and use.
Starting with the Premium plans, ProWiki allows using the Widgets extension required to add and embed widgets. All you need to do is enable it via the Admin Panel to manage your wiki.
To embed a widget on a MediaWiki wiki, you must first add its source code to the wiki. We detail how to use it in the following two sections:
Add Widgets to Your Wiki
To use widgets, you must first add the widget's source code to your wiki. Just follow these three steps:
Step 1: Access the Widgets Catalog Wiki and select the widget of your choice. Note that a registration to the wiki is required to access the widget pages.
Step 2: On the page of a specific widget, e.g., Google Calendar, you will see detailed information on how to use it, including a usage example. On the top right of that page, there is also a link to the widget's source code. Click on this link, and as a result, you will see the source code.
Step 3: Copy the source code and add it to a page of the same name on your wiki. For example, if you want to copy the source code of the Google Calendar widget, create the "Widgets:Google_Calendar" page and add the code to it. Note that you will need the 'editwidgets' permission to do so. It is assigned to the administrator's group within the wiki by default.
You have now added the widget to your wiki. Next, you can start using it on your wiki's content pages, as we explain in the following section:
Use MediaWiki Widgets
After making a widget available on the wiki, you can now embed it by following two steps:
Step 1: Use the #widget: function to embed the widget.
The basic syntax is {{#widget: widget-name |parameter-name=parameter-value }}.
Replace widget-name with the name of the widget (e.g., 'Google Calendar' ), parameter-name with the name of the parameter (e.g., 'id' ), and parameter-value with the value for the parameter (e.g., 'usa@holiday.calendar.google.com' ). A parameter may be optional or required.
For example, if you are going to embed a Google Calendar showing the US holidays you would use:
{{#widget: Google Calendar |id=usa@holiday.calendar.google.com }}
Here, the 'id' parameter is a required parameter.
Step 2: Customize the embedded widget. This is an optional step.
You can customize the embedded widget by using optional parameters. The parameters available to a widget vary depending on the specific widget you are using. The Google Calendar widget, for example, supports a lot of parameters:
- width: Set the width of the widget.
- height: Set the height of the widget.
- color: Set the display color as hex code for the events of the calendar specified with the 'id' parameter.
- title: Set a new title for the calendar specified with the 'id' parameter.
- ... many more parameters
The available parameters to a widget are always documented on the respective widget's page on the Widgets Catalog Wiki.
For example, to set the Google Calendar widget to a width of 1000 pixels, a height of 500 pixels, the color for the events to green, and change the title of the calendar to Holidays in the USA, you would use:
{{#widget: Google Calendar |id=usa@holiday.calendar.google.com |width=1000
|height=500 |color=009688 |title=Holidays in the USA }}
This image shows how the resulting calendar will look on your wiki page:
This help article provided a guide on enhancing MediaWiki sites with widgets, covering the selection of pre-defined
widgets from the Widgets Catalog Wiki, the addition
of their source code to the user's wiki, and the embedding of these widgets into wiki pages using the
#widget: function. It highlighted how widgets can significantly improve site functionality and
user engagement with minimal coding effort, providing a valuable tool for novice and experienced MediaWiki users.