One of the key use cases is leveraging for click-to-call flows, where users can initiate a call by simply clicking a button or link. This is particularly useful in scenarios where the user does not need to manually enter any call details, making the process quick and user-friendly.

anchorPrerequisites

Before continuing, complete the following steps:

1. The admin needs to enable Click-to-Call in the Webex Control Hub by following the Click-to-Call Access instructions. This step must be completed before proceeding with any other configurations. Once Click-to-Call is enabled, create a service app. See the following guide for details: Registering a Service App.

2. Create a guest using your newly created service app. See the following guide for details: Creating a Guest Using the Service App.

3. Make an API call to request a jwe token. See the following API specification for details: Generate Guest JWE Token.

anchorConfigure Click-to-Call Flows

There are a few steps involved in setting up the click-to-call flows using the SDK.

1. Set up the Configurations

Refer to the Getting Started Documentation to understand how the webexConfig object is created.

Once you have your webexConfig object, set up your calling configuration:

const callingClientConfig = {
   logger: loggerConfig,
   serviceData:{
      indicator: `guestcalling`,
      guestName: `guestName`
   },
   jwe: `<jwe_token_from_server>`,
};

const callingConfig = {
   clientConfig: clientConfig,
   callingClientConfig: callingClientConfig,
   logger: loggerConfig,
};

2. Set up the Calling Client

Create your calling object using the webexConfig and callingConfig objects:

calling = await Calling.init({ webexConfig, callingConfig });

Register your calling object and extract the callingClient from the promise:

calling.on("ready", () => {
   calling.register().then(async () => {
      callingClient = window.callingClient = calling.callingClient;
   });
});

Using the callingClient object, extract the line object from it and register the line :

const line = Object.values(callingClient.getLines())[0];
line.on('registered', (lineInfo) => {
   // outbound call set-up will be placed here
});
line.register();

3. Set up the Outbound Call

Create the call instance for outbound calls using the makeCall() method of the line object:

line.on('registered', (lineInfo) => {
   const call = line.makeCall();
});

In order to utilize the dial() method, you need an audio stream object. To create this object use the Calling class:

const localAudioStream = await Calling.createMicrophoneStream({ audio: true });

Trigger the call object's dial() method to initiate the call. Remember to pass the localAudioStream object as an argument:

call.dial({ localAudioStream });

4. Deregister the Calling Client

After the call disconnects, it's a good practice to deregister the client:

calling.deregister();

anchorOutbound Call Events

Click-to-Call flows follow the same set of events within a call as a regular flow. For further information, see: Getting Started Documentation.

anchorReferences

Refer to this demo repository to understand more about how to leverage the Click-to-Call feature.