{"id":9,"date":"2021-09-16T06:07:50","date_gmt":"2021-09-16T06:07:50","guid":{"rendered":"http:\/\/6142de3d32b1be00167c2be0"},"modified":"2021-11-09T12:22:29","modified_gmt":"2021-11-09T12:22:29","slug":"how-to-configure-click2call-in-grandstream-ucm-series","status":"publish","type":"post","link":"https:\/\/jazchye.com\/index.php\/2021\/09\/16\/how-to-configure-click2call-in-grandstream-ucm-series\/","title":{"rendered":"How to configure CLICK2CALL in Grandstream UCM Series"},"content":{"rendered":"<p>CLICK2CALL is a popular feature in UC solutions that allow the users to make a call after they click an object (e.g., button, image, or text) on websites.<\/p>\n<p>The latest firmware (<a href=\"https:\/\/www.grandstream.com\/support\/firmware\" target=\"_blank\" rel=\"noopener\">1.0.5.4<\/a>) from Grandstream Networks has added CLICK2CALL Integrated customer service SDK in <a href=\"https:\/\/www.grandstream.com\/products\/ip-pbxs\/ucm-series-ip-pbxs\/product\/ucm6300-series-ip-pbx\" target=\"_blank\" rel=\"noopener\">UCM63XX<\/a> that can be used along with remote connect. With this SDK, users will be able to embed a simple CLICK2CALL link into their websites that dial into a specific Call Queue group.<\/p>\n<p>I believed those who are reading this guide should have a website ready to have CLCIK2CALL embedded. If you do not have a website, you will need to get install a web server (Apache, IIS, Tomcat, etc) and create your webpage. In this guide, I will be using Internet Information Services (IIS) on my Windows 10 Pro.<\/p>\n<p><strong>Steps on how to configure CLICK2CALL in UCM:<\/strong><\/p>\n<p>1. Go to UCM63XX web UI &gt; Value-added Features &gt; UCM RemoteConnect &gt; Integrated Customer Service SDK and select the desired Call Queue from the dropdown list and enabled Click2Call as shown below \u2013<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-61\" src=\"http:\/\/jazchye.com\/wp-content\/uploads\/2021\/10\/CTC_1.jpg\" alt=\"\" width=\"1256\" height=\"593\" srcset=\"https:\/\/jazchye.com\/wp-content\/uploads\/2021\/10\/CTC_1.jpg 1256w, https:\/\/jazchye.com\/wp-content\/uploads\/2021\/10\/CTC_1-300x142.jpg 300w, https:\/\/jazchye.com\/wp-content\/uploads\/2021\/10\/CTC_1-1024x483.jpg 1024w, https:\/\/jazchye.com\/wp-content\/uploads\/2021\/10\/CTC_1-768x363.jpg 768w\" sizes=\"auto, (max-width: 1256px) 100vw, 1256px\" \/><\/p>\n<figure><\/figure>\n<p>2. Click on the Download button to download the SDK, and extract the files once the download is completed.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-62\" src=\"http:\/\/jazchye.com\/wp-content\/uploads\/2021\/10\/CTC_2.jpg\" alt=\"\" width=\"878\" height=\"418\" srcset=\"https:\/\/jazchye.com\/wp-content\/uploads\/2021\/10\/CTC_2.jpg 878w, https:\/\/jazchye.com\/wp-content\/uploads\/2021\/10\/CTC_2-300x143.jpg 300w, https:\/\/jazchye.com\/wp-content\/uploads\/2021\/10\/CTC_2-768x366.jpg 768w\" sizes=\"auto, (max-width: 878px) 100vw, 878px\" \/><\/p>\n<figure><\/figure>\n<p>3. Open up the \u2018webrtc_settings.json\u2019 file with Notepad++ or Notepad (I am using Notepad++ in my example here). Replace the value in \u2018websocket_proxy_url\u2019 to your UCM Access Server URL. Save it.<\/p>\n<p>UCM Access Server URL can be found in \u2013<\/p>\n<p>a. GDMS &gt; UCMRC &gt; UCM Device &gt; Plan &gt; Access Server<\/p>\n<p>b. UCM web UI &gt; Value-added Features &gt; UCM RemoteConnect &gt; UCM Public Address<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-63\" src=\"http:\/\/jazchye.com\/wp-content\/uploads\/2021\/10\/CTC_3.jpg\" alt=\"\" width=\"546\" height=\"140\" srcset=\"https:\/\/jazchye.com\/wp-content\/uploads\/2021\/10\/CTC_3.jpg 546w, https:\/\/jazchye.com\/wp-content\/uploads\/2021\/10\/CTC_3-300x77.jpg 300w\" sizes=\"auto, (max-width: 546px) 100vw, 546px\" \/><\/p>\n<figure><\/figure>\n<p>4. Open up your index.html and add the following line to your HTML file. Save it.<\/p>\n<pre><code><\/code><\/pre>\n<pre id=\"viewer-d9jhs\" class=\"_3M8UJ _3Dd1B _1IWyM _1FoOD _3M0Fe _2WrB- _1atvN public-DraftStyleDefault-block-depth0 public-DraftStyleDefault-text-ltr\"><span class=\"_2PHJq public-DraftStyleDefault-ltr\"><span class=\"_3TgEz\">&lt;<\/span>script type<span class=\"_3TgEz\">=<\/span><span class=\"_1SM9u\">\"text\/javascript\"<\/span> src<span class=\"_3TgEz\">=<\/span><span class=\"_1SM9u\">\".\/anonymousWebRTC\/webRTC.js\"<\/span><span class=\"_3TgEz\">&gt;<\/span><span class=\"_3TgEz\">&lt;<\/span><span class=\"_3TgEz\">\/<\/span>script<span class=\"_3TgEz\">&gt;<\/span><\/span><\/pre>\n<pre><code><\/code><\/pre>\n<pre><code><\/code><\/pre>\n<pre><code><\/code><\/pre>\n<p>It should look like this after adding \u2013<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-64\" src=\"http:\/\/jazchye.com\/wp-content\/uploads\/2021\/10\/CTC_4.jpg\" alt=\"\" width=\"686\" height=\"141\" srcset=\"https:\/\/jazchye.com\/wp-content\/uploads\/2021\/10\/CTC_4.jpg 686w, https:\/\/jazchye.com\/wp-content\/uploads\/2021\/10\/CTC_4-300x62.jpg 300w\" sizes=\"auto, (max-width: 686px) 100vw, 686px\" \/><\/p>\n<figure><\/figure>\n<p>5. Copy the entire folder which you have downloaded and unzipped in Step (2) and place them inside the same directory in which you place index.html.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-65\" src=\"http:\/\/jazchye.com\/wp-content\/uploads\/2021\/10\/CTC_5.jpg\" alt=\"\" width=\"700\" height=\"166\" srcset=\"https:\/\/jazchye.com\/wp-content\/uploads\/2021\/10\/CTC_5.jpg 700w, https:\/\/jazchye.com\/wp-content\/uploads\/2021\/10\/CTC_5-300x71.jpg 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<figure><\/figure>\n<p>6. Now you may test to see if the embedded file did appear on your website.<\/p>\n<p>In my example here, I will be just browsing my website with localhost. You can see that there will be a CLICK2CALL button appearing on the bottom right of my webpage.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-66\" src=\"http:\/\/jazchye.com\/wp-content\/uploads\/2021\/10\/CTC_6.jpg\" alt=\"\" width=\"1904\" height=\"991\" srcset=\"https:\/\/jazchye.com\/wp-content\/uploads\/2021\/10\/CTC_6.jpg 1904w, https:\/\/jazchye.com\/wp-content\/uploads\/2021\/10\/CTC_6-300x156.jpg 300w, https:\/\/jazchye.com\/wp-content\/uploads\/2021\/10\/CTC_6-1024x533.jpg 1024w, https:\/\/jazchye.com\/wp-content\/uploads\/2021\/10\/CTC_6-768x400.jpg 768w, https:\/\/jazchye.com\/wp-content\/uploads\/2021\/10\/CTC_6-1536x799.jpg 1536w, https:\/\/jazchye.com\/wp-content\/uploads\/2021\/10\/CTC_6-1568x816.jpg 1568w\" sizes=\"auto, (max-width: 1904px) 100vw, 1904px\" \/><\/p>\n<figure><\/figure>\n<p>7. Upon clicking the CLICK2CALL button, the microphone and speaker check pop-up page will appear, alongside a Call button.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-67\" src=\"http:\/\/jazchye.com\/wp-content\/uploads\/2021\/10\/CTC_7.jpg\" alt=\"\" width=\"517\" height=\"292\" srcset=\"https:\/\/jazchye.com\/wp-content\/uploads\/2021\/10\/CTC_7.jpg 517w, https:\/\/jazchye.com\/wp-content\/uploads\/2021\/10\/CTC_7-300x169.jpg 300w\" sizes=\"auto, (max-width: 517px) 100vw, 517px\" \/><\/p>\n<figure><\/figure>\n<p>8. Clicking on the Call button will make a call to the agent in my Call Queue. The picture below shows the call arriving at the agent\u2019s extension which is log in through Wave Android.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-68\" src=\"http:\/\/jazchye.com\/wp-content\/uploads\/2021\/10\/CTC_8.jpg\" alt=\"\" width=\"290\" height=\"201\"><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-69\" src=\"http:\/\/jazchye.com\/wp-content\/uploads\/2021\/10\/CTC_9.jpg\" alt=\"\" width=\"729\" height=\"1500\" srcset=\"https:\/\/jazchye.com\/wp-content\/uploads\/2021\/10\/CTC_9.jpg 729w, https:\/\/jazchye.com\/wp-content\/uploads\/2021\/10\/CTC_9-146x300.jpg 146w, https:\/\/jazchye.com\/wp-content\/uploads\/2021\/10\/CTC_9-498x1024.jpg 498w\" sizes=\"auto, (max-width: 729px) 100vw, 729px\" \/><\/p>\n<figure><\/figure>\n<figure><\/figure>\n<p>And that is all. I will post a few issues that users normally run into upon configuring CLICK2CALL and ways to resolve them in my next guide. Cheers!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CLICK2CALL is a popular feature in UC solutions that allow the users to make a call after they click an object (e.g., button, image, or&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,4,9],"tags":[],"class_list":["post-9","post","type-post","status-publish","format-standard","hentry","category-how-to","category-ippbx","category-sip"],"_links":{"self":[{"href":"https:\/\/jazchye.com\/index.php\/wp-json\/wp\/v2\/posts\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jazchye.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jazchye.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jazchye.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jazchye.com\/index.php\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":2,"href":"https:\/\/jazchye.com\/index.php\/wp-json\/wp\/v2\/posts\/9\/revisions"}],"predecessor-version":[{"id":153,"href":"https:\/\/jazchye.com\/index.php\/wp-json\/wp\/v2\/posts\/9\/revisions\/153"}],"wp:attachment":[{"href":"https:\/\/jazchye.com\/index.php\/wp-json\/wp\/v2\/media?parent=9"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jazchye.com\/index.php\/wp-json\/wp\/v2\/categories?post=9"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jazchye.com\/index.php\/wp-json\/wp\/v2\/tags?post=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}