Auto-Generated Documentation for the Flex UI is now available. The auto-generated documentation is accurate and comprehensive, and may differ from what you see in the official Flex UI documentation. Includes a complete listing of customizable Strings.
You can override any string by editing the strings
object on the Flex Manager instance:
flex.Manager.getInstance().strings.TaskLineCallAssigned = "I am a content string!";
Language strings can technically contain any HTML tag like h1
, h2
, p
or even iframe
. The Flex UI will not filter these values.
Flex uses Handlebars for templating and supports Mustache-style syntax and expressions within content strings, ie. embedding value placeholders between double braces. Here's an example:
1manager.strings.TaskInfoPanelContent = `2<h1>TASK CONTEXT</h1>3<h2>Task type</h2>4<p>1{{task.attributes.title}}</p>5<p>2{{task.title}}</p>6<h2>Task created on</h2>7<p>{{task.dateCreated}}</p>8<h2>Task priority</h2>9<p>{{task.priority}}</p>10<h2>Task queue</h2>11<p>{{task.taskQueueName}}</p>12<hr />13<h1>CUSTOMER CONTEXT</h1>14<h2>Customer name / phone number</h2>15<p>{{task.attributes.name}}</p>16`;17
Within the context of each component and string, additional dynamic content is available: for example, by accessing Task properties or attributes.
The following strings support Task context.
TaskInfoPanelContent
TaskHeaderLine
TaskHeaderComplete
TaskHeaderWrapup
TaskExtraInfo
TaskLineCallReserved
TaskLineCallAssigned
TaskLineCallWrapup
TaskLineChatReserved
TaskLineChatAssigned
TaskLineWebChatAssigned
TaskLineSmsReserved
TaskLineSmsAssigned
LiveCommsMonitoringMessage
LiveCommsOngoingCallMessage
LiveCommsIncomingCallMessage
SupervisorTaskCardHeader
SupervisorTaskHeaderLine
SupervisorTaskViewContentHeader
SupervisorTaskInfoPanelContent
Depending on the channel type, TaskRouter Tasks may contain any of the following properties and attributes. Each is listed with an example.
Voice-related Task attributes
account_sid
: "ACxxxx"
api_version
: "2010-04-01"
call_sid
: "CAxxxx"
called
: "+181xxxx"
called_city
: "CITY"
called_country
: "COUNTRY"
called_state
: "STATE"
called_zip
: "60xxxx"
caller
: "+372xxxx"
caller_city
: "CITY"
caller_country
: "COUNTRY"
caller_state
: "STATE"
caller_zip
: "ZIP"
conference
: {sid: "CFxxxx", participants: {customer: "CAxxxx", worker: "CAxxxx"}}
direction
: "inbound"
from
: "+372xxxx"
from_city
: "CITY"
from_country
: "COUNTRY"
from_state
: "STATE"
from_zip
: "ZIP"
name
: "+372xxxx"
to
: "+181xxxx"
to_city
: "CITY"
to_country
: "COUNTRY"
to_state
: "STATE"
to_zip
: "60xxxx"
type
: "inbound"
Chat-related Task attributes
channelSid
: "CHxxxx"
channelType
: "sms"
name
: "+372xxxx"
Task Properties
age
: 3248
channelType
: "voice"
dateCreated
: "Mon Jun 10 2018 16:41:12 GMT+0100 (British Summer Time)"
dateUpdated: "Mon Jun 10 2018 16:43:12 GMT+0100 (British Summer Time)"
defaultFrom
: "Anonymous"
priority
: 0
queueName
: "Sample Queue"
queueSid
: "WQxxxx"
reason
: null
sid
: "WRxxxx"
source
: (Object)
sourceObject
: (Object)
status: "assigned"
taskChannelSid
: "TCxxxx"
taskChannelUniqueName
: "sms"
taskSid
: "WTxxxx"
taskStatus
: "reserved"
timeout: 3600
workerSid
: "WKxxxx"
workflowName
: "Default Fifo Workflow"
workflowSid
: "WWxxxx"
Here's an example of the use in a template of a couple of the properties and attributes listed above:
manager.strings.TaskExtraInfo = "My task {{task.attributes.name}} was created on {{task.dateCreated}}";
Helper functions provide you with a way to customize text with dynamic information. All of these functions are called using dot syntax on the object helper
, as shown in the example after the list of functions.
lastChatMessage
— returns a Twilio Chat SDK message object.durationSinceUpdate
— returns the time since the Task was last updated, in the format MM:SS
.durationSinceUpdateShort
—returns the time since the Task was last updated in the largest major time unit. For example, for a Task lasting 0 days 3 hours 49 minutes 17 seconds, the function will return 3h
.jsonString
— returns a string representation of a Task.isLiveCall
— returns true
if the specified Task is an Accepted Call Task.isCallOnHold
— returns true
if the specified Task is an Accepted Call Task that belongs to a current worker and is currently on hold.isLiveChat
— returns true
if the specified Task is an Accepted Chat-based Task.isIncomingCall
— returns true
if the specified Task is pending, ie. waiting to be accepted.isChatBasedTask
— returns true
if the specified Task has chat capabilities.isCallTask
— returns true
if the specified Task has callcapabilities.isVideoCallTask
— returns true
if the specified Task has video capabilities.getTaskChatChannelSid
— retrieve the Channel SID of the Chat Task.isPending
— returns true
if the specified Task is pending.isInWrapupMode
— returns true
if the specified Task is in wrapup.isCompleted
— returns true
if the specified Task has been completed.isMyTask
— returns true
if the specified Task is assigned to a current user.getTaskByTaskSid
— retrieves the Task object associated with the specified Task SID.isTaskAccepted
— returns true
if the specified Task has been accepted by an agent, or is in a wrapup or completed state.chat.isCustomerOnline
— returns true
if customer is online, false
if not.Here is an example of the use of a helper function to enable dynamic updates:
manager.strings.TaskExtraInfo = "Time since last update: {{helper.durationSinceUpdate}}";
The following is a partial list of available content strings. For a more up-to-date list, see the latest version of the Flex UI Strings documentation.
RuntimeLoginWithTwilio
link in the runtime login viewThe following template code shows the default values assigned to the above strings:
1{2infoPanelContent: "`3<h1>TASK CONTEXT</h1>4<h2>Task type</h2>5<p>{{task.channelType}}</p>6<h2>Task created on</h2>7<p>{{task.dateCreated}}</p>8<h2>Task priority</h2>9<p>{{task.priority}}</p>10<h2>Task queue</h2>11<p>{{task.queueName}}</p>12<h2>Task Sid</h2>13<p>{{task.taskSid}}</p>14<h2>Reservation Sid</h2>15<p>{{task.sid}}</p>16<hr />17<h1>CUSTOMER CONTEXT</h1>18<h2>Customer name / phone number</h2>19<p>{{task.defaultFrom}}</p>20<h2>Country</h2>21<p>{{task.attributes.caller_country}}</p>`",2223SetYourStatus: "Set your status",24LogOut: "Log out",25SigningIn: "Signing in",26SessionExpired:27"Your session has expired. " + "<a href='#' onClick='window.location.reload()'>Click here to log in again</a>",28NoTasksTitle: "Status",29NoTasks: "No active tasks",30NoTasksHintNotAvailable: "Change activity state to start receiving tasks.",31NoTasksHintAvailable: "You are ready to start receiving tasks.",3233NoCRMConfigured: "No CRM configured",34NoCRMConfiguredAction: "HOW TO CONFIGURE",35NoCRMTitle: "CRM config",36NoCRMHint: "Our docs can help you get started.",37LoginWelcome: "Hi there, welcome to Flex!",38LoginContinue: "Continue anyway",39LoginAgain: "Login again",40LoginLaunch: "Launch",41LoginTitle: "Twilio Flex",42LoginErrorDomain: "Oops! Your runtime domain is incorrect.",43LoginErrorDomainDetails:44"Find your runtime domain " + "<a href='https://www.twilio.com/console/runtime/overview'>here</a>",45LoginErrorSso: "Hmm, Single Sign-On has not been configured.",46LoginErrorSsoDetails:47"Find out how to configure Single Sign-On " +48"<a href='https://www.twilio.com/console/flex/users/single-sign-on'>here</a>",49LoginErrorPopupBlocked: "Sorry, pop-ups are blocked.",50LoginErrorPopupBlockedDetails:51"<a href='https://support.google.com/chrome/answer/95472'>" +52"Find out how to enable pop-ups in your browser</a>",53LoginErrorInvalidCertificate: "Invalid SSO Settings",54LoginErrorInvalidCertificateDetails:55"This may be caused by malformed urls or missing/invalid certificates. Please reconfigure the " +56"<a href='https://www.twilio.com/docs/api/errors/70251' target='_blank'>" +57"SSO settings" +58"</a>" +59" and retry.",60LoginErrorGeneric: "Oops! Well, that didn't work :( Please double check your configuration.",61LoginIsAdmin: "Flex Admin?",62LoginWithTwilio: "Login with Twilio.",63TaskHeaderLeaveCall: "LEAVE CALL",64TaskHeaderEndCall: "HANG UP",65TaskHeaderWrapup: "WRAP UP",66TaskHeaderComplete: "COMPLETE",67TaskHeaderEndChat: "END CHAT",68TaskHeaderStatusPending: "",69TaskHeaderStatusAccepted: "Live | {{helper.durationSinceUpdate}}",70TaskHeaderWebChatStatusAccepted:71"{{#if helper.chat.isCustomerOnline}} {{{icon name='GreenIndicator'}}} {{else}} {{{icon name='GreyIndicator'}}} {{/if}} Live | {{helper.durationSinceUpdate}}",72TaskHeaderGroupCallAccepted:73"Live | {{helper.durationSinceUpdate}} | {{{icon name='Participant'}}} " +74"{{task.conference.liveParticipantCount}}",75TaskHeaderStatusWrapup: "Wrap up | {{helper.durationSinceUpdate}}",76TaskHeaderStatusCompleted: "Completed | {{helper.durationSinceUpdate}}",77SideNavTaskView: "Agent Desktop",78SideNavTeamsView: "Teams",79SideNavAgentDashboard: "Agent Dashboard",80SideNavSupervisorInspections: "Supervisor Inspections",81SideNavSupervisorDashboard: "Supervisor Dashboard",82SideNavSupervisorReports: "Supervisor Reports",83SideNavSettings: "Settings",84SideNavQueuesStatsView: "Queue Stats",85TaskHeaderLine: "{{task.defaultFrom}}",86TaskExtraInfo:87"Lorem ipsum dolor sit amet, consectetur adipiscing elit, " +88"sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. " +89"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip " +90"ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit " +91"esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non " +92"proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",93TaskLineCallIncomingTitle: "Incoming call",94TaskLineCallTransferTitle: "Transfer request",95TaskLineCallEndedTitle: "Call ended",96TaskLineQueue: "Queue: {{task.queueName}}",97TaskLineCallDuration: "{{helper.durationSinceUpdate}}",98TaskLineCallReserved: "Incoming call from queue {{task.queueName}}",99TaskLineCallAssigned: "Live | {{helper.durationSinceUpdate}}",100TaskLineCallWrapup: "Wrap up | {{helper.durationSinceUpdate}}",101TaskLineGroupCallAssigned:102"Live | {{helper.durationSinceUpdate}} | {{{icon name='Participant'}}} " +103"{{task.conference.liveParticipantCount}}",104TaskLineCallTransferWorker: "Request from {{task.incomingTransferObject.worker.fullName}} (direct)",105TaskLineCallTransferWorkerDetail:106"From: {{task.incomingTransferObject.worker.fullName}} (direct)<br />" + "Queue: {{task.queueName}}",107TaskLineCallTransferQueue:108"Request from {{task.incomingTransferObject.worker.fullName}} ({{task.incomingTransferObject.queue.name}})",109TaskLineCallTransferQueueDetail:110"From: {{task.incomingTransferObject.worker.fullName}}<br />" + "Queue: {{task.queueName}}",111TaskLineChatReserved: "Incoming chat request",112TaskLineChatLineReserved: "Incoming Line request",113TaskLineChatMessengerReserved: "Incoming Messenger request",114TaskLineChatWhatsAppReserved: "Incoming WhatsApp request",115TaskLineSmsReserved: "Incoming SMS request",116TaskLineChatAssigned:117"{{helper.durationSinceUpdate}} | {{#if helper.chat.typers.length}} typing … {{else}} {{#if helper.chat.lastMessage}} " +118"{{helper.chat.lastMessage.authorName}}: {{helper.chat.lastMessage.body}}" +119"{{else}}No messages{{/if}}{{/if}}",120TaskLineWebChatAssigned:121"{{#if helper.chat.isCustomerOnline}} {{{icon name='GreenIndicator'}}} {{else}} {{{icon name='GreyIndicator'}}} {{/if}}" +122"{{helper.durationSinceUpdate}} | {{#if helper.chat.typers.length}} typing … {{else}} {{#if helper.chat.lastMessage}} " +123"{{helper.chat.lastMessage.authorName}}: {{helper.chat.lastMessage.body}}" +124"{{else}}No messages{{/if}}{{/if}}",125TaskLineTitle: "",126TaskReserved: "Reserved",127TaskAssigned: "Assigned",128TaskWrapup: "In wrap up",129TaskCompleted: "Completed",130TaskCanceled: "Canceled",131TaskFilterAll: "ALL TASKS",132TaskFilterActive: "ACTIVE TASKS",133TaskFilterWrapping: "TASKS IN WRAP UP",134TaskInfoPanelContent: infoPanelContent,135ColumnHeaderAgent: "AGENT",136ColumnHeaderCalls: "CALLS",137ColumnHeaderTasks: "OTHER TASKS",138SupervisorUserCardFirstLine: "{{worker.fullName}}",139SupervisorUserCardSecondLine: "{{worker.activityName}} | {{worker.activityDuration}}",140SupervisorTaskViewContentHeader: "{{worker.fullName}}, {{task.defaultFrom}}",141SupervisorTaskHeaderLine: "{{task.defaultFrom}}",142SupervisorTaskLive: "{{helper.durationSinceUpdateShort}}",143SupervisorTaskGroupCall: "{{helper.durationSinceUpdateShort}} | ({{task.conference.liveParticipantCount}})",144SupervisorTaskWrapUp: "Wrap up | {{helper.durationSinceUpdateShort}}",145SupervisorTaskCompleted: "Completed | {{helper.durationSinceUpdateShort}}",146SupervisorTaskCardHeader: "{{task.defaultFrom}}",147SupervisorTaskInfoPanelContent: infoPanelContent,148LiveCommsMonitoringMessage: "You are listening to a call with {{task.defaultFrom}} and {{worker.fullName}}",149LiveCommsMonitoringMessageMoreWorkers:150"You are listening to a call with {{task.defaultFrom}} and {{workers.length}} workers",151LiveCommsMonitoringMessageNoWorkers: "You are listening to a call with {{task.defaultFrom}}",152LiveCommsOngoingCallMessage: "You are on a call with {{task.defaultFrom}}",153LiveCommsIncomingCallMessage: "Incoming call from {{task.defaultFrom}}",154LiveCommsBarAccept: "accept",155LiveCommsBarDeny: "reject",156LiveCommsBarReturnToCall: "RETURN",157LiveCommsBarStopListening: "STOP LISTENING",158LiveCommsBarHold: "HOLD",159LiveCommsBarUnHold: "UNHOLD",160WorkerDirectoryTitle: "Transfer",161WorkerDirectoryItemFirstLine: "{{worker.fullName}}",162WorkerDirectoryItemSecondLine: "{{worker.activityName}}",163WorkerDirectoryAgentsTabLabel: "AGENTS",164WorkerDirectoryQueuesTabLabel: "QUEUES",165WorkerDirectoryQueueItemText: "{{queue.name}}",166WorkerDirectorySearchPlaceholder: "Search",167ChatInputDisabledText: "Conversation ended",168WorkerCanvasHeader: "Profile",169WorkerCanvasDetailsHeader: "Agent Details",170WorkerCanvasSkillsHeader: "Skills",171WorkerSkillLevelInvalid: "Please select a skill level between {{min}} - {{max}}",172WorkerSkillPleaseSelect: "Add skill",173WorkerSkillsNoSkills: "No skills attributed",174WorkerSkillsSchemaMismatch: "Worker skills schema mismatch",175WorkerSkillsSaved: "Changes saved successfully",176WorkerSkillsError: "Failed to save changes",177WorkerSkillsReverted: "Changes reverted",178ChatWelcomeText: "Conversation started with customer",179UiVersionDeprecated: "{{message}}",180RuntimeLoginLabel: "Runtime domain",181RuntimeLoginPlaceholder: "Your Runtime Domain",182RuntimeLoginLaunch: "Launch",183RuntimeLoginWithTwilio: "Login with Twilio.",184RuntimeLoginIsAdmin: "Flex Admin?",185RuntimeLoginErrorDomain: "Oops! Well, that didn't work :( Check your <b>domain</b>.",186RuntimeLoginErrorSso: "Oops! Well, that didn't work :( Check your <b>SSO</b> setup.",187TransferFailedNotification: "Agent unavailable",188TaskCannotBeTransferredNotification: "Task cannot be transferred",189SupervisorTaskCanvasHeader: "TASK DETAILS",190TaskTabAgentIncomingLabel: "Incoming",191TaskTabAgentCallLabel: "Call",192TaskTabAgentChatLabel: "Chat",193TaskTabAgentInfoLabel: "Info",194TaskTabSupervisorOverviewLabel: "Overview",195TaskTabSupervisorCallLabel: "Call",196TaskTabSupervisorChatLabel: "Chat",197TaskTabSupervisorInfoLabel: "Info",198MicNotAvailableNotification: "Unable to access microphone, please check browser settings.",199BrowserVoiceDisabledNotification: "Call cannot be accepted. Twilio Voice SDK has been disabled.",200MessageSizeExceeded: "The entered character number exceeds the limit - {{currentCharCount}}/{{maxCharCount}}",201UserControlWorkerSecondLine: "{{worker.activityName}} | {{worker.activityDuration}}",202UserLoggedOutSuccess: "You have logged out successfully!",203CannotChangeOtherWorkerActivity:204"You cannot change an agent's activity while they have a pending task/reservation.",205CallCanvasWorkerOnHold: "You are on hold",206CallCanvasUnholdWorker: "Unhold",207CallParticipantStatusOnHold: "On Hold",208CallParticipantStatusLive: "Live",209CallParticipantStatusConnecting: "Calling...",210CallParticipantStatusLeft: "Caller left",211CallParticipantStatusTransferFailed: "No Answer",212CallParticipantStatusKickConfirmation: "Remove from call?",213LiveCommsIncomingDirectCallTransfer: "Request from {{task.incomingTransferObject.worker.fullName}} (direct)",214LiveCommsIncomingQueueCallTransfer:215"Request from {{task.incomingTransferObject.worker.fullName}} ({{task.incomingTransferObject.queue.name}})",216CallParticipantCustomerName: "{{task.defaultFrom}}",217MonitoringFailedNotification: "Monitoring attempt has failed",218PredefinedChatMessageAuthorName: "Bot",219PredefinedChatMessageBody: "Hi there! How can we help you today?",220AgentStatusAvailable: "Available",221AgentStatusBusy: "Busy",222AgentStatusUnavailable: "Unavailable",223AgentStatusOffline: "Offline",224ActiveTasksTileTitle: "Active tasks",225WaitingTasksTileTitle: "Waiting tasks",226AgentsByActivityTileTitle: "Agents",227LongestWaitTimeTileTitle: "Longest wait",228QueuesNoDataHeading: "Queues",229QueuesNoDataBodyForAdmin: "You have no Queues set up. Please configure your Queues.",230QueuesNoDataBodyForSupervisor: "There are no Queues set up. Please contact your Administrator.",231QueuesNoDataLinkLabelForAdmin: "Add Queue",232PendingReservationsOnLogoutNotification: "You cannot logout while you have a pending task/reservation",233PendingReservationsOnActivityStateChangeNotification:234"You cannot update your activity while you have a pending task/reservation",235AcceptTaskTooltip: "Accept",236RejectTaskTooltip: "Reject",237HangupCallTooltip: "Hang up",238LeaveCallTooltip: "Leave",239MuteCallTooltip: "Mute",240HoldCustomerTooltip: "Hold Customer",241UnholdCustomerTooltip: "Unhold Customer",242HoldAgentTooltip: "Hold {{worker.fullName}}",243UnholdAgentTooltip: "Unhold {{worker.fullName}}",244CancelTransferTooltip: "Cancel Consult",245KickAgentTooltip: "Hang up {{worker.fullName}}",246ColdTransferTooltip: "Transfer",247WarmTransferTooltip: "Consult",248MonitorCallTooltip: "Monitor Call",249LogToFileStartLoggingText: `<div>250<h2>Capture logs</h2>251<ul>252<li>When you enable logging, your browser will be refreshed and logs capturing will start.</li>253<li>Once you are ready to finish - stop logging. All captured logs will be saved to a text file.</li>254</ul>255</div>`,256LogToFileStartLoggingLabel: "Refresh and start",257LogToFileStopLoggingText: `<div>258<h2>Logging is active</h2>259<p>260If you've repeated your actions and reproduced the issue, stop logging to download the file with captured logs.261</p>262</div>`,263LogToFileStopLoggingLabel: "Finish and download",264ChatOrchestrationAddToChatChannelFailed: "Failed to add worker to the chat channel.",265ChatOrchestrationDeactivateChatChannelFailed: "Failed to deactivate the chat channel.",266ChatOrchestrationLeaveChatChannelFailed: "Failed to remove worker from the chat channel.",267TeamsViewFilterAction: "Filter{{#if filterCount}} ({{filterCount}}){{/if}}",268TeamsViewClearSearchAction: "Clear search result",269TeamsViewClearSearchPlaceholder: "Search Agents",270TeamsViewResultsSummaryNoWorkersDisplayed: "No agents matched your criteria. Refine results via search or filter.",271TeamsViewResultsSummaryMaxWorkersDisplayed: "Showing maximum number of agents. Refine results via search or ",272TeamsViewResultsSummaryFilterCTA: "filter",273TeamFiltersPanelTitle: "Filters",274TeamFiltersPanelSingularLabel: "Viewing <strong>{{number}}</strong> agent",275TeamFiltersPanelPluralLabel: "Viewing <strong>{{number}}</strong> agents",276TeamFiltersApply: "Apply",277TeamFiltersReset: "Reset",278InputPlaceHolder: "Type message",279TypingIndicator: "{0} is typing … ",280Connecting: "Connecting …",281Disconnected: "Connection lost",282Read: "Read",283MessageSendingDisabled: "Message sending has been disabled",284Today: "TODAY",285Yesterday: "YESTERDAY",286MessageCanvasTrayContent: `287<h6>Complete</h6>288<p>This chat is no longer active.</p>`,289MessageCanvasTrayButton: "START NEW CHAT",290WelcomeMessage: "Welcome to customer service",291NotificationMessage: "Unable to perform action: {{message}}",292Save: "SAVE",293Reset: "RESET",294MessageCharacterCountStatus: "{{currentCharCount}} / {{maxCharCount}}",295MessageCharacterCountReached: "Character count reached - {{currentCharCount}} / {{maxCharCount}}",296SendMessageTooltip: "Send Message",297FieldValidationRequiredField: "Field required",298FieldValidationInvalidEmail: "Please provide a valid email address",299ChatInputUserNotMemberDisabledText: "You are not a participant of this chat",300FilterItemAny: "Any",301FilterItemAmountSelected: "{{amount}} selected",302FilterItemOnly: "{{item.label}} only"303};