Would you like to add the Marker.io widget to your MkDocs website for easy issue tracking? Let’s walk through the steps below to get you up and running.
How to Install the Marker.io Widget in MkDocs
Step 1: Create a JavaScript File
Create a Subfolder: Inside your
docsfolder, create a new subfolder namedjavascripts. This will hold your JavaScript files.docs/
javascripts/Create a JavaScript File: Within the
javascriptsfolder, create a new JavaScript file namedmarker.js.docs/
javascripts/
marker.js
Step 2: Add the Marker.io Code
Copy the Code: Go to your Marker.io project and copy the JavaScript snippet provided there. This snippet is necessary for the widget to work on your site.
2. Paste the Code: Open your newly created marker.js file and paste the JavaScript snippet inside. Note: Make sure you only copy the code inside the <script> tags and not the tags themselves. This is how your marker.js should look:
Step 3: Update the MkDocs Configuration
Open
mkdocs.ymlFile: Locate yourmkdocs.ymlfile. This is where you configure various settings for your MkDocs site.Add JavaScript Reference: Add the following lines to your
mkdocs.ymlfile to include the JavaScript file you just created:
extra_javascript:
- javascripts/marker.js
Here's a quick example of how your mkdocs.yml might look with the necessary additions:
site_name: My Awesome Documentation
theme: readthedocs
extra_javascript:
- javascripts/marker.js
Step 4: Check Your Site
Now that you've added the Marker.io widget, it should appear on your MkDocs website. Refresh your page, and you should see it ready to help with issue reporting. If all is set up correctly, you're good to go!
Widget not displaying on your MkDocs website?
Having trouble getting our widget to load up on your webpage? We've put together some helpful tips here: The Marker.io widget is not appearing.
Need Help?
If you have any questions, comments, or corrections, chat with us at the bottom right of our web pages.