Customize the Kustomer view

Insight Cards allow you to display attributes that are most relevant to your agents, such as additional customer details or their individual CSAT score. Insight Cards can also be used to support complex integrations and access data from across the platform, and even pull data from 3rd party APIs and resources.

This article will walk through an example of using the KustomerRequest method to make an API call from an Insight Card and display some data from that response in the card. This will be a very basic example of how this method can be used, but you can extend these concepts to create even more powerful integrations.

In this article

• Prerequisites
• Create the Button and contentArea
• Add the KustomerRequest method
• Additional practice

Prerequisites

Before beginning this tutorial, you should have a general understanding of the Kustomer cards SDK and how it works. You will also benefit from having some general familiarity with the Kustomer Cards Methods and what they are used for.

Lastly, you should be comfortable working inside the Insight Card code editor. While it's possible to build Insight Cards entirely with the visual editor, you will need to know how to use the code editor and understand basic JavaScript to add these methods to your card.

Create the Button and contentArea

The first step is to add the Button attribute and contentArea to the Insight Card. The button will be used to submit the API request, and the contentArea will be where the data returned from that request is shown. The simplest approach will be to use the Button component from the Kustomer component library. This will pass the default styling to the button and allow you to easily add an onClick handler.

1. First, you will need to add an opening and closing button tag. Make sure the B is capitalized so that you are using the Kustomer Button component and not the standard button HTML element.
2. Then, give the button some text to describe what it does. This text will be added between the two tags. In this example, we are going to be getting the customer's email address, so the button can say Get Email.
3. Add an opening and closing <div> tag that will wrap the entire block of code, which will allow the addition of multiple components.
4. Next, create another div under the button component. Give this div an ID of contentArea. This ID will be used later to target that div and insert a customer email address. 
5. Then, set up the onClick handler. This will trigger an action when the button is clicked. Add onClick={() => {}} inside the opening <Button> tag. You will add the action to perform inside the second set of curly brackets.
6. Last, we'll run a test using the console to ensure the onClick handler is set up correctly. To test this, add console.log("clicked") inside the curly brackets. Now when you select the button with the console open, you will see "clicked" each time you press the button.

If the test was successful, you're ready to add the request method.

Add the KustomerRequest method

1. To utilize the Kustomer API in your card, you will need to call the KustomerRequest method from inside the onClick handler. Use async/await to do this asynchronously. Start by adding async () => {await KustomerRequest({}) inside your onClick handler.
2. Once the request method has been added you can begin constructing your requests. For this example we are going to do a GET request to the customers endpoint to get the current customer's email address.
   • For the URL, add the path /v1/customers/:customerId. Get the ID from the context that is readily available within the card by using customer.id.
   • For the method, use GET.
   • It won't be required to add a request body or header for this example, because the request method automatically generates a token to authenticate the request. However, if you were doing a POST or PUT request you would construct your body in the same way.
3. Because this is a GETrequest, you will want to see some data. To do this, you'll need to access the response from the request.
   • After the closing parenthesis from KustomerRequest, add .then((response) => {}).
   • The response for the original API Request will be available by targeting the response attribute. You can then manipulate and use that data.
   • Pull the customer's email address by targeting response.data.attributes.emails[0].email.
   • This value will be in JSON format, so we need to use JSON.stringify() to convert it into a string in order to display the value in the card.
   • Now that you have the stringified version of the customer's email address, use getElementById to target the content area that was created earlier and add a paragraph element inside the original div to show the customer's email address. 

Additional practice

After you're comfortable with the basics of using the KustomerRequest method, here are some other things you can try.

• Try making a POST or a PUTrequest to one of the Kustomer API endpoints to create or update the Customer, Conversation, or another Klass.
  • To do this you will need to change the method to PUT or POST as well as add a request body.
  • This is an example of a PUT request to change a customer's name.
• Try making a GETrequest to an external API.
  • This may require you to add a form of authentication in the request as a header to authorize the request.
  • The types of headers will differ for each API.