Customer Care Hosted Widget

The Customer Care Hosted Widget enables you to embed Cleeng’s Help Center and support functionality directly into your web application. It provides subscribers with self-service access to FAQs tailored for digital subscription services and, when needed, direct access to Cleeng’s expert support team. Using the widget, you can deliver a ready-to-use customer care experience without building a support center from scratch or managing support operations in-house.

📘
Hosted customer flows have been introduced as a Beta feature, meaning they're ready for real-world use while we gather user feedback to enhance their functionality and address any minor issues.
If you want to learn more about hosted customer flows, review the currently supported features, and see how they compare to other integration methods, see our overview of available frontend integration options and their benefits.

Integration and configuration

To embed the Customer Care hosted widget, follow the integration guide.

Customer Care Hosted Widget events

The Customer Care Hosted Widget emits several message events that can be used for deeper integration with your application.

These events allow you to synchronize the widget’s behavior with the rest of your page or application. For example, you can trigger visual changes, update the application state, or log usage data whenever the widget’s status changes. This flexibility makes it easier to maintain a consistent user experience and integrate support features into your broader application logic.

**Available events: **

::help-center-widget-ready – emitted when the widget has finished loading.
- Example use cases: enable buttons, mark the widget state as ready, or coordinate with other components on the page. Let’s say the widget is embedded inside a React application, and the user wants to show a loader before the widget loads.
  
  In this example, this event is used to hide the loader:
```
const [isLoading, setIsLoading] = useState(false);

window.addEventListener('message', event => {
	if (event.data?.type === '::help-center-widget-ready') {
		setIsLoading(false);
	}
});
```

::help-center-widget-panel-toggled – emitted whenever a single panel in the Help Center is opened or closed.

Payload:

{ "activePanel": <number> }   // when a panel is opened  
{ "activePanel": null }      // when any panel gets closed

Example use cases: adapt page styling, track user interactions, or adjust layout depending on whether the Help Center is expanded or collapsed. In this example, we're using Userpilot to track which question has been viewed:

window.addEventListener('message', event => {
	if (event.data?.type === '::help-center-widget-panel-toggled' && typeof event.data?.payload?.activePanel !== 'undefined') {
		Userpilot.track('faq-opened', event.data.payload.activePanel)
	}
});