What Is an Information Card and How Do You Set It Up?

Before you start, check the following:

Make sure your plan includes the API and Webhook features.
Make sure the Hipcall Google Chrome Extension is installed in your browser.

Getting the phone number and call UUID from the webhook

First, set up the webhook so that you can get the call's UUID when a call starts. To do this, you can read our article What Are Webhooks And How To Organize Them
.

Every time a call starts, JSON data like the following is POSTed to you over HTTPS.

{
    "data": {
        "hangup_by": null,
        "call_flow": [
            {
                "action": "init",
                "detail": {
                    "id": null,
                    "type": "contact"
                },
                "timestamp": 1731840060
            }
        ],
        "callee_type": "contact",
        "number_id": 328,
        "first_touch_duration": null,
        "channel_id": 328,
        "answered_at": null,
        "voicemail_type": null,
        "caller_id": null,
        "call_duration": null,
        "callback_cdr_uuid": null,
        "missing_call": null,
        "related_id": null,
        "callee_number": "90543XXXXXXX",
        "uuid": "2483a75a-56a2-41f1-991b-92b1667e324a",
        "callback_time": null,
        "related_type": null,
        "ended_at": null,
        "caller_type": null,
        "credited": null,
        "channel_type": "number",
        "voicemail_url": null,
        "callee_id": null,
        "user_id": null,
        "missing_call_reason": null,
        "started_at": "2024-11-17T10:41:00Z",
        "bridged_at": null,
        "voicemail_id": null,
        "contact_id": null,
        "callback_user_id": null,
        "direction": "outbound",
        "caller_number": "+90258XXXXXXX",
        "record_url": null
    },
    "event": "call_init"
}

Here you can get the call's UUID and the customer's number. For this call:

UUID: "2483a75a-56a2-41f1-991b-92b1667e324a"
Customer number: 90543XXXXXXX, the value in the callee_number field.
There is an important point to watch for with the customer number. If the call's direction is outbound, the customer number is in the callee_number field; if the direction is inbound, the customer number is in the caller_number field. If you want more detail, you can find it in our article Call Records: Comprehensive Data Guide

Creating the card information from the customer number

Based on the customer number, build the information to be displayed as a card in iOS, Android, or the webphone from your own database or CRM system, like this:

{
  "card": [
    {
      "link": "https://my-crm.com",
      "text": "My CRM",
      "type": "title"
    },
    {
      "label": "Ad soyad",
      "link": "https://my-crm.com/contact/1234",
      "android": "yourapp://contact/id=1234",
      "ios": "yourapp://company/id=1234",
      "text": "Ayse Y.",
      "type": "shortText"
    },
    {
      "label": "Firma",
      "link": "https://my-crm.com/company/1234",
      "android": "yourapp://company/id=1234",
      "ios": "yourapp://company/id=1234",
      "text": "Acme Inc.",
      "type": "shortText"
    },
    {
      "label": "Tipi",
      "text": "Eski müşteri",
      "type": "shortText"
    }
  ]
}

If you look at the JSON above, you will see that the webphone shows 1 title and 3 label => value pairs. If you have an iOS or Android app, you can open it from the Hipcall Mobile app in the same way. Use the ios and android fields for this.

My CRM

Full name: Ayse Y.
Company: Acme Inc.
Type: Former customer
Since Full name and Company carry a URL, clicking either one opens that URL in a new tab. The Type field does not behave this way.

Things to keep in mind:

Because the webphone's space is narrow and small, send at most 3-4 fields.
Phone numbers follow the E.164 standard. Numbers will reach you not as 532620xxxx or 0532620xxxx but as 90532620xxxx.

Sending the card information to the webphone with the API

For this, use the POST => /api/v3/calls/{call_id}/cards endpoint in the Hipcall API. If you like, you can test it live in the API documentation.

Send the UUID of the call received from the webhook as CALL_ID, and the JSON you created in the previous step as the BODY.

Questions

You can ask us your questions in our Developer Community forum.

Next steps

Work through the Automatically Routing Incoming Calls Based on CRM Data guide to learn how to match the caller's phone number against your CRM records and automatically route calls to different extensions based on the customer's status.