The chat widget is a key feature of Chatwoot, an open-source customer relationship platform. It allows businesses to communicate with their customers through various channels, including website widgets, Facebook, Twitter, WhatsApp, email, and more. Each platform has its own set of human agents, teams, labels, and canned responses, allowing for a unified interface while maintaining customizability in the background.
The chat widget can be customized with various options. Here are some possible configurations:
Work Item Widgets
Chatwoot supports work item widgets, which are predefined widgets that can be activated for specific work item types. These widgets include:
- WorkItemWidgetAssignees: Displays the list of work item assignees.
- WorkItemWidgetAwardEmoji: Displays emoji reactions added to the work item, including upvote/downvote counts.
- WorkItemWidgetCurrentUserTodos: Displays the current user’s todo state for the work item.
- WorkItemWidgetDescription: Displays the description of the work item, including edited state, timestamp, and author.
- WorkItemWidgetHealthStatus: Displays the health status assignment for the work item.
Communicators
Chatwoot also supports communicator templates, which are used to send messages to specific channels. Here are some possible configurations:
- SocketCommunicator: Sends messages to a WebSocket server.
- HttpCommunicator: Sends messages to an HTTP server.
- EmailCommunicator: Sends messages via email.
Merge Request Widget Extensions
Chatwoot supports merge request widget extensions, which are used to display additional information in merge requests. Here is an example configuration:
{
name: '', // Required: This helps identify the widget
props: [], // Required: Props passed from the widget state
i18n: { // Required: Object to hold i18n text
label: '', // Required: Used for tooltips and aria-labels
loading: '', // Required: Loading text for when data is loading
},
expandEvent: '', // Optional: RedisHLL event name to track expanding content
enablePolling: false, // Optional: Tells extension to poll for data
modalComponent: null, // Optional: The component to use for the modal
telemetry: true, // Optional: Reports basic telemetry for the extension. Set to false to disable telemetry
computed: {
summary (data) {}, // Required: Level 1 summary text
statusIcon (data) {}, // Required: Level 1 status icon
},
}
Telemetry
The base implementation of the widget extension framework includes some telemetry events. Each widget reports:
- view: When it is rendered to the screen.
- expand: When it is expanded.
- full_report_clicked: When an (optional) input is clicked to view the full report. Outcome (expand_success, expand_warning, or expand_failed): One of three additional events relating to the status of the widget when it was expanded.
When adding new widgets, the above events must be marked as known and have metrics created to be reportable.
GraphQL API
Chatwoot supports a GraphQL API, which allows for querying and mutating data in a flexible way. Here are some possible queries:
- notes: Returns a connection of notes for a work item.
- workItemWidgetNotifications: Represents the notifications widget.
- workItemWidgetProgress: Represents a progress widget.
For more information, see the Chatwoot GraphQL API documentation.
Integration with Other Services
Chatwoot supports integration with other services through its marketplace. Here are some possible integrations:
- Jira
- Dialogflow
- Facebook Messenger
For more information, see the Chatwoot Marketplace documentation.
Conclusion
The chat widget is a powerful tool for businesses looking to communicate with their customers through various channels. With its customizable options and integration with other services, the chat widget can help businesses streamline their communication and improve their customer relationships.
