With Browser Web Apps
This article covers integrating the feedback agent into your codebase with customization during the integration process.
The guide offers step-by-step instructions on generating an API key and integrating the Cuvo feedback agent into your browser web apps.
Let’s get started 🚀
Navigation to Manage Account
Sign In into your Cuvo account and navigate to the Manage Accounts to configure the Product on the CuVo Platform.
The demonstration below provides complete instructions to navigate, manage accounts and choose a product name to configure integration steps.
Configure Feedback Agent Script
The demonstration below provides detailed steps to configure the feedback agent integration.
Validate the Agent Script
The demonstration explains how to use the copied feedback widget script in your codebase and run the application to see the output.
Additional Customizations
To make changes in the integrated widget, you need to use the APIs and properties of the CuVo object for the following purposes:
- Triggering the display of the CuVo form on actions such as page changes, timeouts, or lack of user activity.
- Submitting custom data about the user or application context along with feedback, bugs, or requests.
- Setting customized values in the form to eliminate the need for users to enter them when submitting feedback, bugs, or requests.
Refer the following section to make above changes in your integrated feedback widget:
1. APIs Details
CuVo APIs are used to interact with the agent at runtime after the app has loaded in the web browser. For more details about the API properties, refer to the table below:
| API | Purpose |
| Cuvo.hide() | Hide the Feedback button on particular screens. |
| Cuvo.show() | Show the Feedback button again after it is hidden. |
| Cuvo.open() | Open the feedback/bugs choice dialog |
| Cuvo.open(“BUGS”) | Directly open the Bug report submission form dialog. |
| Cuvo.open(“FEEDBACK”) | Directly open the Feedback submission form dialog |
| Cuvo.close() | Close all feedback/bugs submission forms and dialogs |
| Cuvo.setUserDetails({ Email: ‘somebody@somewhere.com’, : , // where key is a string and value is any object … }) | Set user details including the email. Example: Window.Cuvo.setUserDetails({ Email: ‘somebody@somewhere.com’, id: ‘user_1234567890’, guid: ‘36429hjhoruhf-rhu3uh-u3hfuh’, name: ‘Some Person’ }) |
| Cuvo.setDefaultCategory(“Category Name”, “BUGS”) | Pre-select a category in the Bug report form depending on context. |
| Cuvo.setDefaultCategory(“Category Name”, “FEEDBACK”) | Pre-select a category in the Feedback form depending on context. |
| postFeedback ( feedbackData: { feedbackType: string, // valid values are ‘FEEDBACK’ or ‘BUGS’ rating?: number, comment?: string, severity?: string, email?: string, userDetails?: { key: string: any }, contextDetails?: { }, categoryComments?: { category: string, comments: string[], }, platformName?: string, platformVersion?: string, platformOs?: any, pageURL?: string, } ) | Post feedback/bug to the server without invoking the agent’s UI. Returns TRUE if the post succeeds, FALSE otherwise. NOTE: Does not perform any validation currently. Validation will be added in a future release. |
2. Object Properties
The following properties of the CuVo object can be used to pass values to the agent:
| Property | Types and Values | Use |
| ready | boolean Initially: false, When fully loaded: true | Check if the CuVo feedback agent is fully loaded and available for API calls. |
| hidden | boolean default value: false | Set TRUE if you want to run an agent in a hidden state. |
| string default value: ‘’ | It allows the use of email of the users if setEmail API is not available. | |
| category | string default value: ‘’ | It uses the default category for the current context when setDefaultContext API is not available. |
| severity | string default value: ‘’ | Set the default severity for bug submission. |
| rating | string default value: ‘’ | Set the default rating for feedback submission. |
| userDetails | object default value: {} | It is used during feedback/bug submission when setUserDetails API is not available. |
| contextDetails | object default value: {} | It uses contextDetails during feedback/bug submission when setContextDetails API is not available. |
Set the Feedback Agent
To keep the feedback agent hidden while loading the agent code, set the hidden variable to true by adding the following line to the main script in your HTML file.
Cuvo.hidden = true;
This script integrates the feedback agent while keeping the button hidden by default.
You can use the show() API to display the button in specific contexts or during periods of inactivity.
The following screenshot demonstrates how to implement this:
NOTE: It is tested and certified for chrome, safari and firefox.