Progress Tracker Plugin

Installation Steps

Step 1: Code injection footer

Place the following code in the Code Injection section.

Pages > Custom Code > Code Injection > Footer

How to Add a Progress Tracker

  1. Step 2: Click the Add Row button to create as many rows as needed.

  2. Enter the text in the first box and a numerical value in the second number box for each row.

  3. When finished click the Generate HTML button. This generates and copies the HTML code.

  4. Open the page where you want the ‘progress tracker’ to appear.

  5. Create a code block on the page and paste in the code.

  6. Step 3: Customise the ‘progress tracker’ (font, colour, size, etc.).

  7. Copy and paste the CSS Code in the Advanced section of the page settings, then click Save.

Step 2: Determine how the Progress Tracker is to appear

  1. Click the Add Row button to create as many rows as needed.

  2. Next, enter the text in the first text box and the value in the second number box for each row.
    Note for the value it should be whole number only e.g 56, 44 and not percentages %.

  3. When finished, click the Generate HTML button.

  4. Copy the generated HTML code for your Progress Tracker.

  5. Open the page where you want the progress tracker to appear.

  6. Create a code block on the page and paste the code.

Click Add Row to create as many text items as you like. Enter the text and the corresponding percentage.