Integrations
      Back to home
      1. Support Center
      2. Roadmapping
      3. Integrations

      Embedding Your Roadmaps in Jira & ADO

      Using Jira and/or ADO is a wonderful way to get your audience viewing your Roadmaps.

      You might already be using the Jira and/or ADO integration with your ProductPlan platform, but have you embedded your roadmaps in these applications? Many ProductPlan customers are taking their Jira and/or ADO instances a step further and integrating their live roadmaps directly into these apps. This can give stakeholders (and other audiences) with access to these apps an easy way to see your latest roadmap.

      To embed your roadmap in Jira:

      1. Begin in Jira and select Apps from the menu and then Explore more apps.

         

      2. In the Search bar (you’ll see Search for apps), enter iFrame. From here, you’ll see four options. We recommend adding the following app: Iframe for Jira Cloud (*You might need to ask a Jira Admin for approval when downloading apps).

      3. Once the app is approved and added to your Jira instance, you’ll be able to create and customize where the roadmap fits on your Dashboard.

      4. To create a new roadmap page, select Dashboard from the menu. You may select an existing Dashboard, or if you'd like to create a new Dashboard, you can add a Name, Description, Viewers and Editors to this page.

      5. Enter into the desired Dashboard, click Edit and Add a Gadget.

         

        From here, do a search for Iframe and select Add.

         

         

      6. We’ll jump over to ProductPlan quickly to get the roadmap URL. Use the Share button on your ProductPlan roadmap to generate and copy a Private Link.

      7. Back in the Gadget, you’ll give the roadmap a Title, enter the Private Link URL, Height (you can play around with this), and the option to have a Scroll Bar.

      8. Click Enter and your roadmap is embedded in Jira!

       

      To embed your roadmap in Azure DevOps:

      1. Begin in ADO and select one of your Projects.

      2. From within your selected Project, hover over the Overview menu and then select Dashboards. You can create a new Dashboard or select one that already exists.

      3. Once in the Dashboard, select Edit near the top of the screen.

        There will then be an option to Add a widget, and then search iFrame.

         

      4. The option that appears is called Embedded Webpage. You’ll select Embedded Webpage and click Add.

      5. Once the widget is showing up, you will click the gear icon to add details.

         

      6. You’ll want to configure the size (height and width). You may play around with this a bit to get the sizing that fits your preference.

      7. We’ll jump over to ProductPlan quickly to get the roadmap URL. Use the Share button on your ProductPlan roadmap to generate and copy a Private Link.

      8. Back in ADO, you’ll enter the ProductPlan URL, click Save and Done Editing.

      *Note: When viewing embedded roadmaps in ADO, you will need to:

      1. Use separate browsers or browser profiles for ADO and ProductPlan (https://support.google.com/chrome/answer/2364824?hl=en&co=GENIE.Platform%3DDesktop).

        OR

      2. Log out of ProductPlan to review the ADO embedded roadmap within the same browser.

      That’s all there is to it! Anyone with access to your Jira and/or ADO page will be able to view and interact with your live ProductPlan Roadmap without needing to sign in.