How to Implement a Roadmap and Feedback System for MyListing Websites

Get the knowledge your online business needs to succeed.

Overview

Our How to Implement a Roadmap and Feedback System for MyListing Websites guide will show you how to easily implement this solution to increase community engagement.

WP Roadmap is a plugin that makes adding roadmap and feedback functionality to your WordPress website easy.

WP Roadmap Implementation
Our End Result

WP Roadmap

Installation and Settings

  1. Grab your copy of WP Roadmap, install, and activate the plugin.
  2. WP Roadmap > Settings > General Settings > Add a Title, Description, and choose the Active Tab for your Roadmap  & Feedback Board.
  1. WP Roadmap > Settings > Manage Status > Add the desired status columns of your roadmap, such as ‘Planned’, ‘In Progress’, ‘Launched’, etc.
  2. Be sure to give each of your status items a unique color, as this will help users differentiate the various statuses on the front-end.

Status columns can easily be rearranged using a simple drag-n-drop interface, from this particular settings tab.

Board

  1. WP Roadmap > Board > Add desired feedback “cards”, by clicking on the ‘+’ icon or the ‘+ Add New link within the status columns you created.
  2. Give your card a title, description, and save changes. (Note: If you happen to select the wrong status column when clicking the ‘+’ icon or ‘+ Add New’ link, the plugin gives you the option of selecting the correct status column from a drop-down menu.).

Cards can easily be rearranged using a simple drag-n-drop interface, from this particular settings tab.

Front-End Implementation

  1. Create a page (or use an existing one) and edit with Elementor.
  2. Add the WP Roadmap widget to your page.
  3. From the WP Roadmap widget, apply your desired styling.

Out of the box, the styling for WP Roadmap might be enough for many, but we needed to do a bit more.

Further Design

For our own implementation, we added the following CSS in order to better align with our own branding.

Of special note, was our customization of the tabs and the ‘View More’ button.

We added our desired font to the tabs (Road Map, Most Voted, and Newest), which is not currently available within the widget, at the time of this writing.

The ‘View More’ button was pretty lackluster as well, so we touched that up.

.wp-roadmap .box-content ul.tab li.tablinks {
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-family: Montserrat;
}
.wp-roadmap .box-content .tabcontent h4 span, .wp-roadmap .box-content .tab-most-voted h4 span {
    display: none;
}

.wp-roadmap .box-content {
    box-shadow: -5px 5px 20px 0px rgba(0, 0, 0, 0.05);
    border: none;
}

.wp-roadmap .box-content .tab-roadmap ul.iq-timeline li .view-more {
    font-size: 13px;
    color: #000;
    background: #eee;
    margin-right: 80%;
    padding: 5px 0px 5px 12px;
    font-family: 'Montserrat';
    letter-spacing: 1.5px;
    border-radius: 2px
}

Our End Results

Let's empower others. Share the knowledge.

Share on twitter
Twitter
Share on facebook
Facebook
Share on linkedin
LinkedIn
Scroll to Top

Find a bug or typo? Please let us know.