Why Choose Webflow Integration?
Webflow is renowned for crafting responsive websites, landing pages, eCommerce platforms, blogs, and more. It boasts a robust content management system (CMS) and also functions as a hosting platform. By integrating with Marker.io:
Streamline the feedback collection process on Webflow.
Save significant developer time.
Directly channel your Webflow feedback into your preferred project management tools and issue trackers.
How to add marker.io to Webflow
Within app.marker.io navigate to your project settings > widget > Installation > Add code manually and copy code.
Within your Webflow account, navigate to project settings.
Select the Custom Code menu tab
Paste the code snippet inside the <head> tag and save changes.
Publish your site.
Visit your site, and the widget will appear.
Only include marker.io only on your staging website
You might want to add your snippet code only visible on your staging website.
To do that, you need to add a condition around your marker.io snippet:
<script>
// Only load marker.io if url includes webflow.io
if (window.location.href.includes("webflow.io")) {
// Your marker.io snippet
window.markerConfig = {
project: 'PROJECT_ID', // replace with your project id
source: 'snippet'
};
!function(e,r,a){if(!e.__Marker){e.__Marker={};var t=[],n={__cs:t};["show","hide","isVisible","capture","cancelCapture","unload","reload","isExtensionInstalled","setReporter","setCustomData","on","off"].forEach(function(e){n[e]=function(){var r=Array.prototype.slice.call(arguments);r.unshift(e),t.push(r)}}),e.Marker=n;var s=r.createElement("script");s.async=1,s.src="https://edge.marker.io/latest/shim.js";var i=r.getElementsByTagName("script")[0];i.parentNode.insertBefore(s,i)}}(window,document);
}
</script>
💡Tip: Don't add your <script> tag inside the IF condition.
Need Help?
If you have any questions, comments, or corrections, chat with us at the bottom right of our web pages.