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.

👍

Card Preview (Figure 1 - 4) - a button to preview the content of the card.

2880

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.

2880

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>
2880

Figure 3 - Button types

Iframe - allows displaying an Iframe, embedding an HTML page into the current one. Available properties:

  • src - the URL to render.
  • allow - specifies a Permissions Policy for the Iframe. This property defines what features are available to the Iframe (e.g., access to the microphone, camera, full screen…) based on the origin of the request. The values of the property are separated by a semicolon.
  • sandbox - applies extra restrictions to the content in the frame. The values of the property are space-separated.

🚧

Leaving allow or sandbox properties empty will not apply any features or extra restrictions, respectively.

To know more about the available attributes for the allow and sandbox properties, please check the HTML Iframe element documentation.

<Iframe src="https://cti-client.talkdeskstg.com/auth/login?userId=61434baa1bc8d30db50226a9" allow="camera;microphone" sandbox="allow-downloads allow-scripts"/>

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>

Troubleshooting

If you have any questions, or if you’re having any technical issues, please open a ticket using this form.