Why HubSpot
HubSpot CMS combines website creation with the power of a CRM platform to customize the buying journey.
Why Marker.io?
With the power of Marker.io, collecting website feedback on HubSpot is a breeze, saving hours of developer time. Collect your Webflow feedback directly into your favorite PM tools and issue trackers.
How to add marker.io to HubSpot
We will follow the instructions from this link, but check back often as these are subject to change:
Create your javascript file
Within app.marker.io navigate to your project settings > widget > Installation > Add code manually and copy code.
In your HubSpot account, navigate to Marketing > Design Tools.
In the left sidebar menu, click File > New file. You may need to click the folder folder icon to expand the menu.
In the dialog box, click the What would you like to build today? dropdown menu and select JavaScript.
Click Next.
In the File name field, enter the name marker for your JavaScript file.
To update the file's location, in the File location section, click Change and select the folder to add the file.
Click Create.
Type or paste your JavaScript code from app.marker.io into the code editor.
Remove the <script> and </script> tags from the code
You should now have a file that resembles:
In the upper right, click Publish changes to take your changes live.
Get the public URL of your JavaScript file.
The public URL of your JavaScript file will resemble: {{ get_asset_url('/marker.js') }}
To get your unique public URL, following on from the steps above:
In the left sidebar menu, select your JavaScript file.
Click Actions > Copy public URL.
Add the Marker.io widget to an individual page
In your HubSpot account, navigate to Marketing > Website > Website Pages or Landing Pages.
Hover over the page that you want to edit, then click Edit.
In the page editor, click the Settings tab.
Click Advanced options.
In the Footer HTML section, paste the public URL as the value for the script tag's source:
<!-- start Main.js Do Not Remove -->
<script src='insert your file's public URL here'></script>
<!---End Main.js-->
Sample
<!-- start Main.js Do Not Remove -->
<script src='{{ get_asset_url('/marker.js') }}'></script>
<!---End Main.js-->
To publish your changes to the live page, in the upper-right, click Update.
You should now see the widget on your page
Add the Marker.io widget to all pages
In your HubSpot account, click the settings icon in the main navigation bar.
In the left sidebar menu, navigate to Website > Pages.
Click the Choose a domain to edit its settings dropdown menu and select the domain to add the JavaScript file to.
In the Site footer HTML section, paste the public URL as the value for the script tag’s source:
<!-- start Main.js Do Not Remove -->
<script src='insert your file's public URL here'></script>
<!---End Main.js-->
Click Save.
You should now see the widget on all of your pages
Widget not displaying on your HubSpot website?
If your widget is not displaying, try the following:
Ensure your website[s] is listed under website domains. Navigate to your project settings > Settings > General > Website domains. Check that the correct website domain(s) is listed here.
Check widget visibility settings: Check settings, including widget appearance and widget targeting within your Marker.io account.
Finally, check your caching settings, and open up your website using an incognito window to verify that it's working.
Still having issues? Contact us anytime in the chat at the bottom right of our website.