Webflow Integration

Why choose Webflow integration?

Webflow is renowned for crafting responsive websites, landing pages, e-commerce platforms, blogs, and more. It boasts a robust content management system (CMS) and also functions as a hosting platform. By integrating PinMarks with your Webflow site:

• Streamline the feedback collection process on Webflow.
• Save significant developer time — no plugin or app install required.
• Capture visual bug reports with screenshots and console context directly in your PinMarks dashboard.

How to add PinMarks to Webflow

The PinMarks widget loads from a single script tag, so it drops straight into Webflow's Custom Code panel — no separate hosted file needed.

• Within app.pinmarks.io, navigate to your project's Settings → Widget Installation → Code snippet tab and copy the code.

<script src="https://app.pinmarks.io/widget.js" data-project="YOUR_API_KEY"></script>

• Within your Webflow account, navigate to your Project Settings.
• Select the Custom Code tab.
• Paste the snippet into Head Code (add it at the end of the <head> tag) and click Save Changes.
• Click Publish to take your changes live.

Visit your site — the widget will appear.

Only include PinMarks on your staging website

You might want your snippet visible only on your Webflow staging domain (the *.webflow.io subdomain) and not on your live custom domain. To do that, wrap the snippet in a check against window.location.hostname:

<script>
  // Only load PinMarks if the URL includes webflow.io
  if (window.location.hostname.includes('webflow.io')) {
    var s = document.createElement('script');
    s.src = 'https://app.pinmarks.io/widget.js';
    s.dataset.project = 'YOUR_API_KEY';
    s.async = true;
    document.body.appendChild(s);
  }
</script>

Need help?

Email us at support@pinmarks.io and we'll help you get set up.