Web · JavaScript SDK · 1.x

Integrate the SecuredCalls Web SDK

The SecuredCalls Web SDK is a JavaScript/TypeScript SDK for web environments, including web apps and web-based dialers. It provides methods to initiate and manage call branding operations — setting up branded calls, clearing branding, and attaching call notes.

Estimated time: 15 minutes

Node.jsBrowser / WebTypeScriptnpm

Overview

The 1.x line covers the branding lifecycle that happens before, during, or after a call. The SecuredCalls class is constructed with your secret and configuration.

Important:

This SDK does not manage the actual voice or video call. It is solely responsible for the branding lifecycle that happens before, during, or after a call session.

Topics

Jump to any part of the integration.

Install the SDK→

Add the package via npm or include the bundled browser script.

Initialization→

Construct the client with your secret and configuration.

Getting started→

Wire the branding callbacks and brand your first call.

API reference→

setupBrandingAsync, clearBrandingAsync, and addNoteAsync.

Section 1

Install the SDK

Choose the install path that matches your environment. The browser build is distributed separately by the SecuredCalls team.

STEP 1

Install for Node.js

Install the SDK from npm into your Node.js project.

terminalbash

1npm install @expertstack-studios/sc-web-sdk-v2

STEP 2

Include the browser build

For a web application, include the compiled SDK file directly in your HTML.

Note:

Currently you will have to get in touch with the Secured Calls team to download the bundled JavaScript file.

index.htmlhtml

1<script src="secured-calls-web-sdk-vx.x.x.js"></script>

Section 2

Initialization

Instantiate the SecuredCalls class with your secret, your configuration, and optional logger options.

STEP 3

Create the client

The 1.x constructor takes three positional arguments.

Note:

Both secret and configuration are available from the Secured Calls Portal once you have registered your contact center or mobile app.

index.tstypescript

1const scClient = new SecuredCalls(secret, configuration, loggerOptions);

Parameters

Arguments passed to new SecuredCalls(secret, configuration, loggerOptions).

secretstring

A unique secret token provided to your business via the Secured Calls Portal.

configurationstring

A configuration for the contact center implementation, provided via the Secured Calls Portal.

loggerOptions{ level: 'info' | 'debug' | 'error' }

Optional. Sets the log verbosity for the SDK. Useful during integration and debugging.

Section 3

Getting started

STEP 4

Brand a call from Node.js

Construct the client, register the three branding callbacks, then call setupBrandingAsync(...).

onBrandingSuccess — fires with a referenceId; keep it to clear branding or add a note later.
onBrandingFailed — handle branding failures.
onBrandingTimedOut — handle branding timeouts.

index.tstypescript

1import { SecuredCalls, ILoggingConfig } from '@expertstack-studios/sc-web-sdk-v2';2 3const config: ILoggingConfig = { level: 'info' };4const scClient = new SecuredCalls('<your-secret>', '<your-configuration>', config);5 6// Register event listeners7scClient.onBrandingSuccess((referenceId) => {8    console.log(`Branding succeeded: ${referenceId}`);9});10scClient.onBrandingFailed((error) => {11    console.error(`Branding failed: ${error}`);12});13scClient.onBrandingTimedOut(() => {14    console.warn('Branding timed out.');15});16 17// Start branding18await scClient.setupBrandingAsync(fromNumber, toNumber, 'business', 'PSTNCall', 20000);

STEP 5

Brand a call from the browser

The browser build exposes a global SecuredCallsSDK. Create the client with new SecuredCallsSDK.SecuredCalls(secret, configuration), then call setupBrandingAsync(...).

index.htmlhtml

1<script src="secured-calls-web-sdk-vx.x.x.js"></script>2<script>3    const scClient = new SecuredCallsSDK.SecuredCalls('<your-secret>', '<your-config>');4 5    scClient.onBrandingSuccess((referenceId) => {6        console.log(`Branding successful: ${referenceId}`);7    });8 9    scClient.onBrandingFailed((errMsg) => {10        console.error(`Branding failed: ${errMsg}`);11    });12 13    scClient.onBrandingTimedOut(() => {14        console.log('Branding timed out');15    });16 17    // Call the branding setup18    scClient.setupBrandingAsync('+61123456789', '+61111222333', 'business', 'PSTNCall', 20000);19</script>

Section 4

API reference

The SecuredCalls client exposes three async methods for managing call branding and notes.

STEP 6

setupBrandingAsync

Initiates branding for an upcoming call.

Declaration

setupBrandingAsync(fromNumber: string, toNumber: string, intent: string, callType?: string, timeout?: number): Promise<string>

fromNumberstring

Caller’s phone number.

toNumberstring

Recipient’s phone number.

intentstring

Call intent — for example support or sales.

callTypestring

Optional. 'PSTNCall' or 'InAppCall' (default 'InAppCall').

timeoutnumber

Optional. Time in milliseconds to wait before the branding attempt is considered failed (default 20000).

Returns Promise<string> — the branding reference ID.

STEP 7

clearBrandingAsync

Clears branding previously set up, using the branding reference ID.

Declaration

clearBrandingAsync(referenceId: string): Promise<boolean>

referenceIdstring

The ID received from onBrandingSuccess.

Returns Promise<boolean>.

STEP 8

addNoteAsync

Attaches a read-only call note that can be shown to the recipient.

Declaration

addNoteAsync(referenceId: string, note: string): Promise<boolean>

referenceIdstring

The ID received from onBrandingSuccess.

notestring

A string message to attach to the call.

Returns Promise<boolean>.

Event listeners

These are important to track the result of the branding operations, and let you react programmatically to different branding outcomes.

onBrandingSuccess(referenceId) — branding succeeded; referenceId identifies the branded call.
onBrandingFailed(errorMessage) — branding failed.
onBrandingTimedOut() — branding timed out.

Latest (2.x)iOS In-App Voice SDK