Link in LWC Toast message

Hello friends, today we are going to explore how to show Link in LWC Toast message. To display a link in the message, use the messageData attribute to pass in url and label values for the message string. Display toasts to provide feedback to a user following an action, such as after a record is created.

Also, check this: Convert String To Base64 Apex Salesforce

Key Highlights :

1. Improved Usability: Clickable links enable users to take immediate actions, such as navigating to related records or resolving issues.
2. Engagement: Links make the Toast messages more interactive and engaging, increasing the likelihood that users will pay attention to the content.
3. Efficiency: Users can quickly access relevant information without the need to search for related pages or records.
4. Contextual Help: Links can provide additional context or offer resources for users to explore.

Code :

lWCToastWithLink.html :

<template>
    <lightning-card  variant="Narrow"  title="Link in LWC Toast message" icon-name="standard:account">
        <p class="slds-p-horizontal_small">
            <lightning-button variant="brand" label="Show Toast With Link" title="Show Toast With Link" onclick={handleShowToast}></lightning-button>
            <lightning-button variant="brand" label="Show Toast With Record Link" title="Show Toast With Record Link" onclick={handleOpenRecord} class="slds-m-left_x-small"></lightning-button>
        </p>
    </lightning-card>
</template>

lWCToastWithLink.JS: Here we will define message and messagedata according index . Like we will show the link in message with index and index values coming from messagedata index-wise.

message	String	(Required) A string representing the body of the message. It can contain placeholders in the form of {0} ... {N}. The placeholders are replaced with the links on messageData.
messageData	String[] or Object	url and label values that replace the {index} placeholders in the message string.

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { NavigationMixin } from 'lightning/navigation';

export default class LWCToastWithLink extends NavigationMixin(LightningElement) {
    link = '';

    handleShowToast() {
        const event = new ShowToastEvent({
            title: 'Success!',
            message: '{0} link! click this link {1}!',
            messageData: [
                'Techdicer Home Page',
                {
                    url: 'https://techdicer.com/',
                    label: 'Techdicer',
                },
            ],
        });
        this.dispatchEvent(event);
    }

    handleOpenRecord() {
        this[NavigationMixin.GenerateUrl]({
            type: 'standard__recordPage',
            attributes: {
                recordId: '0016F00001vutIwQAI',
                actionName: 'view',
            },
        }).then((url) => {
            const event = new ShowToastEvent({
                title: 'Warning!',
                message: 'Open the {0} record by click the link {1}',
                messageData: [
                    'Account ',
                    {
                        url: url,
                        label: 'here',
                    },
                ],
            });
            this.dispatchEvent(event);
        });
    }
}

lWCToastWithLink.JS-meta.xml:

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>57.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__HomePage</target>
	</targets>
</LightningComponentBundle>

Output :

Reference :

1. Platform Show Toast Event