Skip to main content
MkDocs Integration

Add Marker.io for Easy Bug Reporting on MkDocs

Joe Scanlon avatar
Written by Joe Scanlon
Updated over a week ago

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

  1. Create a Subfolder: Inside your docs folder, create a new subfolder named javascripts. This will hold your JavaScript files.

    docs/
    javascripts/
  2. Create a JavaScript File: Within the javascripts folder, create a new JavaScript file named marker.js.

    docs/
    javascripts/
    marker.js

Step 2: Add the Marker.io Code

  1. 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

  1. Open mkdocs.yml File: Locate your mkdocs.yml file. This is where you configure various settings for your MkDocs site.

  2. Add JavaScript Reference: Add the following lines to your mkdocs.yml file 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.

Did this answer your question?