Skip to contentSkip to navigationSkip to topbar
On this page

Customize the Email in Flex UI


(warning)

Not a HIPAA Eligible Service

Email in Twilio Flex is not a HIPAA Eligible Service and should not be used in workflows that are subject to HIPAA.

Email in Flex uses the same programmable model as other parts of the Flex UI. This means that you can add, replace, and remove email editor components or invoke various actions related to email in Flex UI. This section describes the dedicated components and actions in Email in Flex, as well as some ideas for how to use them.


Email UI components

email-ui-components page anchor

Flex UI has two main components for email: the email editor and the email messages themselves.

EmailMessageItem

emailmessageitem page anchor
EmailMessageItem component.

EmailMessageItem contains an accordion that displays the email message. You can replace it with a custom component or add components before or after it.

1
const CustomMessage = (props: EmailMessageItemChildrenProps) => {
2
return <div>custom message</div>;
3
};
4
5
Flex.EmailMessageItem.Content.replace(<CustomMessage key="custom" />);
6
7

The replaced or added components receive the following props:

1
export interface EmailMessageItemChildrenProps {
2
message: MessageState;
3
defaultOpen?: boolean;
4
avatarUrl: string;
5
conversationSid: string;
6
}
EmailMessageEditor component.

The EmailEditor contains an accordion. You can replace the accordion with custom components, or add components before or after it.

1
const CustomEditor = (props: EmailEditorChildrenProps) => {
2
return <textarea>custom content</textarea>;
3
};
4
5
Flex.EmailEditor.Content.replace(<CustomMessage key="custom" />);

The replaced or added components receive the following props:

1
export interface EmailEditorChildrenProps {
2
disabledReason: string;
3
charLimit: number;
4
conversationSid: string;
5
conversation: ConversationState;
6
messageState: MessageState;
7
connectionState: string;
8
}

Email in Flex uses the Actions Framework to allow you to modify UI interactions. The following actions are standard for sending messages in Flex:

  • SetInputText

    • This action supports HTML in input text.
  • SendMessage

The actions for Email in Flex are:

Attaches files to the message the agent is drafting.

1
Flex.Actions.invokeAction("AttachFiles", {
2
files: [file1, file2],
3
conversationSid: "CHxxxxxxxxx",
4
conversationType: "email"
5
});
PropertyDescription
filesRequired. An array of files to be attached.
conversationSIDRequired. The SID for the Conversation to which the media files should be attached.
conversationTypeRequired Type: Email. Enforces validation against Conversations limits (max amount of attached files, max size).

Downloads media files attached to a message.

1
Flex.Actions.invokeAction("DownloadMedia", {
2
media: media,
3
conversationSid: "CHxxxxxxxxx",
4
conversationType: "email"
5
});
PropertyDescription
mediaRequired. The Conversations media object to be downloaded.
conversationSIDRequired. The SID for the Conversation from which the media will be downloaded..
conversationTypeRequired Type: Email. Enforces validation against Conversations limits (e.g., max size).

Starts a new task for the worker. The only required argument is destination.

1
Flex.Actions.invokeAction("StartOutboundEmailTask", {
2
destination: "customer@address.com",
3
queueSid: "WQxxxx",
4
from: "contactCenter@address.com",
5
fromName: "My contact center name",
6
taskAttributes: {}
7
});

Arguments

PropertyDescription
destinationRequired. The address to which the email should be sent.
queueSidOptional. The queue that the new email task should be added to. Falls back to default email outbound queue.
fromOptional. The from email address. Falls back to default email address.
fromNameOptional. The name associated with the From email address. Falls back to the default email name.
taskAttributesOptional. TaskAttributes for the created Task. Defaults to an empty object.

Flex UI 2.x.x uses a similar programmable interface for adding, removing, and updating components and for invoking actions. See the Flex Developer documentation to learn more about working with components and actions.

Set a dynamic email signature

set-a-dynamic-email-signature page anchor

Use the SetInputText action to dynamically update the content of the editor. In the following example, the email signature is set using the worker's attributes before they've even written their email.

1
const { full_name, email } = Twilio.Flex.Manager.getInstance().workerClient.attributes;
2
3
Twilio.Flex.Actions.invokeAction("SetInputText", {
4
body: <div><p>Your message here</p><p style='margin-top:20px; border-top: 2px dashed; color: tomato; padding-top:20px'>${full_name} - ${email}</p><p style='color:#333333;'>Engineer</p></div>,
5
conversationSid: "CH049a1c27f2f14bc5b8eba3244a846a05"
6
});

Editor output:

Email signature template.

Insert a default response

insert-a-default-response page anchor

You can go further and include a default response in the text editor so that agents have a strong template to work from. In this example, the SetInputText action is used alongside the Flex TaskHelper method to populate the response with the customer's name.

1
const conversationSid = "CH..."
2
const task = Twilio.Flex.TaskHelper.getTaskFromConversationSid(conversationSid);
3
4
Twilio.Flex.Actions.invokeAction("SetInputText", {
5
body: <div><p>Hi ${task.attributes.customerName}, thanks for your email. </p><p>Regards, Owl Customer Centre</p></div>,
6
conversationSid,
7
})

Editor output:

Default response template.

Automatically add a disclaimer

automatically-add-a-disclaimer page anchor

You can automatically inject text after (or before) the agent message by adding the beforeSendMessage listener to Flex Actions. In this example, the code appends a confidentiality disclaimer before sending the email. The agent won't see this change in their HTML editor, but they will see it in the sent message.

1
Twilio.Flex.Actions.addListener("beforeSendMessage", (payload) => {
2
payload.htmlBody += <p style="font-size:10px; color:#666; margin-top:20px;">CONFIDENTIAL: This email and any files transmitted [....]</p>;
3
});

Message in agent's editor:

Disclaimer message.

Output message:

Optput message.

Replace placeholder text

replace-placeholder-text page anchor

You can create message templates by adding the beforeSendMessage listener to Flex Actions. In this example, Flex replaces the $CUSTOMER_NAME variable with the actual name of the customer. The agent won't see this change in their HTML editor, but they will see it in the sent message.

1
Twilio.Flex.Actions.addListener("beforeSendMessage", (payload) => {
2
const task = Twilio.Flex.TaskHelper.getTaskFromConversationSid(payload.conversationSid);
3
payload.htmlBody = payload.htmlBody.replace(/\$CUSTOMER_NAME\$/g, task.attributes.customerName);
4
})

Message in agent's editor:

Placeholder text editor.

Output message:

Placeholder output text.

< Email index page

Need some help?

Terms of service

Copyright © 2024 Twilio Inc.