Step 5: Add Native Demandbase Charts to Salesforce (Visualforce)

  • Updated

Context

Our "Native Charts" feature brings Demandbase insights directly to your Salesforce Account. You can add Account Highlights, Engagement Timeline, Activities, Heatmap, Communication History and Intent Trends to the account view for your Sales and Marketing teams.

Prerequisites

Install our Latest AppExchange Package: Salesforce AppExchange: Demandbase (ABX Cloud) Package.

Good to Know

Even if you already had the Demandbase package installed, you'll need the latest version to access all of the components. When you log in to Salesforce and check out the AppExchange listing, it will tell you what version you have and what the latest version is.

Follow the Salesforce Lightning or Salesforce Classic Instructions below.

Steps: Salesforce Lightning

1. Go to an account page you want to add charts. Click the Gear icon at the top right of the window and select Edit Page from the drop-down.

2. Scroll down on the left navigation to the Custom - Managed section and you will see the available Demandbase Lightning components.

3. All charts are consolidated into a single tabbed component now. Drag the Demandbase Tabs component onto the layout where you want it located and save the page.

4. Optionally add this same component to the Opportunity page layouts.

Outcome: Salesforce Lightning

Once complete, you can view the following in your Salesforce Lightning instance:

New_2_screenshots.png

Tip: If you see charts overlapping, ensure the charts are configured as 'single-columned'

Steps: Salesforce Classic

1. Go to an account page that you would want to add the chart layouts to and click the Edit Layout text link at the top of the page.

2. All charts are consolidated into a single tabbed page. Go to VisualForce Pages to see all the available Demandbase Visualforce pages.

3. Drag the Demandbase Tabs VisualForce component onto the page layout as desired.
Optional: Create a Section for the VisualForce component, that way a user can collapse and as needed.

Tip: You may want to make this new section one column, rather than the default two-column arrangement.

4. Adjust the sizing of the chart for optimal visibility:
     a. Select Setup > Account Page Layout > Edit > Visualforce Pages.

     b. Click the wrench at the top right of the Visualforce module.

     c. Change the height to 500 pixels.

     d. Click Save.

5. (Optional) Add the same component to the Opportunity page layouts by following steps 2 - 4.

Outcome: Salesforce Classic

Once complete and you're logged in, you can view the following in your Salesforce Classic instance:

New_2_screenshots.png

Troubleshooting

If you or one of your users sees a blank frame where the Demandbase Charts should show, they may need to review their browser settings. Cross-site cookies are required to display the information. In Chrome, for example, one should go to Settings --> Privacy and security --> Cookies and other site data, then select "Allow all cookies". In Firefox, the user may have "Enhanced Tracking Protection" set to Strict, and this should be set to Standard to allow the tab to load.

Next Steps

(Optional) Add Demandbase as a Tab in Salesforce

Was this article helpful?

6 out of 6 found this helpful