# Feedback widget for LearnDash

> For the complete documentation index, see [llms.txt](/llms.txt)

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

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](https://app.pushfeedback.com/accounts/signup/).
- A project created in your PushFeedback dashboard. If you haven't created one yet, follow the steps in the [Quickstart](../quickstart.md#2-create-a-project) guide.
- Access to your LearnDash website in [WordPress](wordpress.md).

## Installation

### Floating button

![Example page with a floating Feedback button on the right edge](./images/floating-button-preview.png)

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:

    ```php
    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](../quickstart.md#2-create-a-project).

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.

![Docusaurus Feedback widget](./images/feedback-learndash.png)

### Inline button

![Example page with an inline Feedback button](./images/inline-button-preview.png)

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

```php
// 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

![Example page with the feedback form embedded in the content](./images/embedded-form-preview.png)

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

```php
// 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 {#advanced-setup-like-and-dislike-buttons}

![Example page with inline like and dislike buttons](./images/inline-thumbs-preview.png)

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

```php
// 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'
Was this helpful?

  <feedback-button project="<YOUR_PROJECT_ID>" rating="1" button-position="default" modal-position="center" button-style="default" custom-font="true">
    Helpful
    <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">
    Not helpful
    <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>

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](/category/customization) — Adjust the widget's layout, styles, and text.
- [Integrations](/category/integrations) — Forward feedback to Slack, email, Jira, and more.
