Workflows

There may be times when you want to trigger a workflow to run an automation manually, instead of waiting for an update within Kustomer to trigger the workflow. Currently, a Kustomer workflow can be triggered to run by a number of different reasons, including actions such as, conversation update, customer create, and note create. 

Users and organizations will oftentimes make manual changes to a Klass by adding a tag or changing the value of an attribute to trigger a workflow. However, there are also alternative options, such as creating an insight card with buttons that send data and trigger workflows to make updates. In this article, we will go through how to set up a simple insight card that has buttons to manually change a custom attribute on the conversation Klass.

In this article

• Create a Form webhook
• Create a workflow
• Create an Insight Card

Create a Form webhook

1. Go to Settingsand select Platform > Inbound Webhooks.
2. Select Add Inbound Webhook
3. Enter a Name and Description for the webhook.
4. Then, select Form as the webhook type.
   
5. Select Create
6. On the Inbound Webhooks page, go to the Form Hooks tab, find your newly created webhook , select the menu icon , and the select Copy Hook Address. 
   Store the hook in a secure location as you will need it for future steps.

   Note: We recommend turning on the debug logs for the webhook to make troubleshooting any errors much simpler and also give you additional insights into the data. You can do so by selecting the edit icon to edit the webhook and turning on the Debug option.

Create a workflow

1. Go to Settingsand select Platform > Workflows
2. Select Add Workflow.
3. Select Custom Workflow to create a new workflow from a blank state.
4. Enter a Title and Description for the workflow.
5. Select the first trigger event and then change the Trigger App to Hooks and the Trigger Event to your newly created webhook.
   

From here you can cater the workflow to run for whatever action you’d like. You can learn more about workflows here. In this example, the workflow changes a custom conversation attribute to “true” and adds a tag to the conversation. Here is a brief overview of the workflow. Step 2 shows how to target the Conversation ID that will be coming over from a button click in our insight card in the following steps. 

Create an Insight Card

1. Go to Settingsand select Platform > Klasses.
2. Select Create Insight Card.
3. Enter a Name and option Icon for the Insight Card.
4. Select View Code in the bottom left, then Convert to Code. 
5. 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.

6. Select Convert to Code.
7. Copy and paste code snippet below into the Code tab

   // 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 omitter(e) {
    e.preventDefault();
    const conversationId = document.getElementById("conversationId").value;
    
      fetch(convoPut, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          conversationId: conversationId,
        })
      })
   }
    
   <form id="omit">
    <input type="hidden" id="conversationId" name="conversationId" value="{`${_.get(conversation,">
    <input type="button" value="Omit Convo"> omitter(e)}/&gt;</form>

8. Select Save Changes.

You should see an insight card with a single button when viewing a conversation. 

The final step is to add the URL of the form webhook to the first line of the CSAT Omit insight card. This URL is what we saved earlier in step six of the Create a Form webhook procedure above. Adding the URL here is 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 setup builds upon Kustomer’s existing capabilities and can be quite valuable to understand how the connection works to build even more complex Insight Cards.