Feedback widget for Webflow

Add the PushFeedback widget in a Webflow site.

Prerequisites

• A PushFeedback project. Copy its project ID from Projects > your project > Snippet and replace <YOUR_PROJECT_ID> in the examples.
• A Webflow site with custom code access.

Examples use @latest. Replace it with a version number to pin a release.

Installation

Floating button

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

2. Navigate to Site settings.

3. Go to the Custom code tab.

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

       <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pushfeedback@latest/dist/pushfeedback/pushfeedback.css">
   <script type="module" src="https://cdn.jsdelivr.net/npm/pushfeedback@latest/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 site and click Feedback.

Inline button

1. Open Site settings > Custom code and add this to Head code:

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

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

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

Embedded form

1. Open Site settings > Custom code and add this to Head code:

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

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

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

Like and dislike buttons

1. Open Site settings > Custom code and add this to Head code:

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

2. Place the rating controls in an Code 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" 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>

Save your custom code and publish the site to test it. Custom code may not run in the Designer.

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.