Cue Embedded

Cue Platform Reference

• Platform API + Merge Field Docs

Installation

Option 1: NPM

npm install @cue/embedded --save

and then import the library as an ES6 module to use in your application's code:

import * as Cue from '@cue/embedded'; // OR import { init, embed, EmbeddedWidget, WidgetEvent } from '@cue/embedded';

TypeScript definitions are automatically included when installing from npm.

Option 2: CDN

Insert the following script right before your app's closing </body> tag, replacing LATEST_VERSION_NUM with the library's latest stable version number from npm:

<script src="https://unpkg.com/@cue/embedded@[LATEST_VERSION_NUM]/bundles/cue.umd.js"></script>

Displaying the Widget

On any page or component where you'd like to display the widget:

<!-- Insert your own container element -->
<div id="cue-widget-container" style="height:100%; width:600px; max-width:100%;"></div>

// Create a new widget instance and attach to the DOM element
const cueWidget = Cue.embed('#cue-widget-container');

The widget will automatically expand to fill the space of its container.

Receiving Data

You can listen for events or changes to data from the widget anytime after the instance variable has been instantiated.

Angular

export class ExampleComponent implements OnInit {
    cueWidget: EmbeddedWidget;
    
    constructor() {}

    ngOnInit(): void {
        this.cueWidget = Cue.embed('#cue-widget-container');

        /* Widget iframe has finished loading */
        this.cueWidget.on(WidgetEvent.Ready, () => {
            console.log('Widget is awaiting instructions');
        });

        /* Cue user has logged into the widget */
        this.cueWidget.on(WidgetEvent.Login, (user) => {
            console.log(user);
        });

        /* Cue user has logged out of the widget  */
        this.cueWidget.on(WidgetEvent.Logout, (oldUser) => {
            console.log(oldUser);
        });

        /* Authenticated Cue user has changed (i.e. login, logout, or credentials loaded from localStorage on page load) */
        this.cueWidget.on(WidgetEvent.AuthChange, (newUser) => {
            if (!!newUser && !!newUser.id) {
                console.log(newUser.fullName);
            }
        });

        /* A new script session has started */
        this.cueWidget.on(WidgetEvent.SessionReady, ({ session }) => {
            console.log(session.id, session.smartScriptId, session.campaignId, session.direction, session.contactIdInitial);
            // "1", "5", "10", "Outbound", "20"
        });

        /* A displayed field's value was loaded within Cue or from a third-party integration's data */
        this.cueWidget.on(WidgetEvent.FieldInit, ({ field, value }) => {
           console.log(field.mergeText, value);
           // "CONTACT.EMAIL", "[e-mail]"
        });
        
        /* A displayed field was edited while in an agent's script session */
        this.cueWidget.on(WidgetEvent.FieldEdit, ({ field, value }) => {
           console.log(field.mergeText, value);
           // "CONTACT.EMAIL", "[e-mail]"
        });
    }
}

Starting a New Script Session (requires user login to widget)

/*
 * Set the call session parameters programmatically and control navigation flow
 * Make sure to replace CAMPAIGN_ID below with a campaignId from your Cue organization
 */
cueWidget.startSession(CAMPAIGN_ID, 'Outbound');

Updating Script Fields (requires user login to widget)

While inside a scripted call session, you might want to update a field's value in the script to keep it in sync with the parent page's data:

Angular

<input name="firstName" [(ngModel)]="firstName" (ngModelChange)="cueWidget.setField('CONTACT.FIRSTNAME', $event)" />

jQuery

$(function() {
    $("input#first-name").blur(function() {
        // Follows the method signature (mergeText: string, value: any)
        cueWidget.setField('CONTACT.FIRSTNAME', $(this).val());
    })
});

To Remove the Widget + Unsubscribe from Events

cueWidget.destroy();

More Examples

Additional examples can be found in the package's /examples folder.