Embed Wave in Any Web Page or Web-Based App using Lightning out

 Embed Wave in Any Web Page or Web-Based App using Lightning out

 

As per the salesforce document Embed Dashboards Everywhere,To embed Analytics in any web page or web-based app,

 

First, We need to add an Analytics dashboard component to your site, using Visualforce embedding, Lightning App Builder, or Lightning Out. This code sample shows how to add an Analytics dashboard component via Lightning Out.

$Lightning.use("wave:waveApp", function() {
$Lightning.createComponent("wave:waveDashboard", {
dashboardId: "0FKxx00000006bOGAQ"
}, "app");
}, url, accessToken)

Second, set up a whitelist using the Content Security Policy (CSP). See Set Up a Whitelist of Trusted Sites for Embedded Analytics Dashboards.

The whitelist for embedded Analytics includes the following by default:

*.salesforce.com:*
*.force.com:*
Your org’s custom domain.

However while implementing the above code, We might face some errors regarding CORS or Lightning errors even if we whitelist all the related domains.

In that case, Please check if you have also followed the other missing part that is not mentioned in the document.

1. Make sure that the page has the tag . This includes e Lightning Components for Visualforce JavaScript library, lightning.out.js, from the correct Salesforce domain

2. The 'url' param mentioned here is the lighting domain url. If you pass any other url, You probably face CORS error. URL format is https://***.lightning.force.com/

3. *app* is the id of DOM element in the VF page. Thus you need to create an HTML element with id "app". Example)

 

Cheers !!!