How to Embed a Popdock Widget on a Custom Tab in Salesforce

With the use of a Popdock widget you can integrate a Popdock list or multiple lists directly into your Salesforce user interface either as a tab at the top or as a button that opens up a new window. The following shows how to create a Visualforce page widget in Popdock and create a new custom tab on a Salesforce homepage which uses the embedded Popdock widget.

Important Tip

A Popdock widget will need to be created prior to following these steps. Click here to learn how to create a Popdock widget.


This article will focus on using the Embed codes – Code generator to create your Visualforce page in Salesforce. You can also create and publish your Visualforce page by using the Environment section under Parameters. Visit Embedding a Popdock Widget on a Salesforce Page to learn how to create you Visualforce page using the Environment section of Parameters for your widget.

Locating Your Visualforce Page Code

1. From the Edit widget page of the widget you would like to display inside Salesforce, click Embed codes under the left Settings menu.

2. Click the Show button next to Code generator.

3. Select Visualforce page from the Type drop down menu. The Code field will populate with the code for your Visualforce page. Copy the code and paste to your clipboard, as you need this code sample in a later step.

Adding a Popdock tab:


1.  Click the Setup Icon (Gear) at the top right next to your profile icon, then select Setup.

2.  In the left navigation, click on Custom Code so you can choose the Visualforce Pages option.

3.  Click on New, to create a new Visualforce Page.


4.  Give your new Visualforce Page a Label. Then give it a Name, this field cannot contain spaces.  If you want you can also add a Description.  In the tab labeled Visualforce Markup, this contains the code that makes up the Visualforce Page.  You will need to delete the default code and paste the code created by the Code generator in Popdock for a Visualforce page (see Step 3 under the Locating Your Visualforce Page Code).

5.  Click the Save button and you should see you new Visualforce Page listed.

6.  Next using the left navigation, click on User Interface.  Then click on Tabs.

7.  Here you will want to create a new Visualforce Tab so under the Visualforce Tabs, click on the New button.


8.  Choose your Visualforce Page from the drop down menu, then give your tab a Label, Name, and choose a Tab Style.  The rest of the fields are optional.  Once you have completed the fields, click the Next button.


9.  The next page in the tab setup is if you want to add to only specific profiles.  In this case I have left the default settings and clicked the Next button.


10.  In this step you can choose the custom apps that you want the new tab to be available on.  I have again left the default and clicked the Save button.

11. Now you will see the new tab added to your Visualforce Tabs and you can go to your Salesforce main page to see the new tab has been added. Your Popdock widget will be available within the page of your new tab.

Questions on embedding a Popdock Widget in Salesforce? Contact

Feeling stuck? Get the support and guidance you need to help you power through any data challenge

We're on your integration team. Connect with our people and let us know how we can help you.