You can use predefined button id's to easily attach API functionality to elements in your HTML.

Status Change Buttons

<button class="btn btn-default" id="agent-status-available">Available</button>
<button class="btn btn-default" id="agent-status-acw">ACW</button>
<button class="btn btn-default" id="agent-status-shortbreak">Short Break</button>
<button class="btn btn-default" id="agent-status-lunch">Lunch</button>
<button class="btn btn-default" id="agent-status-training">Training</button>
<button class="btn btn-default" id="agent-status-meeting">Meeting</button>
<button class="btn btn-default" id="agent-status-logoff">Logout</button>

Phone number input box

<input type="text" class="form-control" id="PhoneNumber" placeholder="Enter phone number">

Call Control Buttons

<button class="btn btn-default" id="agent-softphone-answer" title="Answer">Answer</button>
<button class="btn btn-default" id="agent-softphone-dial" title="Dial">Dial</button>
<button class="btn btn-default" id="agent-softphone-hangup" title="Hangup">Hangup</button>
<button class="btn btn-default" id="agent-softphone-hold" title="Hold">Hold</button>

<button class="btn btn-block btn-default" id="agent-softphone-transfer" title="Transfer">Transfer</button>

<button class="btn btn-block btn-default" id="agent-softphone-transfer2ivr" title="Transfer2IVR" onClick="transfer2ivr_click('ahBzfnRlbGVmb25pLWlseWFzchYLEglBdHRlbmRhbnQYgICAgJ_VkAsMogEadGVsZWZvbmktaWx5YXMuYXBwc3BvdC5jb20');">Transfer2IVR</button>

<button class="btn btn-block btn-default" id="agent-softphone-transfer2alias" title="Transfer2Alias" onClick="transfer2alias_click('1101');">Transfer2Alias</button>

<button class="btn btn-block btn-default" id="agent-softphone-transfer2queue" title="Transfer2Queue" onClick="transfer2queue_click('ahBzfnRlbGVmb25pLWlseWFzchILEgVRdWV1ZRiAgICAzYfgCAyiARp0ZWxlZm9uaS1pbHlhcy5hcHBzcG90LmNvbQ');">Transfer2Queue</button>

<button class="btn btn-block btn-default" id="agent-softphone-click2listencall" title="Click2ListenCall" onClick="ListenCall(null);">Click2ListenCall</button>

Dial Pad

<button class="btn btn-default" id="agent-softphone-one">1</button>
<button class="btn btn-default" id="agent-softphone-two">2</button>
<button class="btn btn-default" id="agent-softphone-three">3</button>
 
<button class="btn btn-default" id="agent-softphone-four">4</button>
<button class="btn btn-default" id="agent-softphone-five">5</button>
<button class="btn btn-default" id="agent-softphone-six">6</button>
 
<button class="btn btn-default" id="agent-softphone-seven">7</button>
<button class="btn btn-default" id="agent-softphone-eight">8</button>
<button class="btn btn-default" id="agent-softphone-nine">9</button>
 
<button class="btn btn-default" id="agent-softphone-star">*</button>
<button class="btn btn-default" id="agent-softphone-zero">0</button>
<button class="btn btn-default" id="agent-softphone-sharp">#</button>

Mute / Unmute Button

<button class="btn btn-block btn-default" id="agent-softphone-mute">Mute</button>

Line Buttons

<button class="btn btn-block btn-default" id="line1" onclick="CallSetActive( Line1 )">Line1</button>
<button class="btn btn-block btn-default" id="line2" onclick="CallSetActive( Line2 )">Line2</button>