For the complete documentation index, see llms.txt
Skip to main content

Feedback widget for Jekyll

Add PushFeedback to your Jekyll site.

Prerequisites​

  • A PushFeedback project. Copy its project ID from Projects > your project > Snippet and replace <YOUR_PROJECT_ID> in the examples.
  • A Jekyll project.

Examples use pushfeedback 0.1.87. Choose one installation mode.

Installation​

Floating button​

Example page with a floating Feedback button on the right edge

  1. Open the _includes/head.html file (or the equivalent file that contains the head section in your Jekyll theme). Append the following code:

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/pushfeedback/pushfeedback.css">
    <script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pushfeedback/pushfeedback.esm.js"></script>

  2. Open _includes/footer.html or the specific file where you'd like the feedback button to appear. Add the following snippet just before its closing tags:

    <feedback-button project="<YOUR_PROJECT_ID>" button-position="bottom-right" modal-position="bottom-right" button-style="dark">Feedback</feedback-button>

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

  3. After making these changes, navigate back to your Jekyll project root and run:

    jekyll build

    Open your site and click Feedback.

Inline button​

Feedback button placed within page content

  1. Load the widget in _includes/head.html:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/pushfeedback/pushfeedback.css">
    <script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pushfeedback/pushfeedback.esm.js"></script>

  2. Place the button in your page or _includes/footer.html:

    <feedback-button project="<YOUR_PROJECT_ID>" button-position="default" modal-position="center" button-style="dark">Feedback</feedback-button>

Embedded form​

Feedback form embedded directly in a page

  1. Load the widget in _includes/head.html:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/pushfeedback/pushfeedback.css">
    <script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pushfeedback/pushfeedback.esm.js"></script>

  2. Place the form in your page or _includes/footer.html:

    <feedback-modal project="<YOUR_PROJECT_ID>" embedded="true"></feedback-modal>

Like and dislike buttons​

Inline Helpful and Not helpful rating buttons

  1. Load the widget in _includes/head.html:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/pushfeedback/pushfeedback.css">
    <script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pushfeedback/pushfeedback.esm.js"></script>

  2. Place the rating controls in your page or _includes/footer.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="light" custom-font="true">
        Helpful
      </feedback-button>
      <feedback-button project="<YOUR_PROJECT_ID>" rating="0" button-position="default" modal-position="center" button-style="light" custom-font="true">
        Not helpful
      </feedback-button>
    </div>

Clicking a rating opens the form with that rating selected. It does not submit until the visitor sends it.

Next steps​

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