Free Mass Readings Widget for your website/blog

Here is the free Catholic Mass Readings widget from the Catholic Gallery that is capable of displaying the Mass Readings on your blog or website. This widget displays the current day readings by default. It can also display the readings for other days on a click of a button. Here are the detailed instructions on using this Catholic mass readings widget (For a better experience visit this page from your desktop).

Functionalities of the widget

• Fully responsive.
• Fully compatible with other content, plugins, and widgets on your website.
• Blends in with the content with custom CSS.
• More than one widget can be placed on a page.
• Works perfectly on the sidebar as well as on the content area.
• Navigate to next and previous day readings.
• Direct link to the full Readings.
• Material Design with a beautiful layout.
• No extra load on your server as the data and script are hosted on our servers.
• No need to call the script more than once even if you want to display more than one widget on a page.
• Capable of displaying the mass readings throughout the year.

How to display the widget?

There are no special instructions for using this widget. However, some overview is given here. To use this on a sidebar, WordPress users can use the HTML widget and paste the code there. Similarly, Blogspot users can also use the HTML widget (Access it in the layout section) and paste the code. Other users can use it anywhere inside the HTML code. If you use a CMS that doesn’t support inserting scripts inside the content area, insert the script alone (Line 2) on the HTML head tag. Add the div tag (Line 1) anywhere on the page to display the readings. If you have direct access to the HTML of the page, you can directly paste this code.

Code to display the Widget

Copy and paste the following code to display the 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>

Pro tips for using this widget

This widget comes with a fully responsive design and can adapt any container size. However, if you want the widget to have a fixed width and height, you can set the width and height of the widget by adding them in the style attribute as shown in the example below. You can add any other supported CSS properties.

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

Extra Tips
There is no need to use the div tag and the script tag together. The script can be called once at the head or at the end of the body tag and multiple div tags can be placed anywhere on the document. For example, WordPress doesn’t support the script tags directly on the editor (Now possible with the Gutenberg editor using custom HTML block). In that case, you can insert the script tag separately in the head of the body tag using plugins like AdInserter and add the div tag (<div class=”cg_mrc_widget”></div>) inside the content or anywhere you wish to display the widget.

Live preview of the widget with a fixed layout

Live preview of the widget with a responsive layout

Changelog

February 15, 2020

• Some minor bug fixes.
• Layout changes.
• Widget loads properly on the containers with a width of less than 200px.

December 30, 2019

• Fixed some minor bugs.
• Removed horizontal widget.
• Added functionality to use the same code for both the fixed width and responsive horizontal layouts.

September 3, 2019

• Initial Version

FAQs

Question: Can I place two widgets on the same page?
Answer: Of-course. It is made in such a way that more than one can be placed on the same page.

Question: Can I remove or hide a part of the HTML displayed by widget?
Answer: You are not allowed to make such customization. This is a free service provided by Catholic Gallery. Do not try to remove anything that the widget displays especially the credits at the bottom of the widget. However, you can change the color and style of the widget through custom CSS if you need to blend the widget along with other contents of your site.

Question: Can I place the widget in between the content?
Answer: Works very well inside the content and is fully responsive. WordPress users can use a plugin like AdInserter to insert it anywhere inside the content or use your theme’s default option if any.

Question: Do I need to call the script again if I want to show the widget more than once?
Answer: No, It is not necessary. You can call the script once and add the div tag any number of times. There won’t be a problem even if you add the script twice. But is an extra load for the browser.

Question: Why does the next – previous button clicks on one widget affect others?
Answer: Since the same click event is bind to the buttons on all the widgets, the content changes on all the widgets.

If you have any queries or if you face any problem with the widget, feel free to comment below or contact us through the contact form. Leave your valuable feedback and suggestions about this plugin in the comment box below. You can also request a new widget through the contact form. I hope it is helpful. If you find it useful and you have started using this on your website or blog, please leave a comment below with your website address. This will be useful for us and others to see the widget in action.