i am using Einstein analytic dashboard id statically to show particular dashboard how to use it dynamically to show dashboard whichever i need?

Question

My task is to show my Einstein analytic dashboard in external website , so i used lightning out application but now i'm only showing statically and i need to make it as dynamically using dashboard id please help how to make dynamically and my code is this

app:

<aura:application access="global"  extends="ltng:outApp" implements="ltng:allowGuestAccess" >  
    <aura:dependency resource="c:showDashBoard" type="COMPONENT"/>
</aura:application>

component:

<aura:component access="global" implements="flexipage:availableForAllPageTypes">
    <aura:attribute name="DashboardId" type="String" default="0FKDn000000XGqdOAG"/>
    <aura:attribute name="BuName" type="String" default=""/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>{!v.body}
</aura:component>

Js:

({doInit : function(component, event, helper)
  {var deshBoardId = component.get('v.DashboardId'); 
   var XFilt= component.get('v.BuName'); 
   $A.createComponent("wave:waveDashboard",{"dashboardId": deshBoardId,"height": "650","filter":XFilt},function(newcomponent)
                      {if (component.isValid()) {component.set("v.body", newcomponent);}});}})

Vf page:

<apex:page >
  <apex:includeLightning />

    <div id="lightning" />

    <script>
       $Lightning.use("c:dashBoard", function() {
         $Lightning.createComponent("c:showDashBoard",
                                    {"DashboardId" :"0FKDn000000XGqdOAG" },"lightning",
            
             function(cmp) {
          console.log("c:VFPageApp loaded successfully in VF page");
             }
         );
     });
    </script>
</apex:page>