How to set up an information card for Webphone?

Before we start, we check the following steps:

1. Ensure that our package includes API and Webhook features.
2. Make sure the Hipcall Google Chrome Extension is installed in our browser.

Retrieving Phone Number and Call UUID from Webhook

First, we set up the webhook to obtain the call's UUID when the call starts.

Every time a call starts, a JSON data like the one below is POSTed to you via the HTTPS protocol.

{
    "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": "905438856301",
        "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": "+902582440032",
        "record_url": null
    },
    "event": "call_init"
}

Here, you can retrieve the UUID of the call and the customer's number. For this call:

• UUID: "2483a75a-56a2-41f1-991b-92b1667e324a"
• Customer number: is 905438856301 in the callee_number field.

There is an important note regarding the customer number. If the call direction is outbound, the customer number is in the callee_number field; if the call direction is inbound, the customer number is in the caller_number field.

Creating Card Information Based on Customer Number

You need to create the information to be displayed as a card in the webphone from your database or CRM system based on the customer number as follows.

{
  "card": [
    {
      "link": "https://my-crm.com",
      "text": "My CRM",
      "type": "title"
    },
    {
      "label": "Full Name",
      "link": "https://my-crm.com/contact/1234",
      "text": "Onur Ozgur OZKAN",
      "type": "shortText"
    },
    {
      "label": "Company",
      "link": "https://my-crm.com/company/1234",
      "text": "Acme Inc.",
      "type": "shortText"
    },
    {
      "label": "Type",
      "text": "Old customer",
      "type": "shortText"
    },
  ]
}

Reviewing the JSON above, you will see there is 1 title and 3 label => value pairs in the webphone.

My CRM

• Full Name: Onur Ozgur OZKAN
• Company: Acme Inc.
• Type: Old customer

Since the Full Name and Company fields have a URL, clicking them will open the provided URL in a new tab. There is no such situation for the Type field.

Important Considerations:

• Since the webphone's area is narrow and small, it is recommended to send a maximum of 3-4 fields.
• The phone number standard is E164. Numbers will come to you not as 532620xxxx or 0532620xxxx but as 90532620xxxx.

Sending Card Information to Webphone via API

For this operation, we use the POST => /api/v3/calls/{call_id}/cards endpoint in the Hipcall API. You can test it live from the API documentation if desired.

You need to 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.

Your Questions

You can ask us questions via our Developer Community forum.