Render View Node

The Render View node allows you to write custom JSX to create interactive interfaces. It is also possible to define Exits and, based on user interaction, route the flow through the intended exits. Exits' settings can be accessed by double-clicking the node.

❗️

Render View Node

  • Native React components are not supported.
  • HTML tags like script, style, among others, are not supported.

There are two available tabs (Figure 1): Code (1) and Exits (2).
The Code tab displays a code editor (3), a required field. This editor accepts HTML and JSX so you can create the desired interfaces.

28802880

Figure 1 - Render View configuration panel

👍

Components available in the code editor

The Exits tab (Figure 2) allows the configuration and management of custom exits that, based on a user interaction, will trigger the execution through that specific path.

28802880

Figure 2 - Render View Exits tab

📘

How to manage Exits

How to use Exits

The Code Editor

👍

Both HTML and JSX can be used in the code editor tab.

Compatible Components

To maintain the consistency of the experience, other React components are supported as described below. All components accept the HTML style attribute and their default HTMLElement properties.

🚧

  • The HTML style is an attribute that takes an object (e.g. style={{ "backgroundColor":"#00FF00" }}).
  • Since the code editor accepts JSX, className must be used instead of the HTML class attribute.

Layout Components

Flex - built to easily align items on a container.

Available Properties
1 - gap - defines the space between child elements. Accepts an integer which uses a 4 px multiplier.
2 - direction - sets the direction of the flex container. It can be a:
2.1 - row - the flex container's main-axis is defined to be the same as the text direction. The main-start and main-end points are the same as the content direction.
2.2 - column - the flex container's main-axis is the same as the block-axis. The main-start and main-end points are the same as the before and after points of the writing-mode.
3 - alignX and alignY - based on the direction property, these two properties define the horizontal and vertical alignment of the child elements:
3.1 - start, center and end: pack items around the respective position in the container.
3.2 - space-around, space-evenly, space-between and stretch: distribute items in the container.

📘

Both the direction and the AlignX and AlignY properties are based on the respective flex-direction, align-items and align-content CSS properties. For more information, please read the World Wide Web Consortium (W3C) documentation.

<Flex direction="column" gap="2" alignX="start" alignY="center" style={{ "color":"#00FF00" }}></Flex>

Grid - defines a two-dimensional grid-based layout, composed of columns and rows. It allows a fixed/constant space between the child elements.

Available Properties

  • columns - defines the number of columns per row.
  • gap - defines the space between child elements. Accepts an integer that uses a 4 px multiplier.
<Grid columns="2" gap="2">
   <Column>Column 1</Column>
   <Column>Column 2</Column>
</Grid>

Other UI Components

Divider - creates a horizontal line with the purpose of dividing sections within an interface.

Available Property
vertical - creates a vertical line instead of the default horizontal line.

A Text<Divider vertical/>Divided

Link - works exactly like the native Anchor element, but with the Talkdesk look-and-feel.

Available Properties

  • href - required property to pass the URL that the hyperlink redirects to.
  • disabled - property to render the element disabled, i.e., non-clickable by the user.
<Link href="https://www.talkdesk.com/">Click Here</Link>

Heading - works like the Heading HTML elements, representing levels of section headings.

Available Properties

  • level - required property where “1” is the highest section level and “6” is the lowest.
  • truncated - signals hidden overflow content to users using ellipsis (“…”).

❗️

Truncated

The functionality of the truncated prop depends on the HTML structure, its elements and properties.

<Heading level="2" truncated>This is a Section Heading</Heading>

Text - every text must be wrapped with this component in order to maintain text and font styles consistency.

Available Properties

  • size - use small or medium to define the text size. Use section headings (“Heading”) if you need bigger sizes.
  • weight - use light, regular or medium to define the text weight.
  • inline - use inline to avoid breaklines between multiple “Text” elements.
  • truncated - signals hidden overflow content to users using ellipsis (“…”).

❗️

Truncated

The functionality of the truncated prop depends on the HTML structure, its elements and properties.

<Text size="medium" weight="light" truncated>Hello World</Text>
 
<Text inline>Inline text.</Text><Text inline>Inline text.</Text>

Button - creates interactive buttons with the Talkdesk look-and-feel.

Available Properties

  • shape - use compact or full-width to define if the Button will adjust to its content or occupy the available container space, respectively.
  • size - use tiny, small or medium to define the Button size.
  • type - use one of the following elements to stylize the Button (Figure 3): primary, secondary, info, danger, warning, success, feature, mono-dark or mono-light.

❗️

Type Primary

The type primary is sensitive to Talkdesk theme changes: color may vary depending on the selected theme.

<Button type="primary" size="small" shape="full-width">Back</Button>
28802880

Figure 3 - Button types

Variables

Variables are entities that can be used throughout an automation to collect information to:

  • Personalize the experience by storing a value and using it in the interaction.
  • Store information to be used in the flow by different components, like the Render View or Split Flow, or to be passed to external systems.

You can manage variables using the variables tool located at the right edge panel (Figure 4). There are two types of variables: Custom (1) and System (2), presented in two different tabs (Figure 4).

28802880

Figure 4 - Variables editor tabs

  • Custom variables - can be managed at the automation level and are stored as metadata for each automation.
  • System variables - defined by the system and available for every automation of that type. System variables cannot be managed on each automation and are not stored as metadata for the automation.

Managing Variables

In the Render View node, only custom variables are used. This tab (Figure 5) allows you to manage them.
To create a variable, click the Add variable button (Figure 5 - 1). To edit or delete a variable, click the Actions menu (2) and then click the Edit (3) or Delete (4) option.

28802880

Figure 5 - Custom variables management

When adding or deleting a custom variable, a modal is displayed (Figure 6) with two required fields: the variable name (Figure 6 - 1) and the source (2).

28802880

Figure 6 - Adding variables section

It is possible to add variables from different sources. The available sources are:

  • Current Automation - create variables in the current automation. The variables are loaded locally and only work for the specified automation. The variables cannot be shared between cards.
  • Studio - add variables from Studio flows. Studio-collected information is stored in flow variables that can be reused in other flow components, like the Render View node.
  • Workspace - add variables from Workspace apps.
  • Active Panel - add variables from the panel in which this card is being rendered. When this source is selected, you can exchange variables between cards in the same panel.

🚧

The Studio and the Workspace sources are read-only. You are able to access the variable value, but you can't modify it.

The Current Automation and Active Panel sources are read-write, allowing to write and read from the same variable.

Depending on the selected source, a Path (Figure 7 - 1) field is also required. This field is shown for:

  • Studio - use the variable name as defined in the Studio flow context.
  • Workspace - while an agent interacts with Talkdesk Workspace, apps publish some variables on this source. Please check the table below to find which variables are currently being exposed.
  • Active Panel - use the variable as defined in the active panel flow.
28802880

Figure 7 - Variable path

🚧

If the variable has multiple levels, the path must be written using a dot notation (.) between levels.
Each variable name must be unique.

Using Variables

To use the variables in the Render View node, use the following syntax:

  • Context.setVariable(variableName, value) - to set the value of the variable.
  • Context.getVariable(variableName) - to get the value of the variable.

👍

Since the name of each variable must be unique, it is not necessary to specify the source of the variable.

Exits

The Render View node allows you to define multiple exits.

📘

How to configure and manage exits

To use the Exits in the Render View node, use this syntax in the code of the node: actions.goToExit(“<exitSlug>”).

Calling this function will trigger the next step of the flow by calling the dispatch function, for instance when the user clicks on a Button.

<Button onClick={() => actions.goToExit("back")}>Back</Button>