Get Code for your Website

Assalamu Alaikum! Get the code for your website to showcase the Hadees of the Day and display it on your website.

To display the Hadees of the Day widget on your website, follow these steps:

1. Go to the widget section of your website.
2. Add an HTML widget to the desired location on your webpage.
3. Paste the following code into the HTML widget:

<div id="hadees-widget-container"></div>
<script>
 // Select the widget container
var widgetContainer = document.querySelector('#hadees-widget-container');

// Check if Hadees data is already stored in local storage
var cachedHadeesData = localStorage.getItem('hadeesData');

// Check if the cached data is still valid (less than 24 hours old)
var cacheTimestamp = localStorage.getItem('cacheTimestamp');
var currentTimestamp = Math.floor(Date.now() / 1000); // Current timestamp in seconds
var cacheDuration = 24 * 60 * 60; // 24 hours in seconds

if (cachedHadeesData && cacheTimestamp && currentTimestamp - cacheTimestamp < cacheDuration) {
  // Use the cached Hadees data
  widgetContainer.innerHTML = cachedHadeesData;
} else {
  // Fetch Hadees data from the API endpoint
  fetch('https://ummat-e-nabi.com/wp-admin/hod-with-push-api-v2.php')
    .then(response => response.text())
    .then(widgetHTML => {
      // Insert the Hadees widget HTML into the widget container
      widgetContainer.innerHTML = widgetHTML;

      // Store the fetched Hadees data in local storage
      localStorage.setItem('hadeesData', widgetHTML);

      // Store the current timestamp in local storage
      localStorage.setItem('cacheTimestamp', currentTimestamp);
    })
    .catch(error => {
      console.error('Error fetching Hadees widget:', error);
    });
}

</script>