Skip to main content

​
Embedding static dashboards

In this example, you’ll embed a static dashboard into a new Visualforce page. Unlike dynamic (parameterized) dashboards, the content of static dashboards doesn’t change.
1

Create a new VisualForce page

  1. In your Salesforce instance, navigate to the Developer Console:
  2. Create a new Visualforce page:
Leave the page open for now - you’ll need it later in the guide.
2

Retrieve the dashboard's embed URL

  1. In a published Omni dashboard, click Share to open the share modal:
  2. Copy the iframe embed code.
3

Add the iframe to the Visualforce page

In Salesforce, add your iframe code to the Visualforce page you created.In this example, we added styling elements that will allow the dashboard to fill the whole page:
Visualforce page with added styling elements
<apex:page sidebar="false">
  <style>
    html { 
      width: 100%; 
      height: 100%;
    }
  </style>   
  
  <apex:iframe scrolling="true" width="100%" height="100%" src="https://omni.demo.embed-exploreomni.dev/embed/dashboards/1ilyzzIc">
  </apex:iframe>
</apex:page>

​
Embedding dynamic dashboards

To make your dashboards dynamic, you can parameterize the filters in the iframe URL with Apex variables. In this example, you’ll embed a dashboard that dynamically filters data based on the Salesforce account that is currently being viewed and add it to an existing Salesforce object.
1

Prepare your dashboard for embedding

  1. In your Omni dashboard, add a filter on the field you want to parameterize (for example, Account ID). This filter should not be one of your default filters.
  2. Click Share to open the share modal.
  3. Check the Include current filters option.
  4. Copy the <iframe> embed code.
  5. In a text editor, locate the filter value in the URL and replace it with the Apex variable you want Salesforce to pass through. For example, replace the hard-coded Account ID with {!Account.Id}: 
    <apex:page standardController="Account">
  <apex:iframe
    scrolling="true"
    src="https://omni.embed-omniapp.co/embed/dashboards/-MXlZXnX?f--salesforce__account.id=%28%27kind%21%27EQUALS%27%7Etype%21%27string%27%7Evalues%21%5B%27{!Account.Id}%27%5D%7Eis_negative%21false%29O_O">
  </apex:iframe>
</apex:page>
Keep the code handy - you’ll need it to complete the next step.
2

Create a new VisualForce page

  1. In your Salesforce instance, navigate to the Developer Console:
  2. Create a new Visualforce page:
  3. Paste the iframe code you created in the previous step and save the page.
3

Optional: Create a Visualforce tab

If you want the dashboard to appear as its own tab in Salesforce:
  1. In Salesforce, navigate to Setup > Tabs:
  2. Create a new Visualforce Tab, selecting the Visualforce page you created in the previous step.
The tab will now be available to users and will open an interactive, embedded dashboard.
4

Add the embedded dashboard to an existing Salesforce object

  1. In Salesforce, navigate to Setup > Object Manager:
  2. Select the object where you want the dashboard to appear (for example, Account).
  3. Open the Page Layouts section and choose the layout you want to edit.
  4. Add a new section to the layout to hold the embedded dashboard:
  5. Drag the Visualforce Page component into the new section:
    Click the wrench icon to adjust the size of the iframe.
5

Confirm the embedded dashboard works

Your dashboard should now load dynamically, using the Salesforce record’s ID to parameterize the embedded Omni dashboard. 🎉Visit a record (e.g., an Account page) and verify that the correct data displays.