Embedding Looks and Dashboards into Salesforce (SFDC)

Many data savvy companies have teams that live in tools like Salesforce. Some of our customers embed Looker in their Salesforce implementation so people can get a quick view of account activity and lead information from their internal database.

Here is an example of how we embed Looker into Salesforce (at Looker):

Embedding Looker into Salesforce requires that each user have Looker access. Data is embedded as a parameterized iFrame, not passed to the Salesforce platform.

Here are some quick instructions to get you started:

Prerequisites:

  • Looker!
  • Salesforce administrator account
  • Mappable relationship (joinable key) between a SFDC record and an in-database record

Step 1:

Create a VisualForce page (Setup - Develop - Pages). Depending on whether you want to insert a dashboard or a single look/query, the code will look slightly different. You should play with the width and height to appropriately fit the element onto the page.

Dashboard Example

From a dashboard or explore URL, you will simply insert a wildcard that takes advantage of a Salesforce variable to filter a query. Our first example inserts a page’s Salesforce Account ID, {!Account.Id}, is inserted into a salesforce_userid filter for a Looker dashboard. Note that you will need to prepend /embed/ to the typical dashboard URL.

<apex:page standardController="Account">
<apex:iframe src="https://example.looker.com/embed/dashboards/123?salesforce_userid={!Account.Id}"
  width="900px" height="600px" id="account_app_usage" scrolling="true"/>    
</apex:page>

Single Query / Look Example

We can use that same technique to insert the Account ID into a single query. In this case, replace /explore/ with /embed/query/ for the typical query URL.

<apex:page standardController="Account"> 
<apex:iframe src="https://example.looker.com/embed/query/pinger/daily_usage?fields=daily_usage.usage_week,daily_usage.approximate_usage_in_minutes_non_looker&f%5Blicense_users.user_id%5D=NOT+NULL&f%5Blicense_users.user_is_looker%5D=No&sorts=daily_usage.usage_week&limit=500&column_limit=50&vis=%7B%22type%22:%22looker_column%22,%22show_null_labels%22:false,%22stacking%22:%22normal%22,%22x_axis_scale%22:%22auto%22,%22y_axis_labels%22:%5B%22Approximate+Use+in+Minutes%22%5D%7D&filter_config=%7B%22license_users.user_id%22:%5B%7B%22type%22:%22!null%22,%22values%22:%5B%7B%7D,%7B%7D%5D,%22id%22:0%7D%5D,%22license_users.user_is_looker%22:%5B%7B%22type%22:%22is%22,%22values%22:%5B%7B%22constant%22:%22No%22%7D,%7B%7D%5D,%22id%22:0%7D%5D,%22client.salesforce_account_id%22:%5B%7B%22type%22:%22%3D%22,%22values%22:%5B%7B%22constant%22:%22{!Account.Id}%22%7D,%7B%7D%5D,%22id%22:0%7D%5D%7D&show=vis,fields&title=Client+Looker+Use&f%5Bclient.salesforce_account_id%5D=%22{!Account.Id}%22&run=1" width="100%" scrolling="true" id="account_app_usage"/>
</apex:page>

Step 2:

After creating your data frame, add the corresponding VisualForce component to the appropriate page layout (e.g. Setup - Account - Page layouts).

Step 3:

Save and test your changes.

Edit: Thanks to @mschiff and the team at Heroku/Salesforce for doing this and showing me how to do it at Looker!

9 Likes

For those that haven’t created a Visualforce page before, there are a few details to remember:

  • Security: you have to make the VisualForce page available to the
    profiles that will view them. You do that by going to Develop ->
    Pages -> [Click Security on the Page you want to edit]. You will
    then see Available Profiles on the left and Enabled Profiles on the
    Right. Simply move over the Profiles that should have access and
    Save.

  • Adding the Page to the Layout: You need to do that manually for each
    page layout that will use the page. You do that by going to Customize > [Object] -> Page Layouts -> [Edit a page Layout]. At the top of the layout edit you will see where you can add different “Fields”. Choose VisualForce Pages and the page you created should show up there.

  • Performance: Make sure the look you are embedding is snappy. Otherwise it may cause the entire page to load/refresh slowly. Sometimes it does, sometimes not…doesn’t seem to be a reliable way of figuring that part out.

9 Likes

In our case we embedded Looker with a powerful tool called Skuidify that allows you to change the Salesforce interface and turn it into a meaningful set of fields for your SFDC users.
For example, our clients purchase jobs postings.
Thanks to this, our Customer success team can now see where the candidates who applied for this job, for that specific period, came from. Which allows us to check into those sources if everything is okay.

Awesome feature!

6 Likes

Can you please help me understand how are you handling authentication. Because without authentication dashboard or looks will not be available.

Hi there @rinkudaxini - there are actually three methods of embedding dashboards, each with a different method of authentication. You can read more about them here.

In this example, we’re using option 1, private embedded dashboards. This means that when a user goes to Salesforce and sees the Looker iframe, they will only see results there if they are logged into Looker. Otherwise, they will see the Looker login page.

Hey there is an additional quotation mark that needs to be deleted
<apex:iframe src="https://example.looker.com/embed/dashboards/123?salesforce_userid="{!Account.Id}"

Just after the ‘salesforce_userid=’

But got it working after this - thanks!

Can I integrate looker as a separate tab in salesforce?

Hey @sebastian, yeah this should be doable, the crux of it is getting an iframe. Anywhere you can put an iframe, you can hook it up to a Look or Dashboard. Most of the Looker-side docs are linked above, so I’ll include this link, which is a Salesforce-side doc about creating custom tabs.

The integration is crushingly slow. Any advice on getting the iframes to load faster?

We’ve got about a 10-second wait time for the iframe to connect with looker and another 10 for looker to load the graph.

I got this resolved, I moved it from separate looks into one shared dashboard embed. Thanks!

Glad to hear you got it going! That makes sense, If they’re all in the dashboard, they can all share a cache, as opposed to having some of them cached and some not. Let us know if anything else pops up, we’ll be happy to troubleshoot :slight_smile:

Is anyone using Drill Overlays in the SFDC VF page? I’ve added the “see_drill_overlay” permission to the embedded URL, yet it’s still not possible to click on the measure value and drill down to the details.

Hey @Brian_Donaldson,

Is this an SSO embed use case, or is it just a private embed using the /embed url? If the latter, then just adding see_drill_overlay to the URL won’t automatically grant that permission-- You’ll have to grant it to the user in the Admin > Users panel.

If this is a script-generated embed URL, could you provide an example of the URL generated and your script? Happy to help decode it and figure out how to get that working-- You can visit help.looker.com and we can go back and forth on it which might be more efficient than the comments section here!

Best,
Izzy