Was this page helpful?

網頁回撥-Web CallBack/Click to Call

    所謂網頁回撥就是一般用戶在特定的網頁上,輸入自己的電話號碼,按撥號後,系統會主動回撥電話至用戶輸入的電話號碼,待對方接起電話後,系統會在自動撥號至我方所指定的分機或電話號碼,此時,只要我方人員接起電話,用戶即可與我方正常通話。

    網頁回撥的特色:

    • 用戶免安裝軟體,使用容易
      因為不是以電腦當作通話介面,而是改以用戶的傳統電話/手機或硬體式網路電話作為主要通話介面。
    • 通話品質及穩定性高
      有別於一般網頁電話,需在用戶端下載軟體元件,且容易受限於用戶系統及網路環境的穩定性影響,導致經常性通話失敗或品質不良。
    • 安全性高
      因為不需下載任何軟體,可避免木馬/病毒程式誤植的風險。
    • 商業應用典型案例就屬印度這家網路電話公司 - JaJah.com
       

    應用範圍:

    • 網頁080客服服務
    • 商業網站的內容服務整合通訊的解決方案
       

    展示影片:https://dl.dropbox.com/u/1125958/MyP...b_callback.mp4

    流程示意圖

    ClickToCallOnWeb-Diagram.JPG

     

    Web CallBack.png 

    Asterisk 主機上的 Scripts

    vi /etc/asterisk/clickcall.sh

    #!/bin/bash
    CALLFROM_EXT="202"
    if [ $# -ne 2 ]; then
            exit;
    elif [ "$1" = "null" ]; then
            CALLPREFIX=""
            CALLNUM="$2"
    else
            CALLPREFIX="$1"
            CALLNUM="$2"
    fi
    CALLTO="$CALLPREFIX$CALLNUM"
    
    #echo Channel: [email protected]
    #echo MaxRetries: 0
    #echo RetryTime: 3
    #echo WaitTime: 20
    #echo Context: from-internal
    #echo Extension: $CALLFROM_EXT
    #echo Priority: 1
    #echo CallerID: \"WebCall\"\<$CALLNUM\>
    #
    echo Channel: [email protected] > /etc/asterisk/$CALLTO.call
    echo MaxRetries: 0 >> /etc/asterisk/$CALLTO.call
    echo RetryTime: 3 >> /etc/asterisk/$CALLTO.call
    echo WaitTime: 20 >> /etc/asterisk/$CALLTO.call
    echo Context: web-call >> /etc/asterisk/$CALLTO.call
    echo Extension: $CALLFROM_EXT >> /etc/asterisk/$CALLTO.call
    echo Priority: 1 >> /etc/asterisk/$CALLTO.call
    echo CallerId: WebCall \<$CALLNUM\> >> /etc/asterisk/$CALLTO.call
    
    chown asterisk:asterisk /etc/asterisk/$CALLTO.call
    mv /etc/asterisk/$CALLTO.call /var/spool/asterisk/outgoing

    vi /var/www/html/click2call.php

    <html>
    <head>
    <title>Click2Dial</title>
    <style type="text/css">
    <!--
    body{
            font-size:12px!important;font-size:11px;
       margin:0;
            padding:0;
            text-align:center;
            background:#63CF63;
    
            color:#333333;
            font-family: Arial, Helvetica, sans-serif ;
    }
    
    -->
    
    <!--
    .xtop, .xbottom {display:block; background:transparent; font-size:1px;}
    .xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;background: #DFE6EF;}
    .xb1, .xb2, .xb3 {height:1px;}
    .xb2, .xb3, .xb4 {border-left:1px solid #0088CC; border-right:1px solid #0088CC;}
    .xb1 {margin:0 5px; background:#0088CC;}
    .xb2 {margin:0 3px; border-width:0 2px;}
    .xb3 {margin:0 2px;}
    .xb4 {height:2px; margin:0 1px;}
    .xboxcontent {display:block; border:0 solid #0088CC; border-width:0 1px; padding: 4px; background: #DFE6EF;}
    -->
    
    </style>
    
    <script language='JavaScript'>
    function CloseClicked(){
      window.returnValue = '';
      window.close()
    }
    
    function start(){
        webcall.txtphonenumber.disabled = true;
    }
    
    function select_change(s_value){
        switch(s_value)
        {
            <!--  IPOX Num. -->
            case '017' : firstNum = '070'; webcall.txtphonenumber.disabled = false; break;
            <!--  FWD Num. -->
            case '012' : firstNum = ''; webcall.txtphonenumber.disabled = false; break;
            <!--  Gizmo Num. -->
            case '014' : firstNum = '1747'; webcall.txtphonenumber.disabled = false; break;
            <!--  Vbuzzer Num. -->
            case '018' : firstNum = '1022'; webcall.txtphonenumber.disabled = false; break;
            <!--  Enum Num. -->
            case '019' : firstNum = ''; webcall.txtphonenumber.disabled = false; break;
    
            default : firstNum = ''; webcall.txtphonenumber.disabled = true;
        }
        document.webcall.txtphonenumber.value = firstNum;
    }
    
    onload = start;
    </script>
    </head>
    <body>
    <p></p><p></p>
    <?php
    #--------------------------------------------------------------------------------------------
    #Shouldn't need to edit anything below this point to make this script work
    #--------------------------------------------------------------------------------------------
    #get the phone number from the posted form
    $callNumber = $_POST['txtphonenumber'];
    $callPrefix = $_POST['Provider'];
    
    #specify the caller id for the call
    $strCallerId = "Webcall". " <$callNumber>";
    
    $length = strlen($callNumber);
    
    //if ($length == 10 && is_numeric($strExten))
    if (is_numeric($callNumber))
    {
       $output = shell_exec("/etc/asterisk/./clickcall.sh "."$callPrefix"." "."$callNumber"."");
       echo "$output";
    ?>
    <p>
    <table align="center" width="98%" height="196" border="0" bordercolor="#0f0f0f" cellpadding="3" cellspacing="0">
            <tr><td valign="top">
            <b class="xtop">
        <b class="xb1"></b>
        <b class="xb2"></b>
        <b class="xb3"></b>
        <b class="xb4"></b>
        </b>
        <div class="xboxcontent">
            We are processing your call, please wait about one minutes.
    If you have not received our call within one minutes, verify that your number were entered correctly and
    waiting 30 seconds then try again.<p></p>
    <input type=button value="Click me" id=try_button onclick="history.go(-1)">
        <p></p><br><p></p>
        </div>
        <b class="xbottom">
        <b class="xb4"></b>
        <b class="xb3"></b>
        <b class="xb2"></b>
        <b class="xb1"></b>
        </b>
            </td></tr>
    </table>
    </p>
    <b><a href="javascript:CloseClicked()">Close Window</a></b>
    <script language="JavaScript">
    var time=30000;//count down 10 seconds
    
    function CountDown(objid){
                if(time<=0){
                document.getElementById(objid).value='Click to Try Again';
                    document.getElementById(objid).disabled=false;
                }else{
                    document.getElementById(objid).disabled = true;
                    document.getElementById(objid).value = (time/1000) + " sec...";
                    setTimeout("CountDown('" + objid + "')",1000);
                }
                time-=1000;
    }
    CountDown('try_button');
    </script>
    
    
    <?
    }
    else
    {
    ?>
    <p>
    <table align="center" width="98%" border="0" bordercolor="#0f0f0f" cellpadding="3" cellspacing="0">
            <tr><td>
            <b class="xtop">
        <b class="xb1"></b>
        <b class="xb2"></b>
        <b class="xb3"></b>
        <b class="xb4"></b>
        </b>
        <div class="xboxcontent">
            Enter your SIP number (e.g. 0701234567). If available, we will call you within the next two minutes.
            <form name="webcall" action="<? echo $_SERVER['PHP_SELF'] ?>" method="post">
               <br>
           Provider:<select name="Provider" size=1 onchange="select_change(this[this.selectedIndex].value);">
               <option value="" SELECTED>Select your provider</option>
               <option value="" >--------------------</option>
                   <option value="017" >IPOX#</option>
                   <option value="012">FWD#</option>
                   <option value="014">Gizmo#</option>
                   <option value="018">Vbuzzer#</option>
                   <option value="019">Enum#</option>
               </select><br>
           Number: <input type="text" size="20" maxlength="12" name="txtphonenumber">
           <input type="submit" value="Dial">
           <br><br>
            <center>
            <input type="button" value="Close" onclick="CloseClicked()">
            </center>
            </form>
            </div>
        <b class="xbottom">
        <b class="xb4"></b>
        <b class="xb3"></b>
        <b class="xb2"></b>
        <b class="xb1"></b>
        </b>
            </td></tr>
    </table>
    </p>
    <?
    }
    ?>
    <br>
    <!-- Footer -->
      <div class="footer" style="float:right; line-height:11px">
                            <p align="right">
             <u>This page is written by A-Lang. 2007/12/5</u>&nbsp;
             </p>
      </div>
    <!-- Footer-->
    
    </body>
    </html>

    使用戶的撥號頁面

    這一段可以嵌入在任何一個既有的網頁上,只要在您的網頁上適當位置,貼上以下這段 Java scripts。

    <script language="JavaScript">
    <!--
    function MakeCall()
    {
    window.open("http://your.asterisk.ipaddress/click2call.php","Dial","toolbar=0,menubar=0,status=0,top=10,left=10,width=320,height=290,resize=1");  
    }
    //-->
    </script>

     

    延伸閱讀

    Was this page helpful?
    標籤 (Edit tags)
    • No tags

    文件 2

    文件大小日期附件上傳者 
     ClickToCallOnWeb-Diagram.JPG
    Click to Call on Web Diagram
    65.91 KB11:52, 13 Mar 2012alang動作
     Web CallBack.png
    Web Call-Back Flow
    42.85 KB22:04, 19 Mar 2009alang動作
    您必須 登入 才能發佈評論。
    Powered by MindTouch Core