How to Add a Website Feedback Widget to WordPress, Shopify and Webflow

Before you start

A visual feedback widget is a small script that adds a toolbar to your website. Clients click any element to leave a comment, and your team sees it on a shared board. Every platform below uses the same one-line script; only the place you paste it changes.

• 1Create a project in your PagePin dashboard and copy its project ID (it starts with prj_).
• 2Decide where clients will review: a staging site, preview theme or password-protected URL is ideal.
• 3Have admin access to the site, theme or CMS settings.

Here is the snippet. Replace prj_your_project_id with your own ID:

<script src="https://pagepin-backend.onrender.com/sdk/pagepin.js" data-project="prj_your_project_id"></script>

WordPress

The easiest way, with no code editing, is a header and footer plugin such as WPCode:

• 1Install and activate a code snippets plugin (for example, WPCode).
• 2Add a new snippet for the site footer.
• 3Paste the install snippet and save.
• 4Open your site and check that the feedback toolbar appears at the bottom.

Prefer code? Add this to your child theme’s functions.php:

add_action('wp_footer', function () {
  echo '<script src="https://pagepin-backend.onrender.com/sdk/pagepin.js" data-project="prj_your_project_id"></script>';
});

It works with Gutenberg, Elementor, Divi and most themes, because the script loads in the footer of every page.

Shopify

• 1In Shopify Admin, go to Online Store → Themes.
• 2On a duplicate or unpublished theme used for review, open ⋯ → Edit code.
• 3Open layout/theme.liquid.
• 4Paste the snippet just before the closing </body> tag and save.
• 5Share the theme Preview link with your client.

Webflow

• 1Open Project Settings → Custom Code.
• 2Paste the snippet into Footer Code.
• 3Save, then publish to your webflow.io staging domain.

If you only want it on certain pages, paste the snippet in that page’s settings under Before </body> tag instead.

Next.js and React

In Next.js, use the built-in Script component so the widget loads after the page is interactive and does not slow down the first render:

import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://pagepin-backend.onrender.com/sdk/pagepin.js"
          data-project="prj_your_project_id"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Any other HTML site

For static sites, Framer, Wix custom code or any template, paste the snippet immediately before the closing </body> tag. If the platform has a “footer code” or “custom code” setting, use that.

Test it in two minutes

• 1Open the site in a private window, as your client would.
• 2Click Drop Pin, click any element and leave a test comment.
• 3Open your dashboard and confirm the comment appears with a screenshot and device details.
• 4Delete the test pin, then send the staging link to your client.