Feedback widget for LearnDash

PushFeedback collects user feedback directly from your website. This guide covers installation in LearnDash, with options for automatic and custom widget placement.

Prerequisites

Before you begin, you need:

• A PushFeedback account. If you don't have one, sign up for free.
• A project created in your PushFeedback dashboard. If you haven't created one yet, follow the steps in the Quickstart guide.
• Access to your LearnDash website in WordPress.

Installation

Floating button

1. Access the admin dashboard of your LearnDash website by navigating to http://yourwebsite.com/wp-admin/.

2. Go to Appearance > Theme Editor.

3. Add the following code at the end of your theme's functions.php file:

   function is_learn_dash_fullscreen() {
       return is_singular(array('sfwd-lessons', 'sfwd-quiz', 'sfwd-topic'));
   }
   
   function enqueue_pushfeedback_scripts_conditionally() {
       if (is_learn_dash_fullscreen()) {
           echo '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.css">';
           echo '<script type="module" src="https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.esm.js"></script>';
       }
   }
   add_action('wp_head', 'enqueue_pushfeedback_scripts_conditionally');
   
   function inject_custom_feedback_widget($content) {
       static $widget_injected = false;
       if (is_learn_dash_fullscreen() && !$widget_injected) {
           $project_id = '<YOUR_PROJECT_ID>'; // Replace with your actual project ID
           
           $widget_html = '
               <feedback-button 
                   project="' . $project_id . '"
                   button-style="dark"
                   modal-position="bottom-right"
                   button-position="bottom-right"
               >
               Share feedback
               </feedback-button>
           ';
   
           $widget_injected = true;
           return $content . $widget_html;
       }
   
       return $content;
   }
   add_filter('the_content', 'inject_custom_feedback_widget');

   Replace <YOUR_PROJECT_ID> with your project's ID from the PushFeedback dashboard.

4. Save your changes.

5. Visit a LearnDash lesson, topic, or quizz in a web browser. Confirm that the feedback button is visible and operational.

Inline button

Use this alternative in place of the floating-button code in functions.php; define the functions only once:

// Add this once to your theme's functions.php for the chosen mode.
add_action('wp_head', function () {
    if (!is_singular(array('sfwd-lessons', 'sfwd-quiz', 'sfwd-topic'))) return;
    echo '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.css">';
    echo '<script type="module" src="https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.esm.js"></script>';
});

add_filter('the_content', function ($content) {
    if (!is_singular(array('sfwd-lessons', 'sfwd-quiz', 'sfwd-topic'))) return $content;
    return $content . <<<'HTML'
<feedback-button project="<YOUR_PROJECT_ID>" button-position="default" modal-position="center" button-style="dark">Feedback</feedback-button>
HTML;
});

Replace <YOUR_PROJECT_ID> with your project ID. The widget appears after each lesson, topic, or quiz.

Embedded form

Use this alternative in place of the floating-button code in functions.php; define the functions only once:

// Add this once to your theme's functions.php for the chosen mode.
add_action('wp_head', function () {
    if (!is_singular(array('sfwd-lessons', 'sfwd-quiz', 'sfwd-topic'))) return;
    echo '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.css">';
    echo '<script type="module" src="https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.esm.js"></script>';
});

add_filter('the_content', function ($content) {
    if (!is_singular(array('sfwd-lessons', 'sfwd-quiz', 'sfwd-topic'))) return $content;
    return $content . <<<'HTML'
<feedback-modal project="<YOUR_PROJECT_ID>" embedded="true"></feedback-modal>
HTML;
});

Replace <YOUR_PROJECT_ID> with your project ID. The widget appears after each lesson, topic, or quiz.

Like and dislike buttons

Use this alternative in place of the floating-button code in functions.php; define the functions only once:

// Add this once to your theme's functions.php for the chosen mode.
add_action('wp_head', function () {
    if (!is_singular(array('sfwd-lessons', 'sfwd-quiz', 'sfwd-topic'))) return;
    echo '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.css">';
    echo '<script type="module" src="https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.esm.js"></script>';
});

add_filter('the_content', function ($content) {
    if (!is_singular(array('sfwd-lessons', 'sfwd-quiz', 'sfwd-topic'))) return $content;
    return $content . <<<'HTML'
<p>Was this helpful?</p>
<div class="pushfeedback-thumbs-row">
  <feedback-button project="<YOUR_PROJECT_ID>" rating="1" button-position="default" modal-position="center" button-style="default" custom-font="true">
    <span class="pushfeedback-thumb-label">Helpful</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" /></svg>
  </feedback-button>
  <feedback-button project="<YOUR_PROJECT_ID>" rating="0" button-position="default" modal-position="center" button-style="default" custom-font="true">
    <span class="pushfeedback-thumb-label">Not helpful</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17" /></svg>
  </feedback-button>
</div>
HTML;
});

Replace <YOUR_PROJECT_ID> with your project ID. The widget appears after each lesson, topic, or quiz.

Next steps

Choose what to do next:

• Customization — Adjust the widget's layout, styles, and text.
• Integrations — Forward feedback to Slack, email, Jira, and more.