GuidesAPI ReferenceSDKsIntegrationsWhat's New?
Guides

UI Components

Suggest Edits

Symbl.ai UI Components are a set of pre-built, customizable UI elements designed to simplify the process of displaying Symbl.ai’s conversation insights in your application. Built as a React library, these components allow developers to integrate real-time insights into their applications with minimal setup while providing flexibility to customize the design and functionality as needed.

Use cases

  • Customizable Client-Facing Interfaces: Companies can use the flexible UI components to design customer-facing portals that provide conversation insights tailored to each client. Businesses can maintain full control over the user experience, offering personalized insights that align with individual client requirements.
  • Tailored Data Presentation: Choose the conversation insights that matter most to your users and present them in a way that aligns with your product’s goals. For example, you can choose to focus on the Call Score for a quick evaluation of a sales call’s effectiveness or use the Sentiment Graph to dive into customer interactions, identifying key moments in a conversation by simply hovering over sentiment trackers.

Benefits for product managers

  • Faster Time-to-Market: With pre-built UI components, product managers can focus on improving functionality and user experience rather than worrying about the technical details of UI development, speeding up the time to launch new features
  • Enhanced User Experience: The flexibility of Insights UI Components allows product managers to ensure the interface aligns perfectly with their user needs. They can choose which insights are most relevant to their users, rearrange layouts, and fine-tune design elements such as colors and fonts, all while maintaining consistency with the brand.
  • Adaptability for Different Use Cases: Different products or teams might need to showcase different aspects of conversation insights. The modular nature of the UI components allows product managers to tailor the experience for specific customer segments or use cases, whether it's for sales analytics, customer support insights, or compliance tracking.
  • Cost Efficiency: By using pre-built, customizable components, product managers can reduce the resources and budget needed for UI development, allowing more investment in other areas like product innovation or customer success.

Benefits for developers

  • No Need to Build UI from Scratch: Developers save significant time and effort by not having to design and build an interface for conversation insights from the ground up. The components come ready-to-use, meaning teams can focus on integrating them rather than creating custom UIs.
  • Easy Integration with React Library: The Insights UI Components are provided as a React library, making integration straightforward for development teams. With a few lines of code, developers can import the components into their product and connect them to Symbl.ai’s API, which dynamically renders real-time conversation insights.
  • Flexible Customization: Despite being pre-built, these components are fully customizable. Developers can tweak layouts, adjust colors, add or remove components, and modify functionality to fit their product’s design language and business logic. This flexibility ensures that developers maintain full control over how the insights are presented.
  • Dynamic Data Rendering: Each component is designed to handle real-time data rendering with minimal input. Developers only need to provide appId and appSecret, and the components automatically pull the relevant conversation insights from Symbl.ai’s API. This reduces manual configuration and makes it easier to keep data up-to-date in the UI.

UI Components

Symbl.ai offers 3 UI components - Meeting Header, Call Score, and Call Sentiment. Each component can be tailored to fit the unique needs of sales, customer support, compliance, or product development teams, providing actionable insights in a user-friendly interface.

  • Meeting Header: For summarizing important conversation details and participants.
  • Call Score: For measuring and evaluating conversation performance based on defined criteria.
  • Call Sentiment: For understanding emotional trends and key moments in conversations.

Meeting Header Component

The Meeting Header component serves as an essential top-level summary, visually presenting key meeting information such as participants, meeting duration, and timestamps. Its customizable nature makes it adaptable to various business scenarios.

Use Cases

  • Sales Dashboards: Sales teams can integrate the Meeting Header into their CRM dashboards, giving them a visually organized overview of all participants and key details before diving into the call transcript or insights.
    Client-Facing Reports: When sharing insights with clients, businesses can use the Meeting Header to provide a clean, professional summary of who attended and when the meeting took place, ensuring clients have immediate context.
  • Internal Meeting Recaps: In employee or team collaboration tools, the Meeting Header offers a simple and quick way to recall key meeting participants and timings, allowing team members to access vital information without needing to search through logs.

Key Features:

  • Customizable Layout: Modify the appearance to suit different products or branding needs. This could include customizing fonts, colors, or even the position of speaker tags and meeting metadata.
  • Clickable Speaker Tags: Interactive speaker tags allow users to click and view more information about the participants, such as their profiles or contact information in systems like Salesforce or internal CRM platforms.
  • Metadata Display Options: Developers can choose what metadata to display (e.g., date, time, platform, and custom fields), making the header adaptable to various contexts, from sales meetings to customer support calls.

Call Score Component

The Call Score component provides a visual and easy-to-understand representation of how well a conversation performed based on predefined metrics. The UI element simplifies the display of the score and can be integrated into dashboards, reports, or evaluation tools.

Use Cases

  • Sales Team Performance Dashboards: Sales managers can integrate the Call Score into performance dashboards, allowing them to visually compare the effectiveness of different sales reps across multiple calls, quickly identifying high performers.
  • Customer Service QA Systems: Quality Assurance teams can add the Call Score to customer service evaluation tools, where the UI component provides a clean, at-a-glance measure of call quality, without having to manually listen to each conversation.
    Coaching and Feedback Tools: Integrated into coaching platforms, the Call Score allows managers or trainers to easily review and display how well team members are handling customer interactions, creating an interactive and visual feedback experience.

Key Features

  • Customizable Visual Scorecard: The Call Score component allows developers to adapt the visual representation (colors, sizes, and even scoring thresholds) to match the brand or align with the company’s evaluation criteria.
  • Real-Time Data Display: The score dynamically updates based on Symbl.ai’s API data, making it ideal for dashboards where up-to-date call scores need to be presented immediately.
    Interactive Drill-Down: Developers can add clickable elements to the score, allowing users to drill down into more detailed insights about why a particular score was achieved, enhancing user interaction and data exploration.

Call Sentiment Component

The Call Sentiment component provides a visual breakdown of sentiment shifts over the course of a conversation. Its interactive graph or chart allows users to analyze emotional highs and lows, making it ideal for teams needing deeper insights into customer emotions.

Use Cases

  • Customer Experience Dashboards: Integrated into customer experience tools, the Call Sentiment component visually represents customer emotions during interactions. Teams can use this visual data to better understand how customers are feeling throughout their journey.
  • Sales Interaction Analysis: Sales teams can embed the Call Sentiment component into their CRM or performance tools, allowing them to identify moments of positive or negative sentiment during key points of the sales process and adjust strategies accordingly.

Key Features

  • Interactive Sentiment Graph: Users can hover over points in the sentiment graph to see real-time data on emotions at different points of the conversation. Clicking on a point can take users directly to that moment in the conversation, allowing for easy exploration of specific highs and lows.
  • Customizable Sentiment Display: Developers can adjust the sentiment graph to match the overall design of the product. This includes color schemes for positive, neutral, and negative sentiment, allowing the sentiment data to integrate seamlessly into any application.
  • Segmented Sentiment Analysis: The component supports detailed segmentation of conversation moments (e.g., by speaker, topic, or question), making it easy to pinpoint specific interactions that caused a shift in sentiment.

How to get started

Step 1: Install the Symbl.ai UI Components library

Install the Symbl UI Component Library using npm with the following command:

npm i  @symblai/symbl-ui-components

Step 2: Import necessary Components

You can import the Symbl UI Components in your project, ES5 and ES6 syntax. For example - For importing CallScore Component, use the following:

ES6
import {CallScore} from '@symblai/symbl-ui-components';

ES5
const {CallScore} = require('@symblai/symbl-ui-components');

Step 3: Authenticate

Start by generating an access token using your appId and appSecret from the Symbl.ai platform.

curl --location 'https://api.symbl.ai/oauth2/token:generate' \
--header 'Content-Type: application/json' \
--data '
{
    "type": "application",
    "appId": "your appId",
    "appSecret": "your appSecret"
}'

This request will return an access token, which is required for all subsequent API calls.

Step 4: Process a conversation

Before using UI, process a conversation using one of async or streaming APIs and pass-in insights and callScore in featureList array. To learn more, refer process a conversation.

features: {  
    featureList: ["insights", "callScore"]  
}

You will get a conversationId. Use the conversationId and the previously generated accessToken to dynamically render the components with insights.

Read more about the Symbl.ai UI component library, refer here.

You can also view, test, and experience the UI components using the storybook.

Updated 3 months ago