Skip to content

Events Triggered Sentiments Pop-up

The Sentiments rating pop-up is a crucial component of WOGAA. By default, there are two ways to trigger this pop-up:

  1. User manually clicks on the Sentiments widget.
  2. The TS complete function is executed.

However, in certain situations, these two methods may not be the best for you. Thus, we are introducing the new Events Triggered Sentiments Pop-up feature for more flexibility.

Here are a few use cases for this feature:

  • Scroll-to-bottom: To find out what the website visitor thinks after viewing your entire page, you can configure the Sentiments Pop-up to appear when the user scrolls to the bottom.

  • Button or Link Click: To encourage more website visitors to leave Sentiments ratings and feedback, you can include a hyperlink or button on your homepage or any other relevant pages to trigger the Sentiments pop-up upon clicking.

  • Time-on-Page: If you notice that most of your website visitors usually spend a certain amount of time on a page, you can trigger the Sentiments pop-up based on that so they can leave their ratings and feedback after an appropriate amount of time.

To gain control, use the following function to trigger the Sentiments pop-up manually via code:

window.wogaaCustom.sentiments.showRatingPopup();

Examples of Event Triggered Sentiments

Example 1: Trigger on click Event

This example shows how to trigger the Sentiments pop-up whenever a click event occurs on a specific button.

<!DOCTYPE html>
<html>
  <head>
    <!-- Include WOGAA.js code -->
  </head>
  <body>
    <!-- Content of the page -->
    <button id="showSentiment">Show Sentiment</button>
    <script>
      // Ensure the DOM is fully loaded before executing the script
      document.addEventListener("DOMContentLoaded", () => {
        // Get the button element by its ID
        const showSentimentButton = document.getElementById("showSentiment");

        // Attach a click event listener to the button
        showSentimentButton.onclick = () =>
          // Call the showRatingPopup function from the WOGAA sentiments object
          window.wogaaCustom.sentiments.showRatingPopup();
      });
    </script>
  </body>
</html>

Example 2: Trigger at Regular Intervals Using setInterval

This example shows how to trigger the Sentiments pop-up at regular intervals using setInterval.

<!DOCTYPE html>
<html>
  <head>
    <!-- Include WOGAA.js code -->
  </head>
  <body>
    <!-- Content of the page -->
    <script>
      // Ensure the DOM is fully loaded before executing the script
      document.addEventListener("DOMContentLoaded", () => {
        // Call the showRatingPopup function from the WOGAA sentiments object every 5 seconds
        setInterval(
          () => window.wogaaCustom.sentiments.showRatingPopup(),
          5000 // Change the interval as needed, e.g., 10000 for 10 seconds
        );
      });
    </script>
  </body>
</html>

Example 3: Trigger After a Specific Period Using setTimeout

This example shows how to trigger the Sentiments pop-up after a specific period using setTimeout.

<!DOCTYPE html>
<html>
  <head>
    <!-- Include WOGAA.js code -->
  </head>
  <body>
    <!-- Content of the page -->
    <script>
      // Ensure the DOM is fully loaded before executing the script
      document.addEventListener("DOMContentLoaded", () => {
        // Call the showRatingPopup function from the WOGAA sentiments object after 5 seconds
        setTimeout(
          () => window.wogaaCustom.sentiments.showRatingPopup(),
          5000 // Change the timer as needed, e.g., 10000 for 10 seconds
        );
      });
    </script>
  </body>
</html>

Example 4: Trigger on scroll Event

This example shows how to trigger the Sentiments pop-up when the user scrolls to the bottom of the page.

<!DOCTYPE html>
<html>
  <head>
    <!-- Include WOGAA.js code -->
  </head>
  <body>
    <!-- Content of the page -->
    <script>
      // Ensure the DOM is fully loaded before executing the script
      document.addEventListener("DOMContentLoaded", () => {
        // Function to check if the user has scrolled to the bottom of the page
        const checkScrollToBottom = () => {
          // Get the total height of the document (including the part not visible on the screen)
          const scrollHeight = document.documentElement.scrollHeight;

          // Get the number of pixels that the document has been scrolled vertically
          // Use document.documentElement.scrollTop for modern browsers
          // Use document.body.scrollTop as a fallback for older browsers
          const scrollTop =
            document.documentElement.scrollTop || document.body.scrollTop;

          // Get the inner height of the window in pixels (the height of the visible part of the document)
          const clientHeight = document.documentElement.clientHeight;

          // Check if the user has scrolled to (or nearly to) the bottom of the page
          // The condition compares the sum of scrollTop and clientHeight to the scrollHeight minus 1 pixel
          if (scrollTop + clientHeight >= scrollHeight - 1) {
            // Call the showRatingPopup function from the WOGAA sentiments object
            window.wogaaCustom.sentiments.showRatingPopup();
          }
        };

        // Attach a scroll event listener to the window
        window.addEventListener("scroll", checkScrollToBottom);
      });
    </script>
  </body>
</html>

If you have any questions, do not hesitate to reach out to our customer support team at support@wogaa.gov.sg. We will respond to you as soon as possible.