Custom Lightning Type APIs for Enhanced Chat v2

Define these JavaScript APIs for your Custom Lightning Type to send a message or pass context events to the agent in Enhanced Chat v2.

These APIs are only compatible with Enhanced Chat v2 deployments. See Compare Enhanced Chat v1 to Enhanced Chat v2.

Ensure that you’re familiar with building Lightning Web Components (LWC) and deploying them to your org before you begin. See Core Concepts of Custom Lightning Types and Get Started With Lightning Web Components for Enhanced Web Chat.

Review Context Events in Enhanced Web Chat v2 for context events schema and reference.

To use the sendTextMessage and setSessionContext APIs, your LWC must receive the configuration object that the Enhanced Chat v2 runtime injects. Declare a public property named configuration in your LWC JavaScript file so the platform can pass it in.

Use optional chaining (for example, this.configuration?.util) when calling the APIs so the component behaves safely if configuration isn’t present.

Use configuration.util.sendTextMessage to send a text message. You can optionally pass an array of context events as a second argument so that the agent receives context with that message.

You can pass context to the agent in two ways: with a message (second parameter of sendTextMessage) or by setting session context without sending a message (setSessionContext).

Use setSessionContext when you want to update the context the agent has for the conversation (for example, when the user navigates or changes filters) without sending a new message.

Use dispatchEventToHostPage to emit a custom browser event from your Custom Lightning Type (CLT) to the host website page. This pattern is useful when the CLT needs the host page to perform an action outside the chat window.

For example, a product details carousel CLT includes an Add to Cart button. When the user clicks the button, the CLT dispatches an onAddToCartClick event with product details, and the host site listens for that event and adds the item to cart.

This CLT JavaScript code dispatches the event to the host page.

This JavaScript code on the host page listens for the event.

For information on host-page event listeners, see Event Listeners.

If there's an error setting the context or sending a message, you can use the catch() event handler to try again or show an error message.