JavaScript Widgets

This feature allows you to embed MiiTel into external web applications (e.g., customer relationship management (CRM) systems, reservation management systems, ordering systems, inventory management systems, etc.).

.

It can also be used by SaaS application providers to embed and offer this feature to their MiiTel customers.

Contents

The information on this page is intended for application developers. The inclusion of this widget must be performed by the developer of the web application and is generally not something that can be performed by the user of the web application.

Get the code for embedding

.
  1. In MiiTel Analytics [set]__________2019-10-01_18.33.51.png.
  2. Click on the JavaScript widget.

JS _______.png

  1. Embed the HTML code to be displayed on the screen in the <body> tag or <head> tag of the HTML of the web application.

    .

JS_______.png

  1. The embedded page will have a [MiiTel Phone] button in the bottom right corner.

JS_miitel_phone_button.png

  1. Click on the [MiiTel Phone] button to display the softphone.

JS_miitelphone.png

Customize Widget

.

By adding the following code, you can add events for incoming and outgoing calls, as well as change the look and feel.

Add a callback function for incoming calls

. The method

miitelWidget.call("onReceiveCall", [callback function]) executes the specified callback function when there is an incoming call.

.

Incoming call event parameters

phoneNumber: source phone number (if extension, extension number)
groupName: destination group name
circuitTitle: destination line name
circuitNumber: destination phone number
isInternal: Whether the call is an extension or not
userName: Calling party's user name (only for extensions)

Implementation example

function receiveCall(e) {
if (e.isInternal) {
let text = "This is an extension ";
text += e.phoneNumber + " incoming from isInternal";
text += "Caller is " + e.userName + " ";
alert(text);
} else {
let text = "Outside line is ";
text += e.phoneNumber + " from ";
text += e. circuitNumber + " is ringing ";
text += "The line name is " + e.circuitTitle + ' ";
text += "Group " + e.groupName + " is ringing ";
alert(text);
} >}
miitelWidget("onReceiveCall", receiveCall);

Make an outgoing call

The

miitelWidget.call() method makes a call from the softphone to the specified phone number. It can be combined with onClick events and other methods to perform a click to call.

.

Implementation Example

miitelWidget.call("09012345678");

Add a callback function that returns whether or not a call can be made

Executes the specified callback function when the caller availability state changes in the miitelWidget("onChangeReadyState", [callback function]) method.

.

This can be used to disable the click-to-call button when the user is unable to make a call, such as when the user is logged out or on a call.

Implementation example

function updateReadyState(e){ if(e.state){ alert("The outgoing call feature has been enabled.") } else{ alert("The outgoing call function has been disabled.") } } miitelWidget("onChangeReadyState", updateReadyState);

Add a callback function that returns a sequence ID

.

Execute the callback function when the miitelWidget("onReceiveSequenceId", [callback function]) method receives a sequence ID (an ID that identifies an individual caller) right after the call starts. The sequence ID can be used to directly reference an individual call history screen in MiiTel Analytics, where the URL is https://<Company ID>.miitel.jp/app/call/<Sequence ID>. .

.

Implementation example

function receiveSequenceId(e){
  document.write("URL is https://<company ID>.miitel.jp/app/call/"+ e.sequenceId +"")
}
miitelWidget("onReceiveSequenceId", receiveSequenceId);

Add a callback function to notify when dialing starts

The miitelWidget("onDialBegin", [callback function]) method allows you to execute a callback function at the timing when you start dialing or when you receive an incoming call.

Implementation ExampleImplementation example

function dialBegin(e){
  document.write("Dialing has started.")
}
miitelWidget("onDialBegin", dialBegin);

Add a callback function to notify when a call starts

miitelWidget("onCallBegin", [callback function]) method will execute the callback function when the other party answers the phone after dialing, or at the timing when the voice call is started by pressing the "Answer Phone" button after receiving a call.

.

Implementation Example

function callBegin(e){
  document.write("The call has started.")
}
miitelWidget("onCallBegin", callBegin);

Add a callback function to notify when a call ends

.

The miitelWidget("onCallEnd", [callback function]) method allows you to execute a callback function at the end of a call.

Implementation example

function callEnd(e){
  document.write("The call has ended.")
}
miitelWidget("onCallEnd", callEnd);

Customizing the display position

You can customize the display position of the buttons and keypad screen with the

miitelWidget("position", [position]) method. If it is not set, it will be right_bottom (bottom right).

The possible values are

The possible values are left_bottom (bottom left) and right_bottom (bottom right).

.

Implementation Example

miitelWidget("position", "left_bottom");

Customize the colors

You can customize the colors of the buttons and keypad screen with the

miitelWidget("color", [color]) method. If it is not set, the color will be black (black background).

The possible values are

The possible values are white (white color) and black (black color).

Example implementation

miitelWidget("color", "white");

Change the image of the button that expands the widget

. You can change the image of the button to click when expanding the widget with the

miitelWidget("openButtonImage", [URL of image]) method.

.

The image should be in SVG format, 180 x 30 px, and the URL should start with https://.

.

Implementation example

miitelWidget("openButtonImage", "https://yourwebsite.com/button.svg");

JS_awesomeButton.png

Change the logo image

You can change the image of the logo with the

miitelWidget("logoImage", [URL of the image]) method.

The image should be in SVG format, 180 x 30 px, and the URL should start with https://.

.

Implementation example

miitelWidget("logoImage", "https://yourwebsite.com/logo.svg");

JS_awsomephone.png

JavaScript widgets cannot be embedded in an HTTP site, they must be embedded in an HTTPS site or localhost.
.

Was this article helpful?

If using an external web application