There are cases where we want to invoke a Lightning Web Component or Aura Component using URL button in Salesforce Lightning Experience. The problem is what is the easy way to do so? You might have tried navigating to Lightning Component from URL button using /lightning/cmp/c__componentname but it will not work. Let’s explore the approaches to open Lightning Component from URL button in Salesforce Lightning Experience.
Approach 1 – Using Base64 Encoded Component Definition
You can generate a URL where you do Base64 encoding of component definition to open lightning component from URL button. The component definition looks like below:-
var compDefinition = {
componentDef: "c:yourComponentName",
attributes: {
//pass any default value here
}
};
Now, open Online JavaScript Editor in your browser tab. Its time to generate URL using Base64 encoding. Use below code in your editor to do so.
Here, salesforceAwardsInvitation1 is the lightning web component name where we will navigate on URL button click. Replace it with your lightning component name.
var compDefinition = {
//replace the salesforceAwardsInvitation1 with your component name
componentDef: "c:salesforceAwardsInvitation1",
attributes: {
}
};
// Base64 encode the compDefinition JS object
var encodedCompDef = btoa(JSON.stringify(compDefinition));
console.log("/one/one.app#" + encodedCompDef);

You will notice that a URL has been printed out in console tab of the editor. Copy it and use it in the URL button. In our case, We have created the URL button on Account object and added it on the page layout under Salesforce Mobile and Lightning Experience Action.


The URL button appears on the lightning record page. Users can click on it to directly navigate to Lightning Component. See the demo below.
Approach 2 – Using Lightning App Page
This approach is pretty simple. Create a Lightning App page and add your component on the page. Save the lightning page and activate it.
All you need is to navigate to Lightning App page using the page URL.


The URL button configuration should be look like below. The URL will be:- /lightning/n/My_App_Page

Make sure your Lightning Web Component or Aura Component is available to be used with Lightning App Page.
Brilliant, Sanket! Thank you.
can we pass parameter through this URL?
Apparently no in the approach 1 : my component implements force:hasRecordId but this attribute is not retrieved when the component is launched that way. Then, I have tried to add something like that but it does not work either
[…]
attributes: {
“recordId” : “{!Case.Id}”
}
[…]
yes you can pass params through the link using ?c__anyName= your params for example c__rid={‘+Case.Id}
Yes we can by using ?c__anyname= your param like for example ?c__rid=’+Case.Id
Is there any way to pass values from the object record to the LWC using Approach #1?
Please update this statement because it is incorrect “navigating to Lightning Component from URL button using /lightning/cmp/c__componentname but it will not work”.
It perfectly worked for me, by using /lightning/cmp/c__componentname in URL of list button.
My component not refresh after click back button from browser and again click on url button from component. Is there any way to do it.