Embedding in Salesforce
- Plan: All
Roles and Permissions
- Admins only
For this to work you will need:
- ProdPad Admin account
- Salesforce Admin account
- An active custom domain in Salesforce
Create a published roadmap or portal
Begin by creating a published roadmap or customer feedback portal. Once you're ready, grab the embed code from the available slide out.
Create a new VisualForce Page
In Salesforce, go to the Setup page. On the QuickFind type "Visualforce" and select Visualforce Page.
Click on "New" on the table.
Give your new page a label, name and description.
Make sure you select the option to make it available in Lightning.
On the Visualforce Markup section, remove the content placeholders
<!-- Begin Default Content REMOVE THIS -->and. Between the
h1tags give your new page a title.
Just below, drop the embed code we've provided you. It should look something like this:
If you're comfortable with HTML, feel free to add any added text or content above or below the embed code. You can preview the page by clicking on the "preview" button below.
Once you've saved, go back to the Visualforce Pages table and under "Security" enable it for everyone that should have access to view the component.
Create a new Lightning App
Back in the Setup search, look for "Lightning App Builder."
You have two options - you can either modify an existing Dashboard or create a new one.
For this example, I have decided to modify the existing Home page, in order to add my roadmap as part of the existing tab.
Edit the template
To make way for the roadmap, begin by changing the template from "Standard Home Page" to "Header and Three Regions" on the right-hand pane.
Then move the Quarterly Performance report to the new middle component section.
Embed Visualforce Component
Now that the template is ready, it's time to embed your component!
Select "Add Component" on the empty space available on your template and select Visualforce component from the available list.
On the right hand menu you should now see the roadmap Visualforce page you created. Feel free to adjust the height to fit the roadmap accordingly (suggested 1000 pixels if embedding a roadmap, 500 if embedding a general portal form, although the component will be scrollable!)
If you refresh your home tab, you should now see your embed code.