Free Mass Readings Widget for your website/blog

Here is the free Catholic Mass Readings widget from Catholic Gallery. You can use this widget to display the Mass Readings on your blog or website in English or Tamil.

The widget displays the current day’s readings by default and allows visitors to navigate to the readings for previous and following days. It can be placed in your website’s content area, sidebar, or other suitable location.

Features of the Widget

• Fully responsive and adapts to different screen sizes and container widths.
• Works alongside other content, plugins, and widgets on your website.
• Can be customized with CSS to blend with the design of your website.
• Multiple widgets can be displayed on the same page.
• Works well in both sidebars and content areas.
• Allows visitors to navigate to previous and following days’ readings.
• Provides a direct link to the complete Mass Readings.
• Uses a clean Material Design-inspired layout.
• The widget data and scripts are hosted on Catholic Gallery, so there is no additional data-processing load on your server.
• The widget script only needs to be loaded once, even when multiple widgets are displayed on the same page.
• Supports Mass Readings throughout the year.

How to Add the Widget

The widget uses a simple HTML container and an external JavaScript file. The script loads the Mass Readings into the widget automatically.

To use the widget, add the appropriate widget container wherever you want the readings to appear and load the corresponding JavaScript file on the page.

On WordPress, you can add the widget container using a Custom HTML block. On other websites and blogging platforms, add the container to the HTML of the page wherever you want the widget to appear.

Code to Display the Widget

Copy and paste the appropriate code for the language you want to display.

English Mass Readings Widget

<div class="cg_mrc_widget"></div>
<script src="https://cdn1.catholicgallery.org/wp-content/uploads/widgets/rich-card/cg_mrc_widget.js" async></script>

Tamil Mass Readings Widget

<div class="cg_mrc_widget_tam"></div>
<script src="https://cdn1.catholicgallery.org/wp-content/uploads/widgets/rich-card/cg_mrc_widget_tam.js" async></script>

Using Multiple Widgets

You can display more than one widget on the same page. The corresponding JavaScript file only needs to be loaded once. After the script has been loaded, you can add multiple widget containers wherever you want the readings to appear.

Customizing the Widget Size

The widget is responsive and automatically adapts to the available container width. If you want to limit its width, you can add CSS properties to the widget container.

<div class="cg_mrc_widget" style="max-width:320px; width:100%; margin:0 auto;"></div>

You can add other supported CSS properties to the container if required.

Pro Tips

The script does not need to be added every time you want to display another widget. Load the script once and place as many widget containers as needed on the page.

For example, you can load the English widget script once and then add the following container wherever you want another English widget to appear:

<div class="cg_mrc_widget"></div>

For Tamil, use:

<div class="cg_mrc_widget_tam"></div>

Live Preview: English Mass Readings Widget

Live Preview: Tamil Mass Readings Widget

Changelog

February 16, 2025

• Added the Tamil Mass Readings Widget.
• Minor bug fixes.
• Minor CSS fixes.

October 29, 2024

• Removed the jQuery dependency.
• Improved loading performance.
• Made several cosmetic improvements and fixed minor bugs.

February 15, 2020

• Minor bug fixes.
• Layout improvements.
• Improved widget behavior in containers narrower than 200px.

December 30, 2019

• Fixed minor bugs.
• Removed the horizontal widget.
• Added support for using the same code for fixed-width and responsive horizontal layouts.

September 3, 2019

• Initial version.

Frequently Asked Questions

Can I place two widgets on the same page?
Answer: Yes. You can place multiple widgets on the same page. Load the corresponding widget script once and add the widget container wherever you want each widget to appear.

Can I customize or hide parts of the widget?
Answer: You should not modify or remove any content displayed by the widget, including the Catholic Gallery attribution. You may use custom CSS to adjust the appearance of the widget to better match your website.

Can I place the widget in the middle of my content?
Answer: Yes. The widget is designed to work inside your content and adapts to the available width. On WordPress, you can place the widget container in a Custom HTML block or another suitable location provided by your theme or editor.

Do I need to load the script again for each widget?
Answer: No. The corresponding script only needs to be loaded once on the page. You can then add multiple widget containers. Loading the same script more than once is unnecessary.

Why does changing the day on one widget affect the other widgets?
Answer: The widgets on the same page use the same navigation events. As a result, changing the selected day on one widget may also update the other widgets on that page.

If you have any questions or encounter a problem while using the widget, feel free to leave a comment below or contact us through the contact form. We also welcome your feedback and suggestions for future widgets.