Create a Card - Different Outcomes
Depending on defined parameters
Overview
This tutorial explains how you can use the Split Flow component, from Talkdesk Automation Designer™, in a card configuration to display different outcomes to the user, depending on certain conditions.
This blueprint also goes through the different Talkdesk Workspace Designer™ concepts, explaining how to configure and use Context variables.
The specific example described in this tutorial consists of creating an automation that will present a card with a script the agent needs to follow while on a call. This script can be displayed in Portuguese or English, depending on a series of defined parameters:
-
Scenario 1 - if the country code contains +1 (USA) or +44 (United Kingdom), the card will show a generic script in English.
-
Scenario 2 - if the country code contains +351 (Portugal) and:
- Scenario 2.1 - the phone number belongs to a group of specific numbers, and the card will show some specific information for the phone numbers with the Portuguese code country.
- Scenario 2.2 - the phone number does not correspond to the expected one, then a generic script in Portuguese will appear on the card.
-
Scenario 3 - if the country code does not match any of the previous ones, the card will show information stating that no script is available for that call.
Required Background Knowledge
So that you can make the most of this tutorial, you must understand the basic concepts of Workspace Designer (cards, panels, and canvas):
- How to create a card and a panel, and how to associate a panel to a canvas.
- How to manage variables.
Implementation Steps
1 - Create a new card
2 - Add a custom variable
3 - Use the Split Flow to define the conditions for displaying cards
4 - Use the Render View to display the cards
5 - Save and publish the card
6 - Add the card to a panel
7 - Associate the panel with a canvas
1 - Create a New Card
To start building the card that will display the iframe, first, you need to create it. You can do it by following these steps:
1 - Navigate to Workspace Designer in your account (find the Workspace Designer icon to launch the app on your Talkdesk dock - Figure 1 - 1).
2 - On the Cards tab (Figure 1 - 2), click the Create card button (Figure 1 - 3).
3 - A settings modal will open (Figure 2 - 1), asking for information about this new card. Write the card title (required field - Figure 2 - 2) and its description (optional field - Figure 2 - 3).
4 - Click the Create button (Figure 2 - 4). Then, you will be redirected to the card configuration page (Figure 3) in Automation Designer, where you will be able to detail the card’s automation.
2 - Add a Custom Variable
In this use case, we want to have different outcomes displayed on a card depending on the phone number’s country code. The goal is for the agent to be able to follow a script while on a call, which can be in Portuguese or English. To accomplish this, we need the customer’s phone number.
In this step, you will learn how to create the custom variable we will need for this use case. To create the phone_number
variable, follow these steps:
1 - Click the Variables tab of the tools panel (Figure 4 - 1).
2 - Click the Custom tab (Figure 4) of the Variables side panel and then click the Add variable button (Figure 4 - 2). A modal will open (Figure 4 - center).
3 - In the modal, fill in the variable name (required field - Figure 4 - 3), select its source (required - Figure 4 - 4), and define the path (required - Figure 4 - 5). In this case, we need to get the variable through Workspace, using the active-conversation.contact_person_number
path.
4 - Click the Confirm button (Figure 4 - 2). The phone_number
variable is now successfully created.
3 - Use the Split Flow to Define the Conditions for Displaying Cards
Now that you have the phone_number
variable created, you can add a Split Flow component. This will allow you to create multiple conditions that will define which script will be shown to the agent during a call.
To start, you can drag a Split Flow component to the flow and connect it to the Card Trigger component (Figure 5 - 1). Afterward, by double-clicking the Split Flow componen (Figure 5 - 2), its editor panel will appear (Figure 5 - 3). Here, you can define the exits based on the specific scenarios of this use case.
Now follow these steps (Figure 6):
1 - Insert the Component name (required field) (Figure 6 - 1).
2 - Configure the first scenario in Exit #1 (Figure 6 - right side) (if the country code contains +1 or +44):
2.1 - Select the variable phone_number in the first dropdown (Figure 6 - 2).
2.2 - Select the option Contains in the middle dropdown (Figure 6 - 3).
2.3 - Add the value +1 in the third dropdown (Figure 6 - 4).
2.3.1 - Click the third dropdown arrow (Figure 6).
2.3.2 - Click the Add value option that will appear after opening the dropdown (Figure 6).
2.3.3 - Write +1 in the value field and press Enter (Figure 6).
2.3.4 - Click the Add condition button (Figure 6 - 5) to add the second condition of this scenario.
2.3.5 - Change from the Matching all option (i.e. use the logical operator and in all the conditions in this exit) to Matching any option (i.e. use the logical operator or in all the conditions in this exit) (Figure 7 - 1).
2.3.6 - Select the variable phone_number in the first dropdown (Figure 7 - 2).
2.3.7 - Select the option Contains in the middle dropdown (Figure 7 - 3).
2.3.8 - Add the value +44 in the third dropdown (Figure 7 - 4).
2.3.8.1 - Click the third dropdown arrow (Figure 7).
2.3.8.2 - Click the Add value option that will appear after opening the dropdown (Figure 7).
2.3.8.3 - Write +44 in the value field and press Enter (Figure 7).
3 - Click the Add exit button (Figure 7 - 8).
4 - Configure the second scenario in Exit #2 (if the country code contains +351) (Figure 7):
4.1 - Select the variable phone_number in the first dropdown (Figure 7 - 5).
4.2 - Select the option Contains in the middle dropdown (Figure 7 - 6).
4.3 - Add the value +351 in the third dropdown (Figure 7 - 7).
4.3.1 - Click the third dropdown arrow (Figure 7 - 7).
4.3.2 - Click the Add value option (it will appear once you click the dropdown).
4.3.3 - Write +351 in the value field and press Enter (Figure 7).
5 - Click the Save button (Figure 7 - 9). You've just successfully added a Split Flow component to your card (as depicted in Figure 8, center).
Scenarios 2.1 and 2.2
To fulfill scenarios 2.1 and 2.2, we will need to add one more Split Flow component.
You can achieve the same outcome with just one Split Flow. We are only adding two to separate the concerns between the country code and the phone number. If you wish to configure every parameter in the same Split Flow component, just follow this logic:
Exit #1
phone_number contains +1 OR +44Exit #2
phone_number contains +351 AND phone_number equals +351914…Exit #3
phone_number contains +351 AND phone_number equals +351308…Exit 4#
phone_number contains +351
You can drag a new Split Flow component to the flow and connect it to exit #2 of the first Split Flow (phone_number contains +351). As previously done, add the Component name (Figure 8 - 1), select the variable phone_number (Figure 8 - 2), and then add the list of phone numbers you want to match (Figure 8 - 3). Once you're done, click the Save button (Figure 8 - 4).
4 - Use the Render View to Display the Cards
As previously mentioned, we have a use case where the agent will see a script in a card depending on some conditions. Therefore, we need to define all four outcomes by adding the same number of Render View components to each exit of the Split Flow components:
1 - Drag a Render View component (Figure 9 - 1) and connect it to the desired exit of the Split Flow component.
2 - Open its editor side panel and add the Component name (Figure 9 - 2).
3 - Repeat this procedure until you have all the exits of the Split Flow component connected to Render View components (Figure 10).
Configure the Render View for Scenario 1
Open the editor side panel of the Render View named English Script (Figure 11). To configure this component, you can add the HTML
and JSX
code to render the defined use case (Figure 11).
As you can see in the code below, we are making use of:
- Flex and Box components, which allow aligning the content of the card by using the direction, paddingTop, alignX, alignY, and gap properties.
- Heading component, which is used to display the title of the card.
- Text component, which wraps the text to maintain style consistency.
- img tag, which allows adding an image to the card.
<Flex direction="column" width="100%" height="100%">
<Box>
<Flex paddingTop="3" alignY="center" alignX="center" height="100%" grow>
<img style={{width: "10%"}} src="https://t.ly/itMb"/>
<Heading level="2">English Script</Heading>
</Flex>
</Box>
</Flex>
<Flex gap="3" alignX="center">
<Flex direction="column" gap="4">
<Box paddingTop="12">
<Text color="#6f767d">Step 1</Text>
<Text>Greet the customer and ask how you can help</Text>
</Box>
<Box>
<Text color="#6f767d">Step 2</Text>
<Text>Search for the information that will help solve your customer issue</Text>
</Box>
<Box>
<Text color="#6f767d">Step 3</Text>
<Text>Take notes to save information for a future interaction</Text>
</Box>
<Box>
<Text color="#6f767d">Step 4</Text>
<Text>Ask if you can help with anything else (and repeat step 2-4 if needed)</Text>
</Box>
<Box>
<Text color="#6f767d">Step 5</Text>
<Text>Thank the customer for the call and say goodbye</Text>
</Box>
</Flex>
</Flex>
You can also use the Card Preview feature to visualize your card during the configuration process.
Configure the Render View for Scenario 2.1
Open the editor side panel of the Render View named Portuguese Script (Specific Phone) (Figure 12). One of the differences in this configuration is the use of the variable phone_number, which you get by using the Context.getVariable("phone_number")
method.
<Flex paddingTop="3" alignY="center" alignX="center" height="100%" grow>
<img style={{width: "40px"}} src="https://t.ly/muhH"/>
<Heading level="2">Script de Opinião</Heading>
<img style={{width: "40px"}} src="https://t.ly/muhH"/>
</Flex>
<Flex gap="3" alignX="center">
<Flex direction="column" gap="4">
<Box paddingTop="12">
<Text color="#6f767d">Número de telefone: </Text>
<Text>{Context.getVariable("phone_number")}</Text>
</Box>
<Box>
<Text color="#6f767d">Passo 1</Text>
<Text>Cumprimenta o cliente e explica que o motivo da chamada é obter opinião sobre o nosso serviço</Text>
</Box>
<Box>
<Text color="#6f767d">Passo 2</Text>
<Text>Questiona se o motivo da chamada anterior ficou resolvido</Text>
</Box>
<Box>
<Text color="#6f767d">Passo 3</Text>
<Text>Questiona se o/a agente que atendeu a chamada foi útil na resolução do problema</Text>
</Box>
<Box>
<Text color="#6f767d">Passo 4</Text>
<Text>Agradece ao cliente pela chamada e despede-te</Text>
</Box>
</Flex>
</Flex>
Configure the Render View for Scenario 2.2
Open the editor side panel of the Render View named Portuguese Script (General) (Figure 13). The configuration will be similar to Scenario 1, except the text will be translated into Portuguese (Figure 13).
<Flex paddingTop="3" alignY="center" alignX="center" height="100%" grow>
<img style={{width: "8%"}} src="https://t.ly/6hAB"/>
<Heading level="2">Script Português</Heading>
</Flex>
<Flex gap="3" alignX="center">
<Flex direction="column" gap="4">
<Box paddingTop="12">
<Text color="#6f767d">Passo 1</Text>
<Text>Cumprimenta o cliente e pergunta como podes ajudar</Text>
</Box>
<Box>
<Text color="#6f767d">Passo 2</Text>
<Text>Procura informação que possa ajudar a resolver o problema do cliente</Text>
</Box>
<Box>
<Text color="#6f767d">Passo 3</Text>
<Text>Tira notas para guardar informação para futuras interações</Text>
</Box>
<Box>
<Text color="#6f767d">Passo 4</Text>
<Text>Pergunta se podes ajudar com mais alguma dúvida (e repete os passos 2-4 se necessário)</Text>
</Box>
<Box>
<Text color="#6f767d">Passo 5</Text>
<Text>Agradece ao cliente pela chamada e despede-te</Text>
</Box>
</Flex>
</Flex>
Configure the Render View for Scenario 3
Open the editor side panel of the Render View named Unavailable Script (Figure 14). As you can see in the code below, this is a much simpler case when compared to Scenario 1, but it uses almost all the same components and tags.
<Box padding="3" width="100%">
<Flex direction="column" paddingTop="3" alignY="center" alignX="center" height="100%" grow>
<img style={{ width: "200px" }} src="https://prd-cdn-talkdesk.talkdesk.com/cdn-assets/latest/talkdesk/product/empty_states/error_generic.svg"></img>
<Heading level="3">There is no available script for this call</Heading>
</Flex>
</Box>
5 - Save and Publish the Card
Once the configuration is complete, you need to save and publish the automation and, therefore, the card, using the respective buttons in the automation header (Figure 15 - 1, 2).
6 - Add the Card to a Panel
Now, you can add your card to a panel. First, you need to go back to Workspace Designer and ensure that you have a panel.
Once you have a panel of your choosing, click the Add card button (Figure 16 - 1). A side panel with your list of cards will appear and you can add the created card to the panel (Figure 16 - 2).
The card is then added to the panel, as you can see in Figure 17. In this case, what is being shown is the Unavailable Script outcome because we do not have the variable phone number (which is being retrieved through the Workspace context during a call).
Keep in mind that to test this card, you need to make a real call to get the other outcomes based on the phone number.
The card in Figure 17 can be resized. See here more about customizing the display settings.
7 - Associate the Panel with a Canvas
The final step is to associate the panel with a canvas.
In this case, since we want to display a script to the agent during a call, we will add the panel to the Conversation App canvas (Figure 18).
Import this Automation
You can import the card automation created in this tutorial:
1 - Create a JSON file with the code below.
{
"id":"3defe026-a136-4d98-9935-2553839162e9",
"name":"Call Script",
"type":"WORKSPACE_DESIGNER_CARDS",
"publish_state":"DEPLOYED",
"last_updated":"Fri Mar 24 2023 12:18:51 GMT+0000 (Western European Standard Time)",
"last_published":"Fri Mar 24 2023 12:18:52 GMT+0000 (Western European Standard Time)",
"content":[
{
"id":"706af39e-e87a-40b2-a097-d864315a2e81",
"name":"",
"creation_index":1,
"nodes":[
{
"id":"6f5ab4ae-7629-447b-b567-68664884eda8",
"type":"card-trigger",
"position":{
"x":50,
"y":50
},
"data":{}
},
{
"id":"28186be8-4ab9-4c6f-af52-5246958d089f",
"type":"split-flow",
"namespace":"common",
"position":{
"x":750,
"y":0
},
"data":{
"configuration":{
"exits":[
{
"identifier":"94a1b11c-139d-411f-b51b-d1f7284a09b2",
"matching":"OR",
"conditions":[
{
"identifier":"f870b62a-aa19-4d3c-8eae-14e2f8138cf3",
"entry_operand":"fe89c1b2-cd4d-470b-8e89-c045bd158aa9",
"operator":"EQUALS",
"compare_operand":{
"is_variable":false,
"values":[
{
"text":"+351 308 802 132"
}
]
}
},
{
"identifier":"afcaf6b1-0739-488e-9836-63d53879d32a",
"entry_operand":"fe89c1b2-cd4d-470b-8e89-c045bd158aa9",
"operator":"EQUALS",
"compare_operand":{
"is_variable":false,
"values":[
{
"text":"+351 308 805 124"
}
]
}
}
]
}
]
}
},
"name":"Phone Number Conditions"
},
{
"id":"07c41519-5ad0-408e-ad24-1d42c69696fe",
"type":"split-flow",
"namespace":"common",
"position":{
"x":345,
"y":0
},
"data":{
"configuration":{
"exits":[
{
"identifier":"dce311d7-fb04-42a1-bd7f-19001c9d6162",
"matching":"OR",
"conditions":[
{
"identifier":"b466307b-5433-4cf0-9089-05c2fa2c0aa2",
"entry_operand":"fe89c1b2-cd4d-470b-8e89-c045bd158aa9",
"operator":"CONTAINS",
"compare_operand":{
"is_variable":false,
"values":[
{
"text":"+1"
}
]
}
},
{
"identifier":"36b08bde-09d6-43d6-8532-e3d8b60eba49",
"entry_operand":"fe89c1b2-cd4d-470b-8e89-c045bd158aa9",
"operator":"CONTAINS",
"compare_operand":{
"is_variable":false,
"values":[
{
"text":"+44"
}
]
}
}
]
},
{
"identifier":"e3e2284b-ffcc-4130-84f3-d58de8512a20",
"matching":"AND",
"conditions":[
{
"identifier":"baca71cd-ba57-460f-bd17-b6b28f020b36",
"entry_operand":"fe89c1b2-cd4d-470b-8e89-c045bd158aa9",
"operator":"CONTAINS",
"compare_operand":{
"is_variable":false,
"values":[
{
"text":"+351"
}
]
}
}
]
}
]
}
},
"name":"Country Code Flow"
},
{
"id":"d9f91201-3fae-4879-891e-130f2a59b668",
"type":"render-view",
"namespace":"workspace_designer_cards",
"position":{
"x":690,
"y":-195
},
"data":{
"configuration":{
"code":"<Flex paddingTop=\"3\" alignY=\"center\" alignX=\"center\" height=\"100%\" grow>\n <img style={{width: \"10%\"}} src=\"https://t.ly/itMb\"/>\n <Heading level=\"2\">English Script</Heading>\n</Flex>\n<Flex gap=\"3\" alignX=\"center\">\n <Flex direction=\"column\" gap=\"4\">\n <Box paddingTop=\"12\">\n <Text color=\"#6f767d\">Step 1</Text>\n <Text>Greet the customer and ask how you can help</Text>\n </Box>\n <Box>\n <Text color=\"#6f767d\">Step 2</Text>\n <Text>Search for the information that will help solve your customer issue</Text>\n </Box>\n <Box>\n <Text color=\"#6f767d\">Step 3</Text>\n <Text>Take notes to save information for a future interaction</Text>\n </Box>\n <Box>\n <Text color=\"#6f767d\">Step 4</Text>\n <Text>Ask if you can help with anything else (and repeat step 2-4 if needed)</Text>\n </Box>\n <Box>\n <Text color=\"#6f767d\">Step 5</Text>\n <Text>Thank the customer for the call and say goodbye</Text>\n </Box>\n </Flex>\n</Flex>",
"compiled_code":"PQKgxA+hAKCqBKBRKJgCh4FMCGBjALgHS4BOO+miANpgLaYB2+AFFnkQGInYDm9TAGgAEDAK5Uqw0JBgJkEVGwLEy2CtTqMWHGgA9hAbzRChAB2wATCwEsGPACoB7UwC4hAIgDM7gcaHYqax4GAE03d1wtTBIfPwCghgANcMimaNiTAAtMIMz8cIBGAAYigFIMoR4SRwB3N3wSUUw0AF8pcCg4JBRgJSJSckoafhZ3a1oeHyEjEwBnfABPGjcZkyEa6wt8TMKy9z82v1mSXHC8-FNZl2BgIioF4Gt8AFkAI32WgEp2mS75RRwygGaiGmiYzAAEjgbHZDH4aAA3TBUcIAJg+wnciDsgVmmSEAGVSNZTPh3J9vkJpJ05D0+ipBhoRswdJh9NM-DxsK4PN5fCZ4sFkh5UhQYq0fjTugpeoD+qp1MMtCy9HCTDYyARrI4GClHFRRLQGBUuTz3AAWDFUjqyaUA9gMkFM5UAIUc7NW5istgczkK6Il1t+tJl9OBirBLHsbPwaqEuH1jhI4TAADYAGYAdlTmYsVvcBIopiEBXJktt-1lDvDoOZ0d0sZE4kkHgA4mRMPghNtMPHRPNHPQSP4GBZ-LMANZCTK1IQLRyiePYBjT5GmcmU6kVulyx0R5lu9liCTlv476sK2vK+uN1YJqhJlMZ7O5-OFzDF9Gbm1n0O7mvOuCN7CMeLYFjgJz4umSbdtkQi2NBJC0Go2ortsajrNYEirlQxazPqSJzguw64P2+CDtE8GzLMTQbqeIb2kCl6ASwh4gc29F2lWTGMkqQExnG96Ph4aZZjmeaBgWRZCN437BlxYbMXxUYCU2J4ePY2ATr2DCOBQszdo4QizNghEIUmyH4KhQiIf4NmiPgohkPBaTcFqOp0UGUqVopvGRswbFqS2W6-ox8p+XWql3omyYic+4lvtJlpyd5548U6ynMMBQWYgAgpO8HpkRi64MuOHFhs2wjgs2w+kIyKzL2zDLmOZCmOQxnSaiAC05qFSImCYBYQ2fJ5IUMdx4UZf5gWgZxPn-kp-nZdFD6xe4okvhJbQeO+xYAKxll525-heEXXqpc0aZky5Tj2fYDkONkwfdpXYS1xnYAslSOI4FivAsmAbhSnwANxAA",
"exits":[
]
}
},
"name":"English Script"
},
{
"id":"868288a6-d781-42d9-974b-0ee7cc751a59",
"type":"render-view",
"position":{
"x":655,
"y":295
},
"data":{
"configuration":{
"code":"<Box padding=\"3\" width=\"100%\">\n <Flex direction=\"column\" paddingTop=\"3\" alignY=\"center\" alignX=\"center\" height=\"100%\" grow>\n <img style={{ width: \"200px\" }} src=\"https://prd-cdn-talkdesk.talkdesk.com/cdn-assets/latest/talkdesk/product/empty_states/error_generic.svg\"></img>\n <Heading level=\"3\">There is no available script for this call</Heading>\n </Flex>\n</Box>\n",
"compiled_code":"PQKgxA+hAKCqBKBRKJgCh4FMCGBjALgHS4BOO+miANpgLaYB2+AFFnkQGInYDm9TAGgAEDAK5Uqw0JBgJkEVGwLEy2CtTqMWAIQD2AD2EBvNEKEAHbABMrASwY8AXEIBEAZhcDTQgO62r+AAWzi4AjAAM4QCkLmgAvlLgUHBIKMBKRKTklDT8LBw0hkImZnZkBLa6DCG4ulSitAye3pY29jwAKrrmIR5eZthUtjwMAJo1WpgkzQNDIwAaE0xTM0KBmMOB+CER0as8JLo+zvgkopjxiTIp8oo4yllqOZpMzC62tDyexd4AzvgATxozhKZl8-iCIQATJFzPpYmYEn8SLgQlt8OZfo5gMBzCQrABaXBWBgE-CDADWVkwvwphHJVCpNLptVowGJpOwv1+mHwv2AVCe-2ADKZtNxhysogIwDo5kBEH+QtlJEOJAgPEYU1suEIvwAbl94gBKK7JORpDIqbIaPLMAASODsDmM3ho+swVF6sQSrg66zIQlsvxEuiE2H12FsgoARjQhL9SLZ5UIAGa6EhCILBoS4QZUFzGovGgDcQA",
"exits":[
]
}
},
"name":"Unavailable Script"
},
{
"id":"3bcd8707-5347-4d85-a540-3511e1ffe1aa",
"type":"render-view",
"position":{
"x":1090,
"y":-65
},
"data":{
"configuration":{
"code":"<Flex paddingTop=\"3\" alignY=\"center\" alignX=\"center\" height=\"100%\" grow>\n <img style={{width: \"40px\"}} src=\"https://t.ly/muhH\"/>\n <Heading level=\"2\">Script de Opinião</Heading>\n <img style={{width: \"40px\"}} src=\"https://t.ly/muhH\"/>\n</Flex>\n<Flex gap=\"3\" alignX=\"center\">\n <Flex direction=\"column\" gap=\"4\">\n <Box paddingTop=\"12\">\n <Text color=\"#6f767d\">Número de telefone: </Text>\n <Text>{Context.getVariable(\"phone_number\")}</Text>\n </Box>\n <Box>\n <Text color=\"#6f767d\">Passo 1</Text>\n <Text>Cumprimenta o cliente e explica que o motivo da chamada é obter opinião sobre o nosso serviço</Text>\n </Box>\n <Box>\n <Text color=\"#6f767d\">Passo 2</Text>\n <Text>Questiona se o motivo da chamada anterior ficou resolvido</Text>\n </Box>\n <Box>\n <Text color=\"#6f767d\">Passo 3</Text>\n <Text>Questiona se o/a agente que atendeu a chamada foi útil na resolução do problema</Text>\n </Box>\n <Box>\n <Text color=\"#6f767d\">Passo 4</Text>\n <Text>Agradece ao cliente pela chamada e despede-te</Text>\n </Box>\n </Flex>\n</Flex>",
"compiled_code":"PQKgxA+hAKCqBKBRKJgCh4FMCGBjALgHS4BOO+miANpgLaYB2+AFFnkQGInYDm9TAGgAEDAK5Uqw0JBgJkEVGwLEy2CtTqMWHGgA9hAbzRChAB2wATCwEsGPACoB7UwC4hAIgDM7gcaHYqax4GAE03d1wtTBIfPwCghgANcMimaNiTAAtMIMz8cIBGAAYigFIMoR4SRwB3N3wSUUw0AF8pcCg4JBRgJSJSckoafhZ3a1oeHyEjEwBnfABPGjcZkyEa6wt8TPCAFiLTXXc-Nr9ZklxwvPxTWZdgYCIqBeBaUUyACWOWgEp2mS68kUOGUAzUQ00TGYHxwNjshj8NAAbpgqOEAEzfYTuADKpGspnwQgsmCEAHlTLZrAAdXSITyOdx-ITSTpyHp9FSDDQjZhjCZTVbzJaYFZ+EwbLY7Dz7Q7HEynOYXK74G53B5PF5vT7fH7M1myboKXog-qqdTDLTMHSYfTTPw8bCuDzeXwmeLBZIeVIUGKtf5so3A9hc8E8q02u2rGxkAjWRwMFKOKiiWgMCqO53uXZYlkdQ1Ak0hsEWyEsABCjijfnMVlsDmchUx-rzAPZxs5JYhvPstvwCJMuGTjhI4TAADYAGYAdnH04sufcADlaRwAIL0arE0kUGiThOijz6-OAjmm0Olnt94RiCTCADCCYouiIPEw+AAatgSNZsAAjGg+VMTIDwgMRaD-dI9WPNsgyLUFzW7K1KztW9JFbQNC07RDwyhXsXwHIQhyoEcxynWd50XaBsFmWZHCEAomQDAsz2LHDLTw68RHEdD3HvVNTB-EZsCEejcECKIhFJW1TECXARIARyaUShFoRx8GsJF6IsETcEybBaEsETaUQABOUS-19UTKQYGk6QZIQ6L-MgVIYRxaPo2ZoiROzEGnRk9WY08O3PLtcIrKsbx4oL22DBDuQ4lh8P7e1B2HUcPAnGc5wXFt3GojyhExGDMNY+Kw0S5hkqiu8PAARSaeZ4wYESvJUtSNK04ldP0wydP8NIfxHIRJ2sIdRCEMg6KoHyLACkqWJCtiErLZgUJq9CDWCuKzRWq8CNSoj0rI7LKLygq6KEbwFu2+Ddoq1bqu42r3AazAmoTVrSUcYARN4SSlNJcEGBJCaeoMoyRscawhFXNcNKoEQRKm5NRBM6cTIcuazGqAC6GwJkbtiu6LyQqF1uezaT2J7C9qtJ7VmI0jMvInKqJoy6cyJuDaYe-aUrQ7E1yqSxMEifwxIktIzFRcG+pE0kSVmUxMBJABaChCeggBuIA",
"exits":[
]
}
},
"name":"Portuguese Script (Specific Phone)"
},
{
"id":"201771aa-eab3-49af-9744-b69b18aa7ee9",
"type":"render-view",
"position":{
"x":1085,
"y":200
},
"data":{
"configuration":{
"code":"<Flex paddingTop=\"3\" alignY=\"center\" alignX=\"center\" height=\"100%\" grow>\n <img style={{width: \"8%\"}} src=\"https://t.ly/6hAB\"/>\n <Heading level=\"2\">Script Português</Heading>\n</Flex>\n<Flex gap=\"3\" alignX=\"center\">\n <Flex direction=\"column\" gap=\"4\">\n <Box paddingTop=\"12\">\n <Text color=\"#6f767d\">Passo 1</Text>\n <Text>Cumprimenta o cliente e pergunta como podes ajudar</Text>\n </Box>\n <Box>\n <Text color=\"#6f767d\">Passo 2</Text>\n <Text>Procura informação que possa ajudar a resolver o problema do cliente</Text>\n </Box>\n <Box>\n <Text color=\"#6f767d\">Passo 3</Text>\n <Text>Tira notas para guardar informação para futuras interações</Text>\n </Box>\n <Box>\n <Text color=\"#6f767d\">Passo 4</Text>\n <Text>Pergunta se podes ajudar com mais alguma dúvida (e repete os passos 2-4 se necessário)</Text>\n </Box>\n <Box>\n <Text color=\"#6f767d\">Passo 5</Text>\n <Text>Agradece ao cliente pela chamada e despede-te</Text>\n </Box>\n </Flex>\n</Flex>",
"compiled_code":"PQKgxA+hAKCqBKBRKJgCh4FMCGBjALgHS4BOO+miANpgLaYB2+AFFnkQGInYDm9TAGgAEDAK5Uqw0JBgJkEVGwLEy2CtTqMWHGgA9hAbzRChAB2wATCwEsGPACoB7UwC4hAIgDM7gcaHYqax4GAE03d1wtTBIfPwCghgANcMimaNiTAAtMIMz8cIBGAAYigFIMoR4SRwB3N3wSUUw0AF8pcCg4JBRgJSJSckoafhZ3a1oeHyEjEwBnfABPGjcZkyEa6wt8TPCADnK-Nr9ZklxwvPxTWZdgYCIqBeAANkyAQQAhd1aASnaZLvkihwygGaiGmiYzAAEjgbHZDH4aAA3TBUcIAJi+bQ8AGVSNZTPghNBHCR8KIeKIADq6RCvWbub6-ITSTpyHp9FSDDQjZg6TD6aZ+HjYVweby+EzxYLJDypCgxVp-NndBS9YH9VTqYZaPl6BEmGxkAjWRwMFKOKiiWgMCoisXuAAsWOVslVQPYXLBPN170cgtW5istgczkKmKVLI6bsB6s9oO1EJY9gF+ANQlwltJ4TATwAZgB2J4FiwujzQbCzWaOIQFRmugEcjVexO8lO6NMicSSDwAYWtphI4y02CENdwgSiQkwZmilKYo8ztBrpkcFkws38ACtRBZsDEmQ32WrOQnwby-YKxBIj+64yCtefde3O6tM1Rsx5c4Xi6XI+4KyrGtMWZVkYybeNHx9SEX2Ea8ewA6pcFEbghFsPNSVobAaUQAscM8GsAEcmjMRwq1HbAdz3Eh-CEMhqyoFEaJXaoACNhlHCxx0nNJGVA6NGxPZsz2glhLzg7tb1jU8oJ1GDU3Td9P3cb8ixLMsAMrashG8fj-mPD0H25OTkwUrsbw8exrFQhhHHwSszH3UdKX3ai0IYDCSCwnC8NpAjHNQvNRHJbhN1sBVsNpXyOAAVg3PipIgozvRM5hxPMnswMEwzNWMpNmFgoUTCUkgc3zNS-2xTSgKEZ09JVaThNk-LCvg4QALnUQFyEWYZ1XddN0o3d9wzRxaCELDrEGqhKSwoQLBpDhXiRTZR2YGcyFMTAKDHTdzCAzd0QAWkdHqZwYTBIirHCCiHRxvgSqN9LvGS8ovf0JIsrKDPvXKUpasy3yzUqv3K38NMA7SYvrJ6GqSv7W2fMy2o8V4qksS6Z2wbjrCnLaqEXTJsCwvdp3mjctvXI6KD4plvgAbiAA",
"exits":[
]
}
},
"name":"Portuguese Script (General)"
}
],
"edges":[
{
"id":"reactflow__edge-6f5ab4ae-7629-447b-b567-68664884eda8trigger-exit-07c41519-5ad0-408e-ad24-1d42c69696fetarget-1",
"source":"6f5ab4ae-7629-447b-b567-68664884eda8",
"target":"07c41519-5ad0-408e-ad24-1d42c69696fe",
"source_handle":"trigger-exit",
"target_handle":"target-1",
"type":"edge"
},
{
"id":"reactflow__edge-07c41519-5ad0-408e-ad24-1d42c69696fee3e2284b-ffcc-4130-84f3-d58de8512a20-28186be8-4ab9-4c6f-af52-5246958d089ftarget-1",
"source":"07c41519-5ad0-408e-ad24-1d42c69696fe",
"target":"28186be8-4ab9-4c6f-af52-5246958d089f",
"source_handle":"e3e2284b-ffcc-4130-84f3-d58de8512a20",
"target_handle":"target-1",
"type":"edge"
},
{
"id":"reactflow__edge-07c41519-5ad0-408e-ad24-1d42c69696fedce311d7-fb04-42a1-bd7f-19001c9d6162-d9f91201-3fae-4879-891e-130f2a59b668render-view-target",
"source":"07c41519-5ad0-408e-ad24-1d42c69696fe",
"target":"d9f91201-3fae-4879-891e-130f2a59b668",
"source_handle":"dce311d7-fb04-42a1-bd7f-19001c9d6162",
"target_handle":"render-view-target",
"type":"edge"
},
{
"id":"reactflow__edge-07c41519-5ad0-408e-ad24-1d42c69696feexit-fallback-868288a6-d781-42d9-974b-0ee7cc751a59render-view-target",
"source":"07c41519-5ad0-408e-ad24-1d42c69696fe",
"target":"868288a6-d781-42d9-974b-0ee7cc751a59",
"source_handle":"exit-fallback",
"target_handle":"render-view-target",
"type":"edge"
},
{
"id":"reactflow__edge-28186be8-4ab9-4c6f-af52-5246958d089f94a1b11c-139d-411f-b51b-d1f7284a09b2-3bcd8707-5347-4d85-a540-3511e1ffe1aarender-view-target",
"source":"28186be8-4ab9-4c6f-af52-5246958d089f",
"target":"3bcd8707-5347-4d85-a540-3511e1ffe1aa",
"source_handle":"94a1b11c-139d-411f-b51b-d1f7284a09b2",
"target_handle":"render-view-target",
"type":"edge"
},
{
"id":"reactflow__edge-28186be8-4ab9-4c6f-af52-5246958d089fexit-fallback-201771aa-eab3-49af-9744-b69b18aa7ee9render-view-target",
"source":"28186be8-4ab9-4c6f-af52-5246958d089f",
"target":"201771aa-eab3-49af-9744-b69b18aa7ee9",
"source_handle":"exit-fallback",
"target_handle":"render-view-target",
"type":"edge"
}
]
}
],
"metadata":{
"type":"WORKSPACE_DESIGNER_CARDS",
"variables":[
{
"id":"fe89c1b2-cd4d-470b-8e89-c045bd158aa9",
"name":"phone_number",
"configuration":{
"source":"workspace",
"path":"active-conversation.contact_person_number"
},
"type":"CUSTOM"
},
{
"id":"80dfab71-0264-4a67-a460-a5150d8f744c",
"name":"active_user_id",
"descriptioni18n_key":"workspaceDesignerCards:system.variables.active_user_id",
"type":"SYSTEM"
},
{
"id":"c09d303b-4fb6-4038-806e-317e0938669f",
"name":"active_user_email",
"descriptioni18n_key":"workspaceDesignerCards:system.variables.active_user_email",
"type":"SYSTEM"
}
]
},
"schema_version":"1.0.0"
}
2 - In the card automation configuration, click the ...
and then select the Import version option (Figure 19 - 1).
3 - A modal will open (Figure 20). There, insert the JSON file and click the Confirm button (Figure 20 - 1).
4 - The automation's version (which consists of the card flow created in this tutorial) is then successfully imported, as shown in Figure 21.
Additional Resources
- Variables
- Render View
- Cards, Panels, and Canvas
Troubleshooting
If you have questions or technical issues, please open a ticket using this form.
Updated 12 months ago