Feedback widget for LearnDash

Add the PushFeedback widget in LearnDash, with options for automatic and custom widget placement.

Prerequisites

• A PushFeedback project. Copy its project ID from Projects > your project > Snippet and replace <YOUR_PROJECT_ID> in the examples.
• 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. Open your child theme's functions.php. Use a child theme so updates preserve your changes.

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@latest/dist/pushfeedback/pushfeedback.css">';
           echo '<script type="module" src="https://cdn.jsdelivr.net/npm/pushfeedback@latest/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. Open a LearnDash lesson, topic, or quiz and click Share feedback.

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@latest/dist/pushfeedback/pushfeedback.css">';
    echo '<script type="module" src="https://cdn.jsdelivr.net/npm/pushfeedback@latest/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" screenshot-positioning="true">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@latest/dist/pushfeedback/pushfeedback.css">';
    echo '<script type="module" src="https://cdn.jsdelivr.net/npm/pushfeedback@latest/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@latest/dist/pushfeedback/pushfeedback.css">';
    echo '<script type="module" src="https://cdn.jsdelivr.net/npm/pushfeedback@latest/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" screenshot-positioning="true" hide-icon="true">
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H3a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L11 2a3.13 3.13 0 0 1 4 3.88Z"/></svg>
    <span class="pushfeedback-thumb-label">Helpful</span>
  </feedback-button>
  <feedback-button project="<YOUR_PROJECT_ID>" rating="0" button-position="default" modal-position="center" button-style="default" custom-font="true" screenshot-positioning="true" hide-icon="true">
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H21a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L13 22a3.13 3.13 0 0 1-4-3.88Z"/></svg>
    <span class="pushfeedback-thumb-label">Not helpful</span>
  </feedback-button>
</div>
HTML;
});

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

Next steps

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