Bold BI

Twilio Dashboard Example with Bold BI

Twilio Dashboard Example with Bold BI

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 Bold BI Dashboards.

If you are new to Bold BI 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 Bold BI dashboards to build twilio dashboard with Bold BI dashboards
Homepage view of Bold BI 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.

Further, 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.

EndpointUsed forEndpoint URL Example
GET /Accounts/{AccountSid}/Messages.jsonRetrieval of list of messages associated with your account.https://api.twilio.com/2010-04-01/Accounts/{AccountSid}/Messages.json
GET /Accounts/{AccountSid}/Calls.jsonRetrieval 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

Firstly, 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 Bold BI Dashboards.
new dashboard tile in homepage to create twilio dashboard using Bold BI dashboards
New Dashboard Tile in Homepage
  1. As a result, the Create Dashboard window opens with four options.

    templates view in create dashboard window to create twilio dashboard with Bold BI dashboards
    Templates view in Create Dashboard window
  2. Choose Start from Scratch. Finally, the Dashboard Designer page opens with a new blank dashboard created.

    blank dashboard in editing view to create twilio dashboard using Bold BI 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 Bold BI dashboards
    An empty data source panel
  2. Select CREATE NEW in the previous panel. As a result, this shows the list of data connectors like in the following.

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

    supported data connections listing under support category to create twilio dashboard using Bold BI dashboards
    Supported Data Connections in Support Category
  4. 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 Bold BI dashboards.
    New Twilio Data source Window

Creating a Twilio data source

  1. Firstly, 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. In addition, define the refresh settings with the interval. Furthermore, 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 Bold BI 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 Bold BI dashboards.
    Preview window showing calls detail
  9. Finally, choose the desired columns and click Connect. Consequently, the data source with the selected table and columns is created like in the following.

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

Editing the Twilio data source

  1. Furthermore, 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 Bold BI 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 Bold BI dashboards.
    Expression editor showing expression column created for TwilioCallsData data source
  4. Also, save and close the expression editor.
  5. Click Save to save the data source. Consequently, the data sources panel lists the created data source like in the following.

    TwilioCallsData data source view in DATA SOURCES panel of Bold BI 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 Bold BI 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.

WidgetData 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
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 Bold BI Dashboards. For any questions or clarifications, please post us through the comments section available below. You can also contact us by submitting your queries here or if you already have an account, please login to submit your support query. Bold BI Dashboards now comes with a 15-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!

Start your free 15-day trial today

Leave a Reply