With Roku TV in Brightscript

This guide is for App developers who want to integrate CuVo app with Roku TV through BrightScript to enhance user interaction and feedback collection capabilities. CuVo SDK supports BrightScript 2 and SceneGraph 1.2 . It supports Roku platform version 12.0 and above. Apps integrating with CuVo agent can be published with Minimum Firmware v0.0.0 b0.

Integrating the CuVo SDK into a Roku channel takes a maximum of one and half hours. Whenever any updates are made in CuVo SDK, relaunching the Roku app will reflect all the changes immediately. 

This document will walk you through the steps to properly integrate CuVo Feedback agent into your Roku app.

Prerequisites to Integrate CuVo SDK

You will need to be connected to your Roku device in order to complete the integration.

Configure & Integrate Roku

Go to the Manage Accounts page and from the account listing choose the account and version for which you want to configure the Roku agent.

• Step 1: On the Edit Account page scroll down to the feedback agent configuration block and click Configure

The Configure Feedback page is displayed.

• Step 2: Click the angle on the Integration Steps accordion to expand it.

• Step 3: Select TV from the Platform dropdown menu.

• Step 4: Select ROKU from the Technology dropdown menu.

• Step 5: Click on the GO TO INTEGRATION DOC button to open the integration docs.

• Step 6: Copy the snippets from the Your package url and Code snippet boxes by clicking the Copy to Clipboard icon and following the steps in the following section How to include Cuvo library into the app.

• Step 7: Click the angle on the QR Settings accordion and expand it. This option is available after you select Roku TV in the Integration Steps accordion.

• Step 8: Fill up the Heading and Subheading fields with the text you wish to display on the QR code page on your TV.

• Step 9: Click the SAVE button once customising the settings is completed.

How to Include the Cuvo library into the App

To include the Cuvo agent in the channel for integrating Roku, follow the steps defined below:

Step 1: Load the Cuvo SDK as a component library by adding the following code between the tags into the BrightScript scene file.

<ComponentLibrary id="cuvoSDK" uri="[YOUR_PACKAGE_URL]" />

Replace [YOUR_PACKAGE_URL] with the URL provided in the ‘Your package url’ area of the ‘Integration Steps’ in CuVo Feedback agent. 

Step 2: Add a cuvoContainer group in the BrightScript scene file to append a container after loading the CuVo agent screen. Use the following XML element: 

<Group id="cuvoContainer"></Group> 

Step 3: After the CuVo SDK gets loaded, add the following code to the BrightScript scene file.

function init()
    m.cuvoContainer = m.top.findNode("cuvoContainer")  
    m.cuvoSDK = m.top.FindNode("cuvoSDK")
    m.cuvoSDK.observeField("loadStatus","cuvoSDKLoaded") 
end function 

'this function trigger when cuvo SDK loaded. 

function CuvoSDKLoaded() 

//Copy the code snippet from the 'Code snippet' area and paste it here 

end function

Replace //Copy the code snippet from the 'Code snippet' area and paste it here with the “code snippet” provided in the ‘Integration Steps’ in CuVo Feedback agent.

This will include the CuVo SDK in the channel. 

How to Display the CuVo Feedback Agent on Roku

After including the CuVo SDK in the channel, you can display the CuVo Agent screen on Roku and can also change the font.

Step 1: Call the open method to display the CuVo agent screen by adding the following code:

m.cuvoAgent.callFunc("open", params) 

For example: To “open/display” the CuVo agent screen by pressing “OK” key on the Roku remote control,  you can use the following code: 

Function OnKeyEvent(key, press) as Boolean
handled = false
if press then
if key = "OK"
m.cuvoAgent.callFunc("open", params)
end if
handled = true
end if
return handled
end function

Step 2: close is a observeField which is invoked when feedback agent is closed.

m.cuvoAgent.observeField("close", "closeCuvoFeedbackAgent")

Here, the closeCuvoFeedbackAgent can be any method that you want to invoke on closing the CuVo agent screen.

How to Set the Font in CuVo SDK

Set the URI of the font in the CuvoSDKLoaded function to set the fonts by adding the following code:

m.cuvoAgent.regularFont= "pkg:/components/cuvoAgent/fonts/poppins/Poppins-Medium.ttf"
m.cuvoAgent.boldFont= "pkg:/components/cuvoAgent/fonts/poppins/Poppins-Bold.ttf"

How to Add an Additional Form

You can enable or disable additional forms using the true/false flag value. If this flag is set to true, it will display the additional detail form. If it’s set to false, the form will not be displayed. 

For example: 

m.cuvoAgent.additionalDetail = true/false;

In the provided snippet, you can get a reference to set the boolean value to true or false in order to display the additional detail form: 

How to Add Custom Values in CuVo SDK

You can send custom values in the dashboard using contextDetailsParams and userDetailsParams function.

For example:

m.cuvoAgent.userDetailsParams = {"email": "somebody@somewhere.com", "id": "user_1234567890",
"guid": "36429hjhoruhf-rhu3uh-u3hfuh", "name": "Some Person"}
m.cuvoAgent.contextDetailsParams = {"page": "guide-page", "action": "guide-menu-click"}

How to Test if the CuVo Agent Integration is Successful

You can test the CuVo – Roku integration by adding a call to the open callback function on the event handler which will open the CuVo agent screen.

m.cuvoAgent.callFunc("open", params) 

If the “feedback agent” appears on the Roku screen after executing this function, it indicates that the integration process has been successfully completed.

How to detect and handle errors in any of the functions

While executing the functions for integrating CuVo with Roku, developers can detect and handle errors as follows:

• Check in the error console using telnet 8085.
• Use print statements to log errors in the console.
• Wrap the code that might potentially throw an error within a try block and handle any resulting errors in the corresponding catch block.

try

    ' Code that might throw an error

catch e as Object

    ' Handle the error

end try

Additional permissions the app needs to provide as part of integration

Not Applicable

Recommendation

Not Applicable

Link to Sample Demo App

Upcoming

Supported Devices

CuVo SDK library currently supports all devices in the Roku platform such as Roku Express, Roku Express 4K+ 4K & HDR, Roku Streaming Stick 4K, Roku Ultra, Roku Premiere, and more.

Troubleshooting

Upcoming

API Documentation

Construction

m.cuvoAgent as Object

This is the main entry point for instantiating the cuvo agent. This object manages and triggers events.

Control

• Open

callFunc("open", params as object) 

Description

To open feedback/bugs choice dialog. This method may be called with a params parameter.

Parameters

Argument	Type	Type	Description
params	associative array	associative array	Feedback: To open a general feedback form with categories, subcategories and rating screen. Example: m.cuvoAgent.callFunc("open","form":"feedback"}) Bug-report: To open a bug report form to raise a bug ticket. Example: m.cuvoAgent.callFunc("open","form":"bug-report"})

Return Value

There is no return value.

• Close

observeField("close", "closeCuvoFeedbackAgent")

Description

Close is a CuVo agent observeField that invokes when the feedback form is closed.

Parameters

There are no parameters.

Return Value

True

Configuration

Field	Type	Description
setUsersDetails	associative array	To set/display user details including the email, id, name, etc. on the dashboard. setUserDetails = { Email: 'somebody@somewhere.com', : , // where key is a string and value is any object…} Example:  m.cuvoAgent.userDetailsParams = {"email":"somebody@somewhere.
setContextDetails	associative array	To set/send custom details/values in dashboard using contextDetails. setContextDetails = { <key>: <value>, // where key is a string and value is any object... } Example:  m.cuvoAgent.contextDetailsParams = {"page": "guide-page", "action":"guide-menu-click"}
regularFont	Font URI	Set the regular/normal URI of the font in this field: m.cuvoAgent.regularFont="pkg:/components/cuvoAgent/fonts/poppins/Poppins-Medium.ttf"
boldFont	Font URI	Set the bold font URI in this field: m.cuvoAgent.boldFont="pkg:/components/cuvoAgent/fonts/poppins/Poppins-Bold.ttf"
additionalDetail	Additional Font Detail	Set flag true to display form or set false if you don’t want to display this form using additionalDetail: m.cuvoAgent.additionalDetail = true/false;