Customer Support Model App using Hypi’s low code backend

Low-code
, ,
#1

After building Meal Delivery App, we will model Customer Support App (You may call it Zendesk clone!)

So, here are the features of Customer Support app:

  • Add Users of the App
  • Create Ticket
  • Send Messages
  • Update Ticket Status

Here is your sample schema for the Customer Support App:

A) User data type stores user Information. Inbuilt data type Account from core tables stores the user details. The users can be end-users or customers and staff members.
B) Ticket data type stores the Ticket Information.
C) Message data type stores the details of the messages exchanged between the customer and the ticket assignee while solving the ticket.
D) There are various Enums which are self explanatory.

type User {
    user: Account
    userType: USERTYPE
    note: String
    access: ACCESS
    tags:[String]
    organization: String
    timeZone: String
}
 
type Ticket {
    requester: User
    assignee: [User]
    followers:[User]
    tags:[String]
    subject: String
    messages:[Message]
    currentStatus: STATUS
}
 
 type Message {
    text: String
    from: User
    to: User
    cc: [User]
    file: File
    replyType: REPLYTYPE
    replyto: Message
    status: STATUS
}
 
enum STATUS {
    NEW
    OPEN
    PENDING
    SOLVED
}
 
enum ACCESS {
    VIEW
    VIEWEDIT
}
 
enum REPLYTYPE {
    INTERNAL
    PUBLICREPLY
}
 
enum USERTYPE {
    ENDUSER
    STAFFMEMBER
}

Create a Customer Support App on Hypi’s low code platform (Give it a good name!) Create a release and an instance. Enter the above schema in the release.

Now, let’s implement the following use cases in the Customer Support App.

=================================================================

Add Users

i) Create User Objects to store user information. You need to create Account of each user on Hypi.

Use hypi.id of the Account created in the user field of User data type. This will save Account profile information for a particular user. Save necessary information like User type and provide the access. Staff members will have View/Edit access and the end users will have just View access.

Use this guide on how to insert data in an instance. You may write your own User defined function to create objects or use the variables method of Object creation as shown below.

Create multiple objects of User data type. For convenience, just one example has been provided here.

mutation Upsert($values: HypiUpsertInputUnion!) {
    upsert(values: $values) {
      id
    }
  }
#result
{
  "values": {
      "User":  [
        {
          "user": {"hypi":{"id": "01FQEJNJAR4WV9NMHJTA7P93JM"}},
          "userType": "STAFFMEMBER",
          "note": "Hypi Staff",
          "access": "VIEWEDIT",
          "organization": "Hypi",
          "timeZone": "GMT"
        }
      ]
    }
}

=================================================================

Create Ticket

Let’s say the customer has some issue with your product/service. So he will raise a ticket. Save this ticket information entered on the user interface into a Ticket object. Saving requester, assignee,followers information just requires storing hypi.ids of the User objects created.

Let’s create a Ticket Object…

{
  "values": {
      "Ticket":[ {
        "requester": {"hypi":{"id": "01FQEKKG2FG13CB96827R370WZ"}},
    		"assignee": {"hypi":{"id": "01FQEKN77FAJA3FW223W45JTC5"}},
    		"followers":[{"hypi":{"id": "01FQEKEN4TRD2RSNDW7V0M1CTT"}},{"hypi":{"id": "01FQEKPC53PP9E5RBYGMD06GRP"}}],
    		"tags":["login","authorization"],
    		"subject": "Unable to login",
    		"messages":[
          {
               "text": "Please check login issue",
               "from": {"hypi":{"id": "01FQEKKG2FG13CB96827R370WZ"}},
               "to": {"hypi":{"id": "01FQEKN77FAJA3FW223W45JTC5"}}
               "cc": [{"hypi":{"id": "01FQEKEN4TRD2RSNDW7V0M1CTT"}},{"hypi":{"id": "01FQEKPC53PP9E5RBYGMD06GRP"}}]    
          }
        ],
    		"currentStatus": "NEW"
        }
      ]
    }
}

==================================================================

Send Messages

Use the hypi.id of the Ticket object to update the log of the Messages exchanged between requester and assignee. replyto field holds the details of the previous message. This field helps to keep track of the sequence of the messages.

‘Internal’ replyType is just a note for other staff members to check. The requester will not be able to see it. ‘PublicReply’ goes to everyone in the ‘cc’,’to’ fields.

{
  "values": {
    "Ticket": {
      "hypi": {
        "id": "01FQEW7H492C6R0Q648QPRRXMQ"
      },
      "messages": {
        "text": "invalid authorization",
        "replyType": "INTERNAL",
        "replyto": {
          "hypi": {
            "id": "01FQEW7H4CX76ANZJ3DTT2655W"
          }
        }
      }
    }
  }
}

{
  "values": {
    "Ticket": {
      "hypi": {
        "id": "01FQEW7H492C6R0Q648QPRRXMQ"
      },
      "messages": {
        "text": "Login issue solved. Please check",
        "from": {
          "hypi": {
            "id": "01FQEKN77FAJA3FW223W45JTC5"
          }
        },
        "to": {
          "hypi": {
            "id": "01FQEKKG2FG13CB96827R370WZ"
          }
        },
        "cc": [
          {
            "hypi": {
              "id": "01FQEKEN4TRD2RSNDW7V0M1CTT"
            }
          },
          {
            "hypi": {
              "id": "01FQEKPC53PP9E5RBYGMD06GRP"
            }
          }
        ],
        "replyType": "PUBLICREPLY",
        "replyto": {
          "hypi": {
            "id": "01FQG7SRNBKGNB2RDXSKA1E3P7"
          }
        }
      }
    }
  }
}

================================================================

Update Ticket Status

Update the Ticket Status as and when it changes.

{
  "values": {
      "Ticket":  {
        "hypi": { "id": "01FQEW7H492C6R0Q648QPRRXMQ"},
        "currentStatus": "SOLVED"
         }
    }
}

=================================================================

This was just a basic framework to build a Customer Support App. You may add more functionality as per your requirement.

Hypi is happy to help with the implementation!

Build Invoice Creation App using Hypi’s low code API