Workspace Designer Cards
A card is an automation that can be configured to build interactive interfaces and forms to present relevant information to the user: automatically, based on Talkdesk Connections™ executions or user inputs.
Creating a Card
To create a Card, follow the steps below:
- Log in to your Talkdesk account and navigate to Workspace Designer [1].
- Select Cards [2] and, from the “Cards” page, click on the Create card [3] button.
- This will open up a box with two fields. Fill it as described below:
-
- Provide a “Name” [4] for your card (mandatory field).
- Enter a “Description” [5] for the card (optional field).
-
- Click the Create [6] button to finalize the process and proceed to the configuration page.
Note: After configuring the card in the Automation Designer app, you will have to navigate back to Workspace Designer by clicking on the app's icon, located at the left-side menu.
Editing a Card
To edit a Card, follow the steps below:
- Navigate to Workspace Designer [1], select Cards [2], and choose the desired Card’s Edit button [3] from the cards list.
Note: After editing the card in the Automation Designer app, you will have to navigate back to Workspace Designer, by clicking on the app's icon, located at the left-side menu.
Workspace Designer Cards Automation Nodes
There are several available nodes in a Cards Automation. Know more about them below, or take a deep dive into our developer documentation.
Notes:
- Each node opens a specific editor panel. When saving changes, the editor panel closes and the configurations will be stored locally.
- The changes will be stored independently if there are errors.
- To save changes, you must save the Card automation.
- Validation errors will only be shown when the editing panel is opened.
Card Trigger Node
The card trigger node is the automation starting point. It represents the moment when the card is loaded.
Render Form Node
The Render Form node is where you can build interactive forms to be displayed. You may have multiple Render Form nodes, depending on the automation you’re designing.
To configure the form, follow the steps below or access the developer documentation for a more in-depth explanation.
- Double-click the Render Form [1] node and configure the form as described below:
- Provide a “Component name” [2] for your render form node.
- Provide a "Form title" [3] to be displayed in the form.
- Define if the field is required [4].
- Fill in the “Label” [5] with the form field label to be displayed in the card.
- Choose the field type using the “Type” dropdown [6]. Currently, “Text”, “Text area”, and “Checkbox” input types are available.
- Optionally, you can define a default value for the field to be automatically filled. You can define this default value to be a variable [7] or a value [10]. If you choose a variable, select it from the available options in the dropdown [8]. Otherwise, set the value in the text box [11].
- Select the variable in which the value of the field will be stored after submission [12].
- If needed, add more fields to the form [13]. Note: You can only delete fields [9] after adding a second field (the form must have, at least, one field).
- Click Save [14] to apply the changes.
Render View Node
With the Render View node, you can build visual interfaces to be displayed on a card. This node accepts HTML and JavaScript, along with some selected custom components and JavaScript methods. For more detailed information, click here.
It’s also possible to define exits and, based on user interaction, route the flow through the intended exits. To use the exits, check the Exits developer documentation section
To configure the card, follow the steps below:
- Provide a “Component name” [1] for your render view node.
- Add the code [3] that configures the card in the “Code” [2] tab (required field).
- You can preview the output by clicking on the "Preview" button [4].
- If needed, add exits to the node in the Exits [5] tab, by clicking the Add exit [6] button.
- Fill in the “Name” [7] field. You can copy the slug [8] within the modal or after confirming the exit. Note: The exit name is required, must be unique, and contain only letters and numbers. Special characters are not allowed.
- Click Confirm [9] to apply the changes.
- You can edit [10] or delete [11] the exit by clicking on the respective icon.
- Click Save [12] to apply the changes. The list of exits will appear in the "Exits" tab in the node editor.