Javascript Widget

This feature will allow you to adopt MiiTel to external web applications. (Customer relationship management system (CRM), reservation management system, ordering system, inventory management system, etc.)

Also, SaaS application providers can provide this feature to customers who use MiiTel.

Contents

The contents of this page are for engineers who develop applications. Work from web application engineers is required to implement the widget. Therefore, web application users will not be able to do the work described on this page.

Receive embed code

  1. Log in to MiiTel Admin.
  2. Click Third Party Integration > Javascript Widget.

  3. Insert the HTML code displayed in the below picture to the <body> or <head> tag of the HTML in the web application.

JS_______.png

  1. After the codes are inserted, MiiTel Phone will be set on the lower right part of the page.

JS1.png

  1. After you click MiiTel Phone, a softphone will be displayed.

JS2.png

Customize the widget

By adding the following codes, you will be to add events of incoming or outgoing calls or change the look and feel.

Insert the callback function for incoming calls

With the method of miitelWidget.call("onReceiveCall", [callback function]), you can execute the specified callback function for incoming calls.

Incoming event parameter

phoneNumber: Caller's phone number (for internal calls: extension number)
groupName: Incoming call group name
circuitTitle: Incoming call circuit name
circuitNumber: Phone number of the person who will receive the call
isInternal: Internal calls or not
userName: Username of the person who made the call (only for internal calls)

Implementation Example

function receiveCall(e) {
 if (e.isInternal) {
  let text = "Internal call\n";
  text += "From: " + e.userName + " (" + e.phoneNumber + ")\n";
  alert(text);
 } else {
  let text = "External call\n";
  text += "From: " + e.phoneNumber+"\n";
  text += "To: " + e.circuitNumber+"\n";
  text += "Circuit tile: " + e.circuitTitle+"\n";
  text += "Incoming call group: " + e.groupName+"\n";
  alert(text);
 }
}
miitelWidget("onReceiveCall", receiveCall);

Make calls

With the miitelWidget.call() method, you can make calls to the phone number specified by the softphone. You can also combine the onClick event to click to call.

Implementation Example

miitelWidget.call("09012345678");

Add a callback function to determine if users are available to make calls

When the availability status to make calls is changed from the miitelWidget("onChangeReadyState", [callback function]) method, the specified callback function will be implemented.

You can use the code to disable the click to call button when the user can't make calls, such as if he or she is logged out or currently on another call.

Implementation Example

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

Add callback function that returns the sequence ID

miitelWidget("onReceiveSequenceId", [callback function]) method implements the callback function when the sequence ID (ID that identifies each call) is received after the call starts. Sequence ID can be used to directly refer the individual call history page in MiiTel Analytics. The URL in this case will be 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 callback function that notifies when the dialing starts

If you use the miitelWidget("onDialBegin", [callback function]) method, the callback function will be implemented when you start making a call or when you receive an incoming call.

Implementation example

function dialBegin(e){
  document.write("Dial begin")
}
miitelWidget("onDialBegin", dialBegin);

Add callback function that notifies when the call starts

If you use the miitelWidget("onCallBegin", [callback function])method, the callback function will be implemented when the other person picks up the call (for outgoing calls) or when you press Answer from incoming calls.

Implementation example

function callBegin(e){
  document.write("Call begin")
}
miitelWidget("onCallBegin", callBegin);

Add callback function that notifies when the call ends

If you use the miitelWidget("onCallEnd", [callback function]) method, the callback function will be implemented when the call is finished.

Implementation example

function callEnd(e){
  document.write("Call end")
}
miitelWidget("onCallEnd", callEnd);

Customize the display position

You can customize the display position of the button and keypad with the miitelWidget("position", [location]) method. If you can not change the settings, the default position will be right_bottom (bottom right).

The values you can set are left_bottom (bottom left) and right_bottom (bottom right).

Implementation example

miitelWidget("position", "left_bottom");

Customize colors

You can customize colors with the miitelWidget("color", [color]) method. If you can not change the settings, the default color will be black (black theme).

The values you can set are white (white theme) and black (black theme).

Implementation example

miitelWidget("color", "white");

Change the picture of the widget activation button

You can change the picture of the widget activation button with the miitelWidget("openButtonImage", [Picture URL]) method.

We recommend you use images with SVG format and 180 x 30 px. For the URL, you need to specify the URL that starts with https://.

Implementation example

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

JS_awesomeButton.png

Change the picture of the logo

miitelWidget("logoImage", [Picture URL]) method will allow you to change the image of your logo.

We recommend you use images with SVG format and 180 x 30 px. For the URL, you need to specify the URL that starts with https://.

Implementation example

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

JS3_awesomePhone_GIF.gif

Javascript widgets can not be inserted in HTTP sites. Please try HTTPS sites or localhost. 

Sample code (HTML)

We have sample codes available as your guide.

Was this article helpful?