Often times there may be actions in Kustomer that take multiple button clicks to get the desired action you want to take. Whether that be setting the duration of how long to snooze a conversation, change the value of a standard or custom attribute on a class, or assign a conversation to yourself. To make this process easier you might find it useful to set up a button, that takes some kind of action with one click of a button.
This can be done with a little work up front, but will save you time in the long run. By creating an insight card with a simple button that triggers a workflow you can perform a number of different actions with one click of a button. Today we will go over how to set up an insight card with one button, that triggers a workflow that then assigns the conversation to yourself. The JSON shared for the insight card and workflow can also easily be changed to cater to your specific needs,
What we’ll need
To successfully set this up we are going to need to set up three different areas within our Kustomer instance. First, we’ll need to create a Form webhook to send the data to. This will come from the conversation timeline where we click our “Assign to Me” button. Second, we’ll need to build a simple workflow using that webhook to ingest the data that is sent from the conversation, so we can perform our desired actions. Lastly, we’ll create a basic insight card that houses the button on our conversation Klass that will capture the specific conversation data needed to send to the webhook.
Webhook
Webhooks are a flexible way to sync your data between Kustomer and third party applications. For this use case we will be using webhooks to sync data internally within Kustomer. There are three different types of webhooks within Kustomer. Form Hooks, Webhooks, and Email Hooks. For our use case we will be use a Form Hook. You can read more in depth about Inbound Webhooks in our Kustomer Help Center. Let’s go through the steps to create a Form Webhook now.
-
Go to Settings > Platform > Inbound Webhooks
-
Select Add Inbound Webhook
-
Give the webhook a Name and a Description
-
Select Form as the webhook type.
-
Select Create
-
Find your newly created webhook and click the three dots to copy the hook address. Store this somewhere as you will need it for future steps.
Additionally, it is not required, but we recommend turning on the debug logs for the webhook. This will make troubleshooting any errors much simpler and also give you additional insights into the data. You can turn the logs on by selecting the pencil icon to edit the webhook and then toggle on the Debug option.
Workflow
Workflows are incredibly powerful within Kustomer and can run all kinds of automations, and give you the ability to connect a myriad of different applications. You can read more about workflows and get additional training through the Kustomer Help Center. The workflow we will be building for this application is pretty simple but gives you a basis to build future automations on. Let’s go through those steps now.
-
Go to Settings > Platform > Workflows
-
Select Add Workflow
-
Select Custom Workflow to create a new workflow from a blank state
-
Give the workflow a Title and Description
-
Change the first step Trigger App to Hooks and the Trigger Event to your newly created webhook
From here you can tailor the workflow to fit your needs. For this use case where I am creating a workflow to assign myself to a conversation on a button click I would need to add to additional steps.
-
Add an Action step with a Conversation: Lookup (by ID) event to capture the conversation ID from step one. Use /#steps.1.attributes.data.conversationId in the ID field to use the conversation ID from step 1.
-
Add an Action step with a Conversation: Update event. Use /#steps.1.attributes.data.userId in the assigned user's field to assign the conversation to the user who clicked the button in the insight card.
-
Select Save
Insight Card
Now that we have the webhook setup to send data from the insight card to the workflow, and the workflow setup to capture the data and run our automations. Let's set up the insight card to pull everything together and finish up. The insight card will be created on the Conversation Klass level using the steps below to set up a Code Editor insight card.
-
Go to Settings > Platform > Klasses
-
Select Create Insight Card
-
Give the Insight Card a Name and option Icon
-
Select View Code in the bottom left, then Convert to Code
-
Fill out the form with the word CONVERT
Note: This is a permanent action, and you will not be able to then convert this Insight Card back to a visual card.
-
Select Convert to Code
-
Copy and paste code snippet below into the Code tab
-
Select Save Changes
// const convoPut = 'FORM HOOK GOES HERE'
// Example with form hook -> const convoPut = 'https://api.kustomerapp.com/v1/hooks/form/60b906379e2843533971e874/2fd70fbcf4c9e2892c7c52dfced79445bf4d288279548c400ba78013594fa57f'
const data = this;
const labelStyle = { 'margin-left': '5px' };
const inputStyle = { width: '95%', display: 'block', 'margin-left': '5px', 'margin-bottom': '5px', 'margin-top': '2px', height: '25px', 'font-weight': '600', 'border-radius': '5px' };
const textareaStyle = { width: '95%', display: 'block', 'margin-left': '5px', 'margin-bottom': '5px', 'margin-top': '2px', height: '100px', 'font-weight': '600', 'border-radius': '5px' };
const buttonStyle = {
width: '95%',
background: '#52AAFF',
padding: '5px',
border: 'none',
margin: '5px',
color: 'white',
fontSize: '1.1rem',
fontWeight: '500',
fontFamily: ''Neutral Std', 'Helvetica Neue', Arial, Helvetica, sans-serif',
borderRadius: '5px',
height: '2.2em',
cursor: 'pointer',
marginBottom: '10px'
};
const centerAlign = { textAlign: 'center', marginTop: '10px' };
const state = {
payload: {},
kobjects: [],
};
function assigner(e) {
e.preventDefault();
const conversationId = document.getElementById('conversationId').value;
const userId = context.user;
fetch(convoPut, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
conversationId: conversationId,
userId: userId
})
})
}
<form id='assign'>
<input type='hidden' id='conversationId' name='conversationId' value={`${_.get(conversation, 'id' )}`}/>
<input type='button' style={buttonStyle} value='Assign' onClick={(e)=> assigner(e)}/>
</form>
Now if everything is set up correctly you should see a simple insight card with a single button when viewing a conversation.
Now all we need to do is add the URL of the form webhook to the first line of the insight card. This URL is what we saved earlier in step number six of the Webhook steps above. Adding the URL here will be the connection between the button on the conversation timeline that sends the data to the workflow we built. Clicking the button in the insight card will capture the conversation ID and then send the ID to the workflow.
This is a pretty basic setup and simply builds upon Kustomer’s existing capabilities. But can be quite valuable to understand how the connection works to build even more complex Insight Cards.
If you need any assistance with any steps, troubleshooting any errors, or simply some advice on how this setup can help out your organization please reach out to support@kustomer.com