Free Mass Readings Widget for your website/blog

Here is the free catholic widget from Catholic Gallery that is capable of displaying the Mass Readings on your blog or website. The mass readings widget displays the current day readings by default. It can also display the readings for other days on a button click. Here is the detailed instruction 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 contents, plugins, and widgets on your website
  • Fixed width layout available
  • More than one 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 read the full Readings
  • Material design with 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.

Available widgets

  1. The widget that fits well on the sidebar (Responsive)
  2. Widget for the content area (Fully Responsive and customization available)

How to display the widget

There are no special instructions for using this widget. However, some overview is given here. WordPress users can use an HTML widget and paste the code there. Similarly, Blogger users can also use the HTML widget (Access it in the layout section) and paste in the code. Other users can use it anywhere in the HTML tag. To display it inside the content, you can directly place it. However, 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.

Copy and paste the following code to your HTML code.

<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 comes with the responsive design but with the maximum width of 336px and auto height. You can set the height and width by adding the style attribute to the HTML element like this.

<div class="cg_mrc_widget" style="width: 400px; height 300px;"></div>

Extra Tips
There is no need to use the HTML 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 HTML 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 a plugin and add the HTML tag (<div class=”cg_mrc_widget”></div>) inside the content or anywhere you wish to show them.

Live preview of the sidebar widget

The Content Widget

This is similar to the sidebar widget but with the horizontal layout. Since it is fully responsive, you can even place it on the sidebar. Copy and paste the following code anywhere on the HTML document.

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

Other customizations similar to the sidebar widget are possible.

Live preview of the content widget

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.

Question: Can I place the widget in between the content?
Answer: Works very well inside the content and is fully responsive. 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 HTML tag any number of time. 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 will be 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 comments about this plugin in the comment box below. You can also request a new widget through the contact form. Hope it is helpful. If you find it useful and you 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.

Related Articles

Free Email Updates
Join the visitors who are receiving our newsletter and receive the Daily Mass Readings, Prayers and other updates directly in your inbox.
Subscribe Now
Give it a try, you can unsubscribe anytime.
Share Your Thoughts