For the complete documentation index, see llms.txt
Saltar al contenido principal

Feedback widget for Webflow

PushFeedback collects user feedback directly from your website. This guide covers installation in a Webflow site.

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.
  • A Webflow site with the ability to add custom code (available on paid plans).

Installation​

Floating button​

Example page with a floating Feedback button on the right edge

  1. Log in to your Webflow account and open your project.

  2. Navigate to Project Settings by clicking the gear icon in the left sidebar.

  3. Go to the Custom Code tab.

  4. In the Head Code section, add the following code to load the PushFeedback styles and scripts:

    <!-- Initialize the PushFeedback widget -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.css">
    <script type="module" src="https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.esm.js"></script>

  5. In the Footer Code section (which is inserted before the closing body tag), add the feedback button:

    <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.

  6. Click Save Changes.

  7. Publish your Webflow site to see the changes live.

  8. Open your published website in a web browser to verify the feedback button appears and functions correctly.

Inline button​

Example page with an inline Feedback button

  1. Load the widget in Webflow’s Head Code:

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

  2. Place the button in an Embed element at the end of the page content:

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

Embedded form​

Example page with the feedback form embedded in the content

  1. Load the widget in Webflow’s Head Code:

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

  2. Place the form in an Embed element at the end of the page content:

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

Like and dislike buttons​

Example page with inline like and dislike buttons

  1. Load the widget in Webflow’s Head Code:

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

  2. Place the rating controls in an Embed element at the end of the page content:

    <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>

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

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.