This page has been moved to MiiTel Developers. Please see "JavaScript Widget" page.
Note that this page will not be updated in the future.
This feature will allow you to adopt MiiTel Phone 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
- Receive an embed code
- Customize the widget
- Insert a callback function for incoming calls
- Make a call and register the outgoing phone number to Contacts
- End the call
- Add a callback function to determine if users are available to make calls
- Add a callback function that returns the sequence ID
- Add a callback function that notifies when the dialing starts
- Add a callback function that notifies when the call starts
- Add a callback function that notifies when the call ends
- Customize the display position
- Customize colors
- Change the picture of the widget activation button
- Change the picture of the logo
- Sample code (HTML)
IMPORTANT
- The contents of this page are for engineers who develop applications. In order to implement the widget, web application engineers would need to do the tasks described on this page (not available for web application users).
- If you adopt a JavaScript widget to a web application that is not a SPA (single-page application), the call may get disconnected because of the screen changes during the call.
Receive an embed code
- Visit https://account.miitel.jp/v1/signin and log in to MiiTel Analytics with the admin user.
- Click
Open MiiTel Admin on the top right of the page.
-
Click Third Party Integration > Javascript Widget.
-
Insert the HTML code (as seen in the image below) to the
<body>or<head>tag of the HTML in the web application.
-
After you insert the codes, MiiTel Phone will be set on the lower right part of the page.
- After you click MiiTel Phone, the softphone will be displayed.
Customize the widget
By adding the following codes, you will be able to add events of incoming or outgoing calls or change the look and feel.
Insert a 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: Name of the group that received the call
circuitTitle: Circuit title of the phone number
circuitNumber: Phone number of the person who will receive the call
userName: User name of the person who receives the call
isInternal: Internal calls or not
isTransfer: Internal transfer or not
remotePhoneNumber: A phone number that is transferred (internal transfers only)
Implementation example
function receiveCall(e) {
if (e.isInternal && !e.isTransfer) {
let text = "Internal call\n";
text += "From: " + e.phoneNumber; + "\n";
text += "Calling for " + e.userName + " \n";
alert(text);
} else if (e.isTransfer) {
let text = "Internal transfer\n";
text += "From: " + e.phoneNumber; + "\n";
text += "Transferred phone number: " + e.remotePhoneNumber + " \n";
alert(text);
} else if (e.groupName !== "" ) {
let text = "To group\n";
text += "From: " + e.phoneNumber;
text += "To: " + e.circuitNumber + "\n";
text += "Circuit tile: " + e.circuitTitle + "\n";
text += "Calling for " + e.groupName + " \n";
alert(text);
} else {
let text = "To user\n";
text += "From: " + e.phoneNumber; + "\n";
text += "To: "e.circuitNumber + " \n";
text += "Circuit tile: " + e.circuitTitle + "\n";
text += "Calling for " + e.userNmae + "\n";
alert(text);
}
}
miitelWidget("onReceiveCall", receiveCall);
Make a call and register the outgoing phone number to Contacts
With the miitelWidget.call() method, you can make a phone call to the phone number you selected from the softphone.
You can combine this method with the onClick event to do a click to call.
Also, if you add the parameter, you can register the outgoing phone number to Contacts.
Implementation example
// Make an outgoing call
miitelWidget.call("09012345678");
// Register the contact information when you make an outgoing call
miitelWidget.call("09012345678", {
contact: {
companyName: "Account name",
contactPersonName: "Contact person name"
}
}); Outgoing call parameter
phoneNumber: Receiver's phone number (required)companyName: Account name (only if you want to register the receiver's phone number to Contacts)contactPersonName: Contact person name (only if you want to register the receiver's phone number to Contacts)
IMPORTANT
- Set the phoneNumber with half-width digits.
- If the companyName or contactPersonName is left blank, the receiver's phone number will not be registered to Contacts.
- If there is a full-width space in companyName, your contact will be registered as Unknown company.
- If there is a full-width space in companyPersonName, your contact will be registered as Unknown contact. If the phone number has already been registered in Contacts, the account name and contact person name will be overwritten.
End the call
With the miitelWidget.hangup();method, you can end the following phone calls.
- Softphone that is currently making the call.
- Softphone that is currently receiving the call.
- Softphone that is currently on the call.
You can combine with the onClickevent or other events to end ongoing calls or calls that are making or receiving the call.
Implementation example
// End ongoing calls or calls that are making or receiving the call.
miitelWidget.hangup();
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 cannot 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 a 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 for this case will be https://<Company ID>.miitel.jp/app/calls/<Sequence ID>.
Implementation example
function receiveSequenceId(e){
document.write("URL is https://<company ID>.miitel.jp/app/calls/"+ e.sequenceId)
}
miitelWidget("onReceiveSequenceId", receiveSequenceId);Add a 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 a 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 a 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");
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");IMPORTANT
- 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.