Skip to contentSkip to navigationSkip to topbar
Rate this page:
On this page

WebChat 2.0 Actions


(information)

Info

This guide is for Flex UI 1.x.x and channels that use Programmable Chat and Proxy. If you are using Flex UI 2.x.x or you are starting out, we recommend that you build with Webchat 3.0.


What is the Actions Framework?

what-is-the-actions-framework page anchor

The Actions Framework allows you to implement programmatic changes in Flex WebChat UI that are triggered upon certain events. You can register events before or after an action fires, or replace the behavior of an action.


What can you do with the Actions Framework?

what-can-you-do-with-the-actions-framework page anchor
  • Replace native actions
  • Invoke actions from your custom components
  • Tap into before and after action events
  • Register your custom actions and use them in your custom components

Find out more about actions framework in Flex UI - Actions Framework


General

  • StartEngagement - payload: {formData?: any} - post form data to the startEngagement url to proceed to the in-engagement state.
  • RestartEngagement - remove the user from the chat channel and return them to a pre-engagement stage.
  • ToggleChatVisibility - toggle chat widget visibility between minimized and expanded view.
  • MinimizeChat - minimize chat widget

Chat:

These Actions need either channel or channelSid parameter.

  • SendMessage - payload: {channel?: ChannelState, channelSid?: string, body: string, messageAttributes?: any} - sends message with body to channel defined by ChannelState.
  • SetInputText - payload: {channel?: ChannelState, channelSid?: string, body: string} - sets message edit field to body in chat UI for channel ChannelState.
  • SendTyping - payload: {channel?: ChannelState, channelSid?: string} - sends typing indicator execution to other party in the channel.

Example of using an "after" Action event

example-of-using-an-after-action-event page anchor

Posting a message on behalf of the user into the chat, after the conversation was initiated, by tapping into StartEngagement post action event


_10
FlexWebChat.Actions.on("afterStartEngagement", (payload) => {
_10
const { channelSid } = manager.store.getState().flex.session;
_10
manager.chatClient.getChannelBySid(channelSid)
_10
.then(channel => {
_10
channel.sendMessage("My awesome message");
_10
})
_10
})


Rate this page: