ExotelCRMWebSDK (Beta)

The ExotelCRMWebSDK allows you to leverage Exotel's platform for making IP calls, with this easy to integrate feature.

Steps

1. Using the Package in a Project:

For npm users:

Refer to sample project here or read on.

Steps:

1. You can install the package using npm:

npm install @exotel-npm-dev/exotel-ip-calling-crm-websdk

Or directly from GitHub:

npm install git+https://github.com/exotel/exotel-ip-calling-crm-websdk.git

2. Simply import the ExotelCRMWebSDK in your code like this:

import ExotelCRMWebSDK from "@exotel-npm-dev/exotel-ip-calling-crm-websdk";

TypeScript support

The npm package publishes:

• Compiled JavaScript in output/ (runtime)
• Type declarations in output/*.d.ts (TypeScript typings)

If your build pipeline can compile TypeScript from dependencies, the TypeScript sources are also shipped under src/ and can be imported directly (advanced usage), e.g.:

import ExotelCRMWebSDK from "@exotel-npm-dev/exotel-ip-calling-crm-websdk/src/ExotelCRMWebSDK";

Publishing (maintainers)

This repo uses GitHub Actions for CI and optionally publishing to npm.

• CI: A build runs on PRs and pushes to master/main. Make this workflow a required status check in GitHub branch protection to block merges if build fails.
• Manual publish to npm: Run the GitHub Actions workflow "Publish to npm (manual)" and set publish=true (set publish=false to only build without publishing).

Adding NPM_TOKEN for the publish workflow

Add the token in GitHub:

• Repo → Settings → Secrets and variables → Actions → New repository secret
• Name: NPM_TOKEN
• Value: your npm granular access token with permission to publish @exotel-npm-dev/exotel-ip-calling-crm-websdk (and any org policy requirements like 2FA/bypass-2FA as configured on npm).

For Non-npm users:

If you are not using a package manager like NPM, you can directly include the bundled JavaScript file that can be generated by webpack.

Steps:

1. First, you should clone this repository.

2. You can install the required packages using following npm command:

npm install

3. Locate the 'webpack.config.js' file in the project directory, you can find this file in the root directory of the project.

4. Run the following command to build the webpack from root directory:

npm run bundle

5. Build command should create a folder called 'target' in the same directory.

   target preview:

   target/

    ├── beep.wav
    ├── dtmf.wav
    ├── ringbacktone.wav
    ├── ringtone.wav
    ├── crmBundle.js
    └── crmBundle.js.LICENSE.txt
   

6. Simply copy & paste this 'target' folder into the project that requires CRMWebSDK.

7. You can now utilize the 'crmBundle.js' file by including it as a script in your project..

<script src="./target/crmBundle.js"></script>

Non-npm users (recommended): download from GitHub Release

Every tagged release (tag format v*) automatically uploads the pre-built bundle as GitHub Release assets:

• crm-websdk-target.zip
• target/crmBundle.js (+ *.wav assets)

Download the zip from the latest GitHub Release and include it in your project:

<script src="./target/crmBundle.js"></script>

2. Configure crmWebSDK

You can configure crmWebSDK object like this:

const crmWebSDK = new ExotelCRMWebSDK(accessToken, userId, true);

3. ExotelCRMWebSDK

constructor

accessToken : This can be generated using the Create Authentication Token API

userId : You can get the userId using the Application user management APIs

autoConnectVOIP : If true, it will auto-connect device when the ExotelWebPhoneSDK is returned on initialization. (If you have passed false, then you must call DoRegister on ExotelWebPhoneSDK)

Initialize

Initializes the CRMWebSDK, sets up the phone object, and registers callbacks for various events.

Parameters:

sofPhoneListenerCallback (function): Callback for incoming calls.

softPhoneRegisterEventCallBack (function, optional): Callback for soft phone register events. Default is null.

softPhoneSessionCallback (function, optional): Callback for soft phone session events. Default is null.

Returns:

Promise<ExotelWebPhoneSDK | void>: A promise that resolves to an instance of ExotelWebPhoneSDK if successful, or void if unsuccessful.

4. Initialize method

Use the Initialize method on the ExotelCRMWebSDK object which returns Promise that resolves to ExotelWebPhoneSDK object. ExotelCRMWebSDK does all the work to get necessary details required for the ExotelWebPhoneSDK

const crmWebPhone = await crmWebSDK.Initialize(HandleCallEvents, RegisterationEvent);

You must pass call events handler, registeration event handler (optional) and session callback handler (optional) to the Initialize method

5. ExotelWebPhoneSDK

1. RegisterDevice: Registers the device with the call server.

2. UnRegisterDevice: Un-registers the device from the call server.

3. AcceptCall: Accept call

4. HangupCall: Disconnect call

5. MakeCall: (async) Method that places a call

   Number: A number to dial

   dialCallback: It is called after the call request is made to the server (An actual call may start after this with a slight day).

   CustomField: String; Any application-specific value like order id that will be passed back as a parameter in status callback.

6. ToggleHold: Toggle state hold/un-hold state of a call. This state needs to be maintained by the client

7. ToggleMute Toggle state mute/un-mute state of a call. This state needs to be maintained by the client

License

This project is licensed under the Apache-2.0 License. See the LICENSE file for details.