Make requests to external API within Kustomer
Last Update: Aug 2022 • Est. Read Time: 2 MINRecommend pre-reading:
- Understanding Hooks
- Test and Debug Workflows Using Logs
- Klass Views
- Calling a Rest API within a workflow
- Kustomer Card SDK (for Option B only)
There are two options for giving agents the ability to make requests to an external API with the press of a button.
Option A - Klass View Embedded Workflow Button
1. Create a workflow with a Form Hook following the instructions in “Understanding Hooks”.
2. Create a new Klass View with a View Location of “Insights Panel Card”, Data Source of the Klass of object you want the button to appear on while viewing (we will use kobject.order for this example) and paste in this code:
<Button onClick={() => { fetch( "HOOK_URL", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({kobject, customer}) } ); }} > Cancel </Button>
HOOK_URL will be the URL of the Form Hook that you created in step 1.
kobject and customer are JSON payloads representing of the timeline object and customer being viewed when the button is clicked.
The resulting button in the timeline will look like this:
3. We can now build out our workflow with a Rest API JSON step using the data submitted by the button. Use the Workflow Logger to inspect the JSON body of the data posted by the hook to build and troubleshoot your workflow.
We can also add text inputs for agents to enter additional information before submitting. The input elements available are the standard HTML Form Elements. Use the JavaScript DOM getElementById method to pass the input value in the JSON payload posted to the form hook.
<div> <div> <label>Reason</label><br/> <input id="cancel-reason"/> </div> <br/> <Button onClick={() => { fetch( "HOOK_URL", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ kobject, customer, cancellationReason: document.getElementById('cancel-reason').value, }) } ); }} > Cancel </Button> </div>
Option B - iFrame embedded Card
This approach allows you to embed a context card using our Kustomer Card SDK. Using the SDK allows you to develop and host an HTML/JavaScript page to interact with Kustomer without using the Klass View editor. This SDK will allow your context card to easily fetch information about the customer/object currently being viewed in the Kustomer timeline and use it to render your card and make API requests. The main benefit to using the SDK over the Klass View editor is that developers can build the card within their own development environment and use their own dependencies instead of working within the Klass View Editor.
Once your card/iFrame is created, your company will be responsible for hosting it. Once hosted, create a new Klass View with a View Location of “Insights Panel Card” and a Data Source of the Klass of object you want the iFrame to appear on while viewing. You can then embed the card following the instructions in our developer documentation to embed your iFrame: Kustomer Apps Platform: JSX in Kustomer
Your card can either make a direct call to an external API or post to a Kustomer Form hook to kick off a workflow as per Option A.