How to embed your Productboard roadmap and portal into Salesforce

V12 4:24 Ent.svg

 

This article provides you with the steps for embedding your roadmaps and portals into Salesforce Lightning. The finished result will provide you with a drop-down menu from your Salesforce homepage with links to a portal and/or roadmap page.

In this article:

Relevant to Legacy boards only

Requirements

To set this up you need a Salesforce Developer account and the URL of the Productboard roadmap or portal you want to embed.

Embedding the Productboard roadmap and portal into Salesforce

To embed the Productboard roadmap and/or portal into Salesforce, follow these steps: 

  1. Log into your Salesforce Home page, in the top right click the Settings-1.svg icon, and click Setup.
    SF_step_1.png
  2. On the left-hand menu, go to Custom Code and click VisualForce Pages.
    SF_step_2.jpg
  3. In the middle of the page, click the New button.
    SF_Step_3.jpg
  4. Fill in the values Labels, Name, and Description with Portal/Roadmap. 
    Sf_step_4.png
    In the Visualforce Markup, Copy the below code and paste it into the markup. Customizing it with your portal or roadmap URL from Productboard.
    <apex:page standardController="Account" showheader="false" sidebar="false">
    
    <apex:iframe src="https://roadmap.productboard.com/af7f0960-6b31-45d3-b0ab-0bcc49508d15" height="1000px" width="100%" scrolling="true">
    
    </apex:iframe>
    
    </apex:page>

    Make sure to preview this to ensure it works:
    Sf_step_4.1.png

  5. Now we will add the Portal / Roadmap to the Home page in Salesforce.

    Go back to your home page by clicking the App Launcher in the top left and clicking Sales Console.
    Sf_step_5.png

  6. Click the Settings-1.svg icon on the top right and then click Edit page.
    Sf_step_6.png
  7. On the top left click on Pages > New page.
    Sf_step_7.1.png
    Clicking Confirm on the pop-up message
    Sf_step_7.2.png
  8. On the Create a new Lightning Page box, select App page and click Next.
    Sf_step_8.png
  9. Add a Label, for example, "Roadmap" or "Portal" and then click Next.
    Sf_step_9.png
  10. Choose One Region and hit Finish.
    Sf_step_10.png
  11. Click and drag the Visualforce component from the left menu and drop it where it says Add component(s) here
    Sf_step_11.png
  12. On the right-hand side, choose the VisualForce Page name you want to display - Portal or Roadmap and set the height to 1000.
    Sf_step_12.png

  13. Go back to the Salesforce Home page by clicking back in the top left corner.

    The drop-down menu next to Home should now have A Portal and/or Roadmap option.
    Sf_step_13.1.png
    Sf_step_13.2.png
    Sf_step_13.3.png

See also:

Was this article helpful?
4 out of 5 found this helpful

Comments

0 comments

Article is closed for comments.

Articles in this section

Our Support hours:
Monday to Friday from 9:00 am - 2:00 am CET. Monday to Friday from 0:00 am - 5:00 pm PST.
Productboard Academy
Become a Productboard expert with self-paced courses, quick tip videos, webinars and more.
Product Makers Community
Connect with product leaders, share and find product jobs, and learn how to approach similar challenges. Come join our Product Makers community.