Scribd
Upload
291 views16 pages

AudioCodes WebRTC Click-To-Call - Deployment Procedure

The document provides instructions for adding a click-to-call widget to a web page in 3 steps: 1) Extract necessary files and folders from the widget zip file and copy them to the web server. 2) Modify the HTML page to reference required JavaScript, CSS, and configuration files and add the widget code. 3) Edit the configuration file to specify call settings like the destination number and server details. Following these steps allows easily adding click-to-call functionality without requiring web development skills.

Uploaded by

erika
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
291 views16 pages

AudioCodes WebRTC Click-To-Call - Deployment Procedure

The document provides instructions for adding a click-to-call widget to a web page in 3 steps: 1) Extract necessary files and folders from the widget zip file and copy them to the web server. 2) Modify the HTML page to reference required JavaScript, CSS, and configuration files and add the widget code. 3) Edit the configuration file to specify call settings like the destination number and server details. Following these steps allows easily adding click-to-call functionality without requiring web development skills.

Uploaded by

erika
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 16

Adding click to call widget

To an existing web page


September 2020

For SDK Version 1.14 and above.


Click-To-Call widget Highlights

• Easily add a click-to-call button to a web site using few


lines of code
• Does not require web development skills
• Button design and text can be customized

• In the following slides we will describe the steps to add


this widget to any HTML page.
• Please follow the instructions and when done refresh
the HTML page to get the changes.
Click to Call Web Widget
Step 1: File and folders

▪ Unzip the widget zip file to a temporary


directory.
▪ The following folders will be extracted:

▪ 'conf' (Containing configuration file).


▪ 'css' (Containing demo style file).
▪ 'js' (Containing the SDK JS, audio player and widget script code).
▪ 'html' (usage example).
▪ 'docs' (help document).
Click to Call Web Widget
Step 1: File and folders

▪ Copy the bellow folders to your web server:

▪ 'conf' (Containing configuration file).


▪ 'css' (Containing demo style file).
▪ 'js' (Containing the SDK JS, audio player, and widget script code)
▪ ‘sounds’(Containing sound that played during test call)

▪ The bellow folders may be skipped

▪ 'html' (usage example).


▪ 'docs' (help document).
Click to Call Web Widget
Step 2: Modify your HTML page

Note:
Add to the HTML HEAD references to js modules The JS file path is
relative and should
be adjusted to the
<html> specific deployment.
<head>
<script src="../js/ac_webrtc.min.js"></script>
<script src="../js/audio_player.js"></script>
<script src="../js/c2c.js"></script>
<script src="../conf/config.js"></script>
</head>
<body>
</body>
</html>
Click to Call Web Widget
Step 2: Modify your HTML page

Add to the HTML HEAD link to css file


<html>
<head>
<link rel="stylesheet" href="../css/c2c.css">
<script src="../js/ac_webrtc.min.js"></script>
<script src="../js/audio_player.js"></script>
<script src="../js/c2c.js"></script>
<script src="../conf/config.js"></script>
</head>
<body>
</body>
</html>
Click to Call Web Widget
Step 2: Modify your HTML page

Add to the HTML HEAD link for the browser tab image icon
<html>
<head>
<link rel="stylesheet" href="../css/c2c.css">
<link rel="icon" href="favicon.png">
<script src="../js/ac_webrtc.min.js"></script>
<script src="../js/audio_player.js"></script>
<script src="../js/c2c.js"></script>
<script src="../conf/config.js"></script>
</head>
<body>
</body>
</html>
Click to Call Web Widget
Step 2: Modify your HTML page
Add the widget (C2C_widget) to your html page and add to it 2 buttons:
Test Call button: Note:
<script src="../conf/config.js"></script> Image used here
</head> may be replaced
<body> by customer.
<div id="c2c_widget">
…
<button id="c2c_call_button" title="Click to call us on the phone">
<svg id="c2c_svg_icon" fill="#006DF0" viewBox="0 0 512 512">
<path d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6
49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2
378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-
18.6-23.4z"/>
</svg>
<span>Call</span>
</button> Note:
<div id="c2c_message"></div> Span used for
... phone API
</div> messages
</body>
</html>
Click to Call Web Widget
Step 2: Modify your HTML page
Add the widget (C2C_widget) to your html page and add to it 2 buttons:
Test Call button: Note:
<script src="../conf/config.js"></script> Image used here
</head> may be replaced
<body> by customer.
<div id="c2c_widget">
…
<button id="c2c_test_btn" title="Click to test connection quality">
<svg id="c2c_test_svg">
<g fill="none" fill-rule="evenodd">
<path d="M-1-1h24v24H-1z" /> <path d="M21.61 17.99l-9.08-9.08c.93-2.34.45-5.1-1.44-7-2.3-2.3-
5.88-2.51-8.43-.65L6.5 5.11 5.08 6.52 1.25 2.69C-.61 5.23-.4 8.82 1.9 11.11c1.86 1.86 4.57 2.35 6.89
1.48l9.11 9.11c.39.39 1.02.39 1.41 0l2.3-2.3c.4-.38.4-1.01 0-1.41zm-3 1.6l-9.46-9.46c-.61.45-1.29.72-2 .82-
1.36.2-2.79-.21-3.83-1.25C2.37 8.76 1.93 7.5 2 6.26l3.09 3.09 4.24-4.24-3.09-3.09c1.24-.07 2.49.37 3.44
1.31a4.469 4.469 0 011.24 3.96 4.35 4.35 0 01-.88 1.96l9.45 9.45-.88.89z" fill="#1D1D1D" />
</g>
</svg>
<span>Test line</span> Note:
</button> Span used for
<span></span>... phone API
</div> messages
</body>
</html>
Click to Call Web Widget
Step 2: Modify your HTML page
Add video controls (will be invisible on auio call configuration)
Note:
<script src="../conf/config.js"></script> Image used here
</head> may be replaced
<body> by customer.
<div id="c2c_widget">
.
.
.
</div>

<video id="c2c_local_video" style="display: none;" playsinline></video>


<video id="c2c_remote_video" style="display: none;" autoplay playsinline></video>
</body>
</html>

Note:
Span used for
phone API
messages
Click to Call Web Widget
Step 2: Modify your HTML page
Add display for connection quality and audio quality
Note:
Image used here
<script src="../conf/config.js"></script>
may be replaced
</head>
<body> by customer.

<div id="c2c_quality_info_div">
<span id="c2c_connection_span"></span>
<span id="c2c_quality_span"></span>
</div>
<div id="c2c_widget">
.
.
.
</div>

</body> Note:
</html>
Span used for
phone API
messages
Click to Call Web Widget
Step 3: Edit the “config.js” file in the “conf” directory
First part (server config) contains the backed servers configuration.
Please edit only the marked in red values keeping the file structure.
▪ Domain: AudioCodes SBC domain name, used to build SIP headers From/To
▪ addresses: AudioCodes SBC secure web socket address. (can be multiple)
▪ iceServers: addresses for STUN servers. (Optional, can be multiple)
▪ iceTransportPolicyRelay: Optional. Should be set always to false unless using only turn server and relay is required.

let c2c_serverConfig = {
domain: 'example.com',
addresses: ['wss://sbc.example.com'],
iceServers: [],
};
Click to Call Web Widget
Step 3: Edit the “config.js” file in the “conf” directory
Second part (call config) contains the call configuration.
Please edit only the marked in red values keeping the file structure.
▪ call: Call destination (user or phone number)
▪ caller: Caller user name (One word according SIP RFC 3261).
▪ callerDN: Caller display name (words sequence).
▪ type: Call type possible values: 'audio' or 'video‘ or ‘user_control’
▪ videoCheckboxDefault: For type user_control. Default value of video check box.
▪ videoSize: Window video size (for video call), may be left empty for defaults (default {width: '', height: ‘’})
▪ callAutoStart: ‘no’, ‘yes’, ‘yes force’. Start call automatically after page is loaded.
▪ messageDisplayTime: How long the messages will be displayed (seconds)
▪ restoreCallMaxDelay: time to reload a call after a page refresh (Seconds)

let c2c_config = {
call: 'JohnDoe',
caller: 'Anonymous',
callerDN: 'Anonymous',
type: 'audio',
videoCheckboxDefault: false,
videoSize: {width: ‘480px', height: ‘360px’},
callAutoStart: ‘no’,
messageDisplayTime: 5,
restoreCallMaxDelay: 20,
.
Click to Call Web Widget
Step 3: Edit the “config.js” file in the “conf” directory

Second part (call config) contains the call configuration.


Please edit only the marked in red values keeping the file structure.
▪ pingInterval : value (in seconds), defines the interval of sending CRLF for keepalive
▪ pongTimeout : value (true), close and reopen web socket when ping timeout detected
▪ timerThrottlingBestEffort value(true).
▪ keepAliveStats : value (n times), every n amount of pongs print to log min and max delay statistics.
▪ keepAliveDist : value (true / false) either to print to logs the above values.

let c2c_config = {
.
.
pingInteral: 15,
pongTimeout: true,
timerThrottlingBestEffort true,
keepAliveStats: 60,
keepAliveDist: false,
.
.
};
ClicktestCallEnabled:
to Calltrue, testCallUser: '5555', testCallAutoStart: true, testCallVolume: 0.0, testCallMinDuration: 10, testCallMaxDuration: 20,
Web Widget
Step 3: Edit the “config.js” file in the “conf” directory
Third part (call config) contains the test call configuration.
Please edit only the marked in red values keeping the file structure.
▪ testCallEnabled: If test call enabled (show test call GUI)
▪ testCallSBCScore: use SBC call quality score
▪ testCallUser: Call to this user for test call (It's a special test call user in SBC that auto answer and play sound prompt)
▪ testCallAutoStart: If auto play policy enables it, test call starts automatically after page loading.
▪ testCallUseMicrophone: Instead playing recorded sound, use microphone to test call. May used to bypass auto play policy.
▪ testCallVolume": Set 1.0 to hear (100% volume) or mute(0.0) – Volume of audio prompt received from SBC.
▪ testCallMinDuration": remote-inbound-rtp info statistics is provided only after 5..10 seconds delay (Chrome) or 11..16 seconds (Firefox), Due to that the
min duration indicates the minimum time to wait for this info.
▪ testCallMaxDuration: Call will terminated after max duration in any case even if the info was not received.
▪ testCallQualityText: Mapping SBC quality score color to text messages.

let c2c_config = {
.
testCallEnabled: true,
testCallSBCScore: true,
testCallUser: ‘5555’,
testCallAutoStart: true,
testCallUseMicrophone: false,
testCallVolume: 0.0,
testCallMinDuration: 10,
testCallMaxDuration: 20,
testCallQualityText: {…},
};
Thank You

Stay in the loop

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy