Send a text message, like search queries, user actions, or any text, as the end user from a custom component using the Send Message API.
The following example illustrates how you can send a text message when a menu option is clicked from a custom chat header.
import { LightningElement, api, track } from "lwc";
export default class CustomChatHeader extends LightningElement {
...
sendTextMessage() {
this.configuration.util.sendTextMessage("Text");
.then(() => {
// Success handler used to perform actions when the message is sent successfully.
// For example, create a method that logs the message was successfull.
logMessageSuccessfullySent();
}).catch(() => {
// Error handler used to perform actions if the message fails to send.
// For example, log the failure.
logMessageFailed();
}).finally(() => {
// Finally handler used to perform any clean-up actions
// regardless of whether the message was successfully sent or not.
// For example, create a method that logs attempt to send message.
logMessageAttempt();
});
}
}
<template>
...
<!-- Header menu -->
<section class={menuClass}>
<template if:true={showMenuButton}>
<!-- Menu button -->
<button class="headerButton menuButton" onclick={onMenuButtonClick}>
<lightning-icon icon-name="utility:threedots_vertical" variant="inverse" size="x-small"></lightning-icon>
</button>
</template>
<!-- Menu options-->
<section class="optionsMenu slds-dropdown slds-dropdown_left slds-nubbin_top-left">
<ul class="slds-dropdown__list">
...
<!-- Send text message -->
<li class="slds-dropdown__item">
<button class="chatbotMenuOption"
onclick={sendTextMessage}>
<span class="slds-text-color_error">Send text</span>
</button>
</li>
...
</ul>
</section>
</section>
...
</template>
See the Customize Header page to know more about custom chat headers.