Building a Twilio Dashboard with Syncfusion Dashboards

In this business world, secure and automated communication plays a vital role in success. Twilio offers a platform for this. This article will walk you through building an activity dashboard with your Twilio data with which your support team can track phone calls made and received, messages sent and received over time, and their costs using Syncfusion Dashboards.

If you are new to Syncfusion Dashboardsregister for a free trial on our website. At the end of the registration process, you will reach the following page view.

homepage view of syncfusion dashboards to build twilio dashboard with syncfusion dashboards
Homepage view of Syncfusion Dashboards

What is Twilio?

Twilio is a cloud communications platform offering communication APIs for developers to make, receive, and control phone calls and messaging from apps, embed live video and audio in apps, and perform authentication. Through these web service APIs, businesses of any size can benefit in terms of marketing campaigns, upcoming announcements, trip scheduling, etc., through secured communication.

Defining metrics for activity tracking

In this blog post, we are going to create a dashboard showcasing calls and SMS activities with your Twilio data to get better insights and make quick decisions for your support team. Hence, the following metrics are needed:

  • Number of messages
  • Number of calls
  • Call prices
  • Call durations
  • Message prices
  • Message breakdown by direction
  • Call breakdown by direction
  • Messages by status
  • Calls by status
  • Duration of calls over time

Getting Twilio data

Twilio’s Voice API allows you to make and manage calls programmatically. Likewise, Twilio’s SMS API allows you to send and manage messages programmatically.

The base URL for Twilio REST API is, https://api.twilio.com/2010-04-01.

HTTP requests to the Twilio’s Voice API and SMS API are protected with HTTP Basic authentication. Hence, your Twilio’s AccountSid will be the username and your AuthToken will be the password.

You can find those details in your console. Also this blog walkthrough uses only this form of authentication.

However, the other form of authentication is through creating an API key in your console. Hence, for this case, your API Key’s Sid will be the username and your API Key’s Secret will be the password.

The required Twilio REST API endpoints are illustrated in the following table for reference.

Endpoint Used for Endpoint URL Example
GET /Accounts/{AccountSid}/Messages.json Retrieval of list of messages associated with your account. https://api.twilio.com/2010-04-01/Accounts/{AccountSid}/Messages.json
GET /Accounts/{AccountSid}/Calls.json Retrieval of list of phone calls made to and from your account. https://api.twilio.com/2010-04-01/Accounts/{AccountSid}/Calls.json

Creating a dashboard and data sources

First, decide the dashboard layout and the widgets needed to visualize the planned metrics. Then, add those widgets from the toolbox to the dashboard layout.

Creating a new blank dashboard

  1. Select the New Dashboard tile in the homepage of the Syncfusion Dashboards.

    new dashboard tile in homepage to create twilio dashboard using syncfusion dashboards
    New Dashboard Tile in Homepage
  1. As a result, the Create Dashboard window opens with two thumbnails: Blank Dashboard and Templates.

    templates view in create dashboard window to create twilio dashboard with syncfusion dashboards
    Templates view in Create Dashboard window
  1. Choose Blank Dashboard. Finally, the Dashboard Designer page opens with a new blank dashboard created.

    blank dashboard in editing view to create twilio dashboard using syncfusion dashboards
    Blank dashboard in editing view

Connecting to Twilio

  1. First, select the data source icon at the right. Consequently, the data source panel will expand as shown in the following.

    empty data source panel to create twilio dashboard using syncfusion dashboards
    An empty data source panel
  1. Select CREATE NEW in the previous panel. This shows the list of data connectors like in the following.

    supported data connections listing to create twilio dashboard using syncfusion dashboards
    Supported Data Connections
  1. In the Categories drop-down list at the top, choose the category Support. This shows the data connectors available under Support category like in the following.

    supported data connections listing under support category to create twilio dashboard using syncfusion dashboards
    Supported Data Connections in Support Category
  1. Choose the Twilio connector. As a result, the Twilio data connection window will be displayed in the panel.

    new twilio data source window to create twilio dashboard using syncfusion dashboards.
    New Twilio Data source Window

Creating a Twilio data source

  1. Name the data source as TwilioCallsData.
  2. In the URL section, fill the calls endpoint URL as shown in the following and replace the {AccountSid} placeholder with your account Sid.
    https://api.twilio.com/2010-04-01/Accounts/{AccountSid}/Calls.json
  3. Leave the default value GET selected under the Method section. Also, leave the Header(s) section empty.
  4. Define the refresh settings with the interval. Further, the dashboard can refresh itself with the latest data updates.
  5. Let the Data Format be JSON since the Calls and Messages API endpoints return result in JSON format.
  6. Set the Authentication Type to Basic Http Authentication since Twilio API supports this authentication type.
  7. Enter the User Name with the account Sid and Password with the Auth Token like in the following.

    twilio data source window with details filled to create twilio dashboard using syncfusion dashboards.
    Twilio data source window with details filled
  8. Click Preview & Connect. As a result, a window opens listing the data results, categorized into a table and columns.

    preview window showing twilio calls detail in syncfusion dashboards.
    Preview window showing calls detail
  9. Choose the desired columns. Click Connect. Now, the data source with the selected table and columns is created like in the following.

    data source view of twilio calls api in syncfusion dashboards.
    Data source view of Twilio Calls API

Editing the Twilio data source

  1. Drag the table into the editing window.
  2. Select the Expression icon in the toolbar of the table design view like in the following. Consequently, the expression editor opens.

    opening expression editor in TwilioCallsData data source view in syncfusion dashboards
    Opening expression editor in TwilioCallsData data source view
  3. Create an expression column named Amount with the expression like in the following. This is needed since the REST API returned values are all strings by default and this column value needs to undergo an aggregation process (SUM).

    expression editor showing expression column created for TwilioCallsData data source in syncfusion dashboards.
    Expression editor showing expression column created for TwilioCallsData data source
  4. Save and close the expression editor.
  5. Click Save to save the data source. The data sources panel lists the created data source like in the following.

    TwilioCallsData data source view in DATA SOURCES panel of syncfusion dashboards.
    TwilioCallsData data source view in DATA SOURCES panel
  6. Similarly, create a data source named TwilioSMSData with a Messages endpoint URL like in the following and create an Amount expression column like previously discussed.
    https://api.twilio.com/2010-04-01/Accounts/{AccountSid}/Messages.json

Finally, the created data sources will get added in the DATA SOURCES panel like in the following.

DATA SOURCES panel listing Twilio data sources in syncfusion dashboards
DATA SOURCES panel listing Twilio data sources

Configuring widgets in a dashboard

Configure the widgets in the dashboard with corresponding data sources as described in the following table.

Widget Data Configuration
Calls (Type: Card)
  • Data source: TwilioCallsData
  • Actual Value: sid
  • Aggregation Type: Count
Messages (Type: Card)
  • Data source: TwilioSMSData
  • Actual Value: sid
  • Aggregation Type: Count
Messages Delivery Status (Type: Doughnut Chart)
  • Data source: TwilioSMSData
  • Value(s): sid
  • Aggregation Type: Count
  • Column(s): status
Messages Prices Breakdown over Time (Type: Bar Chart)
  • Data source: TwilioSMSData
  • Value(s): Amount
  • Aggregation Type: Sum
  • Column(s): date_created
Calls by Status (Type: Doughnut Chart)
  • Data source: TwilioCallsData
  • Value(s): sid
  • Aggregation Type: Count
  • Column(s): status
Calls Price (Type: Card)
  • Data source: TwilioCallsData
  • Actual Value: Amount
  • Aggregation Type: Sum
Messages Price (Type: Card)
  • Data source: TwilioSMSData
  • Actual Value: Amount
  • Aggregation Type: Sum
Average Calls Duration (in secs) (Type: Card)
  • Data source: TwilioCallsData
  • Actual Value: duration
  • Aggregation Type: Avg
Duration of Calls over Time (Type: Spine Chart)
  • Data source: TwilioCallsData
  • Value(s): duration
  • Aggregation Type: Sum
  • Column(s): date_created
Outgoing Calls Breakdown by Phone Number (Type: Column Chart)
  • Data source: TwilioCallsData
  • Value(s): sid
  • Aggregation Type: Count
  • Column(s): to_formatted

For display-level formatting like currency format, elements visibility in charts such as, legend, value labels, etc., make relevant changes through the Properties tab of individual widgets. Finally, the dashboard is ready.

Twilio dashboard showing Voice and SMS activities in your account-linked phone numbers

Sharing your dashboard

Now, share this dashboard with your support team to assess the call and SMS statistics over time and make business decisions quicker. We hope this article helps you build a support tracker dashboard with Twilio data using Syncfusion Dashboards. If you have any questions or require clarification, please let us know in the comments section below. You can also contact us through this contact page. Syncfusion Dashboards now comes with a 30-day free trial with no credit card information required. Give it a try on your own and let us know what you think! We are happy to assist you. Design with a smile!

Tags:

Share this post:

Related Posts

Comments (1)

Great, I really like it! Youre awesome

Leave a comment