Date: Thu, 28 Mar 2024 21:56:29 +0000 (UTC) Message-ID: <207096885.5.1711662989809@7df3f640d46c> Subject: Exported From Confluence MIME-Version: 1.0 Content-Type: multipart/related; boundary="----=_Part_4_1800456504.1711662989807" ------=_Part_4_1800456504.1711662989807 Content-Type: text/html; charset=UTF-8 Content-Transfer-Encoding: quoted-printable Content-Location: file:///C:/exported.html
PushCall offers a jQuery plugin for easy integration of the PushCall cli= ents in your existing HTML document.
PushCall offers 4 different services:
Each service has its own client. Each of these clients can be embedded u= sing the PushCall embed library provided. The library comes as extension to= the popular javascript framework jQuery. In the following documentation th= e PushCall library will be referenced as PushCall jQuery plugin.
The PushCall jQuery plugin is loaded in conjunction with the jQuery libr= ary. It requires v1.6.4 of jQuery or higher to function properly. A typical= use of jQuery and the PushCall plugin looks as described in Example code 1= .
<scrip= t type=3D'text/javascript' src=3D'https://ajax.googleapis.com/ajax/libs/jqu= ery/1.6.4/jquery.min.js'></script><!--Hosted on CDN--> <script type=3D'text/javascript' src=3D'http://smartcontactbutton.pushca= ll.com/jquery.pushcall-1.1.2.min.js'></script>
See Example code 2 for a very basic example of adding the PushCall CallM= eNow client to an HTML page.
<!DOCT= YPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org= /TR/html4/loose.dtd"> <html> <head> <script type=3D'text/javascript' src=3D'https://ajax.google= apis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script><!--Hos= ted on CDN--> <script type=3D'text/javascript' src=3D'http://smartcontact= button.pushcall.com/jquery.pushcall-1.1.2.min.js'></script> </head> <body> <div id=3D'dcmn'></div> <script type=3D"text/javascript"> $(document).ready(function(){ $('#dcmn').pcclient({ targetName: '<your_targetname_here>= ', clientType: 'cmn' }); }); </script> </body> </html>
If you are using an older version of jQuery and are not able to upgrade = to v1.6.4 or higher you can use jQuery=E2=80=99s =E2=80=9CnoConflict=E2=80= =9D mode as described in Example code 3
<!DOCT= YPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org= /TR/html4/loose.dtd"> <html> <head> <script type=3D'text/javascript' src=3D'https://ajax.google= apis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script><!--Hos= ted on CDN--> <script type=3D"text/javascript"> pc$ =3D $.noConflict(true); </script> <script type=3D'text/javascript' src=3D'http://smartcontact= button.pushcall.com/jquery.pushcall-1.1.2.min.js'></script> </head> <body> <div id=3D'dcmn'></div> <script type=3D"text/javascript"> pc$(document).ready(function(){ pc$('#dcmn').pcclient({ targetName: '<your_targetname_here>= ', clientType: 'cmn' }); }); </script> </body> </html>
&n= bsp; Remember to use the pc$ variable in conjunction with calls to PushCall= functionality when using the no-conflict mode
&n= bsp;If your site requires the use of assets (scripts, images, etc.) that ar= e hosted on a location with SSL support , use the https equivalent of above= URL=E2=80=99s. The PushCall jQuery plugin is hosted on a CDN that supports= both http and https requests.
A call to pcclient renders the PushCall client in the specified element = in the DOM tree.
This method has several required and optional parameters.
Parameter name |
Type |
Value |
targetname |
String |
Name of the PushCall target. This value is communicated to you or create= d by you using the Self Service Portal at http://login.pushcall.com= a> |
Parameter name |
Type |
Value |
Default |
clientType |
String |
|
=E2=80=9Ccmn=E2=80=9D |
context |
object |
This object will be made the context of the event callbacks. |
undefined |
eventCallback |
function |
Method to call when an event occurs. Also see chapter Events. |
undefined |
forceHTML |
boolean |
Force the use of an HTML version of the client[1] instead of the regular Flash version |
false |
locale |
String |
Locale ID used for localization of the text messages Leave empty for auto detection based on browser language. Example: =E2=80=9Cde=E2=80=9D for German |
empty |
skin |
String or Array |
URL of the css document to load containing the skin for the HTML clients= . Leave empty for default PushCall skin. By specifying an Array, multiple c= ss can be used. This is useful for a combination of the HTML Chat and Mail = client. See Example 4 =E2=80=93 chat client with custom skin T= his value is not relevant for any of the Flash clients. |
empty |
minuteInterval introduced in v1.0.3 |
Integer |
The interval used for the timeslots offered in the CallMeLater view (in = minutes). T= his value only applies to the HTML version of the CallMeLater client. Use w= ith =E2=80=9CforceHTML: true=E2=80=9D to prevent unintended results. |
5 |
defaultPhonenumber |
String |
A predefined phone number that will be filled in the phone number input = field. When used in conjunction with an autoCall value of true thi= s number will be called automatically. |
empty |
autoCall[=
2] |
boolean |
When set to true, the client will automatically start a call for the num= ber specified in with the defaultPhonenumber parameter. |
False |
customData[3] introduced in v1.1.2 |
String |
When setting this value it will be displayed on top of the chat for a ch= at operator. This allows passing on additional customer information from th= e website. |
empty |
This example describes embedding a PushCall CallMeLater client in an HTM= L page. It uses a German locale and it=E2=80=99s forced to show the H= TML version of the client.
<div i= d=3D'dcmn'></div>
$(document= ).ready(function(){ $('#dcmn').pcclient({ targetName: '<your_targetname_here>', clientType: 'cml', locale: 'de', forceHTML: true }); });
This example demonstrates embedding a PushCall CallMeLater client in an = HTML page. When the client is initialized it will automatically start= dialing the number specified in the defaultPhonenumber parameter.
<div i= d=3D'dcmn'></div>
$(document= ).ready(function(){ $('#dcmn').pcclient({ targetName: '<your_targetname_here>', clientType: 'cmn', defaultPhonenumber: '0612345678', autoCall: true }); });
This example demonstrates embedding a PushCall Chat client in an HTML pa= ge.
<div i= d=3D'dchat'></div>
$(document= ).ready(function(){ $('#dchat').pcclient({ targetName: '<your_targetname_here>', clientType: 'chat' }); });
This example demonstrates embedding a PushCall Chat client in an HTML pa= ge and specifying a custom skin. In this example we=E2=80=99re specifying a= n Array. The plugin will load both skins. This ensures displaying the Mail = client correctly when it is loaded as a fallback for the Chat service.
<div i= d=3D'dchat'></div>
$(document= ).ready(function(){ $('#dchat').pcclient({ targetName: '<your_targetname_here>', clientType: 'chat', skin: ['http://yourdomain/path/to/skin_for_chat.css', 'http:/= /yourdomain/path/to/skin_for_mail.css'] }); });
This example demonstrates embedding a PushCall Chat client in an HTML pa= ge and specifying the customData parameter.
<div i= d=3D'dchat'></div>
$(document= ).ready(function(){ $('#dchat').pcclient({ targetName: '<your_targetname_here>', clientType: 'chat', customData: 'put your custom data here, like clientID: #A44D0= 01' }); });
See in action: http://jsfi= ddle.net/pushcall/fSJ4f/embedded/result,html,js,css
Opens the PushCall client in a popup or =E2=80=98popup-style=E2=80=99 wi= ndow. This is convenient when you don=E2=80=99t want to show the client dir= ectly in your web page.
This function binds to a click event on the selected DOM element and ope= ns the specified PushCall client.
This method has several required and optional parameters.
Parameter name |
Type |
Value |
targetname |
String |
Name of the PushCall target. This value is communicated to you or create= d by you using the Self Service Portal at http://login.pushcall.com= a> |
Parameter name |
Type |
Value |
Default |
clientType |
String |
|
=E2=80=9Ccmn=E2=80=9D |
context |
object |
This object will be made the context of the event callbacks. |
undefined |
eventCallback |
function |
Method to call when an event occurs. Also see chapter Events. |
undefined |
forceHTML |
boolean |
Force the use of an HTML version of the client[1] instead of the regular Flash version |
false |
locale |
String |
Locale ID used for localization of the text messages Leave empty for auto detection based on browser language. Example: =E2=80=9Cde=E2=80=9D for German |
empty |
skin |
String or Array |
URL of the css document to load containing the skin for the HTML clients= . Leave empty for default PushCall skin. By specifying an Array, multiple c= ss can be used. This is useful for a combination of the HTML Chat and Mail = client. See Example 4 =E2=80=93 chat client with custom skin T= his value is not relevant for any of the Flash clients. |
empty |
windowHeight |
String |
Height of the window to open in CSS style. |
Depending on clientType |
windowType |
String |
|
=E2=80=9Cauto=E2=80=9D |
windowWidth |
String |
Width of the window to open in CSS style. |
Depending on clientType |
minuteInterval introduced in v1.0.3 |
Integer |
The interval used for the timeslots offered in the CallMeLater view (in = minutes). T= his value only applies to the HTML version of the CallMeLater client. Use w= ith =E2=80=9CforceHTML: true=E2=80=9D to prevent unintended results. |
5 |
defaultPhonenumber |
String |
A predefined phone number that will be filled in the phone number input = field. When used in conjunction with the an autoCall value of true= this number will be called automatically. |
empty |
autoCall[=
3] |
boolean |
When set to true, the client will automatically start a call for the num= ber specified in with the defaultPhonenumber parameter. |
False |
customData[4] introduced in v1.1.2 |
String |
When setting this value it will be displayed on top of the chat for a ch= at operator. This allows passing on additional customer information from th= e website. |
empty |
[1] Not available = for the WebToPhone client
[2] Make sure to d= efine a stylesheet for the lightbox. See popup.css for an example
[3] Only available= for CallMeNow clients
[4] Only available= for the HTML Chat client
<link = rel=3D"stylesheet" href=3D"http://smartcontactbutton.pushcall.com/css/popov= er.css" type=3D"text/css">
<a hre= f=3D"#" id=3D'acmn'>cmn</a>
$(document= ).ready(function(){ $('#acmn').pcpopup({ targetName: '<your_targetname_here>', clientType: 'cmn', eventCallback: function(event, eventData){ console.log("eventCallback: = %o %o", event, eventData); }, context: this, forceHTML: true, windowType: 'popover', minuteInterval: 10 }); });
This method will help to present the PushCall tools based on their avail= ability.
It will search for the pcServiceType attribute on DOM child nodes of the= selected DOM element. Based on the availability of the service either the = class =E2=80=9Cdisable=E2=80=9D will be added or removed from the chi= ld node. The title attribute of this element will also be set.
This method has several required and optional parameters.
Parameter name |
Type |
Value |
targetname |
String |
Name of the PushCall target. This value is communicated to you or create= d by you using the Self Service Portal at http://login.pushcall.com= a> |
Parameter name |
Type |
Value |
Default |
context |
object |
This object will be made the context of the event callbacks. |
undefined |
eventCallback |
function |
Method to call when an event occurs. Also see chapter Events. |
undefined |
forceHTML |
boolean |
Force the use of an HTML version of the client[1] instead of the regular Flash version |
false |
locale |
String |
Locale ID used for localization of the text messages Leave empty for auto detection based on browser language. Example: =E2=80=9Cde=E2=80=9D for German |
empty |
popupEvent |
String |
A string containing one or more DOM event types, such as "click" or "sub= mit," or custom event names. The popup will open when this event is fired.<= /p> |
=E2=80=9Cclick=E2=80=9D |
skin |
String or Array |
URL of the css document to load containing the skin for the HTML clients= . Leave empty for default PushCall skin. By specifying an Array, multiple c= ss can be used. This is useful for a combination of the HTML Chat and Mail = client. See Example 4 =E2=80=93 chat client with custom skin T= his value is not relevant for any of the Flash clients. |
empty |
windowHeight |
String |
Height of the window to open in CSS style. |
Depending on clientType |
windowType |
String |
|
=E2=80=9Cauto=E2=80=9D |
windowWidth |
String |
Width of the window to open in CSS style. |
Depending on clientType |
minuteInterval introduced in v1.0.3 |
Integer |
The interval used for the timeslots offered in the CallMeLater view (in = minutes). T= his value only applies to the HTML version of the CallMeLater client. Use w= ith =E2=80=9CforceHTML: true=E2=80=9D to prevent unintended results. |
5 |
defaultPhonenumber |
String |
A predefined phone number that will be filled in the phone number input = field. When used in conjunction with the an autoCall value of true= this number will be called automatically. |
empty |
autoCall[=
3] |
boolean |
When set to true, the client will automatically start a call for the num= ber specified in with the defaultPhonenumber parameter. |
false |
customData[4] introduced in v1.1.2 |
String |
When setting this value it will be displayed on top of the chat for a ch= at operator. This allows passing on additional customer information from th= e website. |
empty |
[1] Currently only available for = the CallMeNow, CallMeLater and Chat clients
[2] Make sure to define a stylesh= eet for the lightbox. See popup.css for an example
[3] Only available for CallMeNow = clients
[4] Only available for the HTML C= hat client
There is no pcServiceType=3D=E2=80=9Dcml=E2=80=9D for CallMeLater, but t=
he availability of CallMeLater is combined with CallMeNow.
When the CallMeLater service is enabled for the specified target CallMeNow=
will always be shown as =E2=80=9Cavailable=E2=80=9D. To be able to differe=
ntiate between CallMeNow and CallMeLater an additional class =E2=80=9Cpccml=
=E2=80=9D is set on the DOM element with pcServiceType=3D=E2=80=9Dcmn=E2=80=
=9D.
<style= type=3D"text/css"> #pccb { color: green; } .disable { color: red; } </style>
<div i= d=3D"pccb"> <span pcServiceType=3D'chat' class=3D'disable'>chat</span> | <span pcServiceType=3D'mail' class=3D'disable'>mail</span> | <span pcServiceType=3D'cmn' class=3D'disable'>cmn</span> | <span pcServiceType=3D'wtp' class=3D'disable'>wtp</span> </div>
$(document= ).ready(function(){ $("#pccb").pcavailability({ targetName: '<your_targetname_here>', eventCallback: function(event, eventData){ console.log("event= Callback: %o %o", event, eventData); }, context: this, windowType: 'popup' }); });
The events thrown by the eventCallback mechanism can e.g. be used to not= ify trackers =E2=80=93 like Google Analytics =E2=80=93 to track the use of = the PushCall services. By using this functionality you can use your online = tracking service of choice (as long as it can be used in javascript)
&n= bsp;This functionality is currently only supported in the audio clients (Ca= llMeNow, CallMeLater and WebToPhone) and HTML version of the chat client.= p>
By defining a callback function (aka event listener) in javascript and p= assing this function in the settings, it will receive event notifications o= f any of the relevant state changes.
First step is to define the eventCallback function.
function e= ventHandler( event, eventData ){ //Place your event handling code here. }
The event parameter is a string. The eventData is an object containing r= elevant data based on the event thrown. See tables below for more informati= on on the possible states and data passed in the eventData object.
By listening to a specific state =E2=80=93 like =E2=80=9Creadytocall=E2= =80=9D or =E2=80=9Ccallcreated=E2=80=9D =E2=80=93 it=E2=80=99s possible to = track shows/usage of the PushCall tools with your tracker service of choice= . E.g. Google Analytics.
<scrip= t type=3D"text/javascript"> // Start standard Google Analytics code var _gaq =3D _gaq || []; _gaq.push(['_setAccount', '<PUT_YOUR_GOOGLE_ANALYTICS_ID_HERE>= ']); _gaq.push(['_setDomainName', '<PUT_YOUR_DOMAINNAME_HERE>']);&n= bsp; _gaq.push(['_trackPageview']); (function() { var ga =3D document.createElement('script'); ga.type =3D= 'text/javascript'; ga.async =3D true; ga.src =3D ('https:' =3D=3D document.location.protocol ?= 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s =3D document.getElementsByTagName('script')[0]; s.= parentNode.insertBefore(ga, s); })(); // End standard Google Analytics code </script> <script type=3D"text/javascript"> // Start PushCall event listener declaration function pcEventListener( event, eventData ){ switch (event){ case 'callcreated': if( eventData.callType =3D= =3D 'wtp' ) _gaq.push(['_t= rackEvent', &nb= sp; 'Online call for target= ' + eventData.target]); else if( eventData.callType= =3D=3D 'cmn') _gaq.push(['_trackEv= ent', &nb= sp; 'Call me Now for target ' + e= ventData.target, &nb= sp; eventData.phoneNumber]); = ; break; } } </script>
No= te the calls to _gaq.push which trigger the Google Analytics code to track = the events.
event |
eventData |
description |
initializing |
target, callType |
This event is fired when the client starts to load the library, skin and= target information. |
initialized |
target, loadTime, callType |
This event is fired when the initializing is complete and the required d= ata is loaded. |
readytocall |
target, callType |
This event is fired when the AudioClient is initialized, the target is O= K and the client is ready. |
creatingcall |
target, callType, (phoneNumber)1, (date) 2 |
This event is fired when the user starts a call and the request is send = to the PushCall server. |
callcreated |
target, callType, (phoneNumber) 1, (date) 2 |
This event is fired when the PushCall server has accepted the the reques= t to setup the call. |
callfailed |
target, callType, reason, (phoneNumber) 1 |
This event is fired when an error occurred during the creation of a call= |
callqueued |
target, callType, queuePosition |
This event is fired when the call was placed in the queue (the max. numb= er of simultaneous channels has been reached). |
ocstartingaudiotest 3 |
target |
This event is fired when the audio test(speakers and microphone) is star= ted. |
ocaudiotestsuccess 3 |
target |
This event is fired when the audio test has been completed successfully.= |
ocaudiotestfailed 3 |
target, audioTestStep |
This event is fired when the audio test failed at any step in the test.<= /p> |
unknowntarget |
target |
This event is fired when the specified target is unknown. |
closed |
target, callType |
This event is fired when the client is diaplyed outside the specified of= fice hours. |
notavailable |
target, callType |
This event is fired when the service is not available for this target.= p> |
error |
target, reason |
This event is fired when an error occurred. See the reason in the data o= bject for more details. |
1 Only with CallMeNow and CallMeLater
2 Only wi=
th CallMeLater
3 Only with WebToPhone
Name |
Type |
Description |
target |
String |
The target name used by the client. |
loadTime |
Number |
The time in milliseconds that it took to load all the required data. = |
callType |
Int (ePCCallType) |
Specifies the type of call for the event. See table below |
phoneNumber |
String |
The phone number that is being used for the call. |
date |
Date |
The requested date for the CallMeLater call. |
reason |
String |
This contains more information why a call failed or an error occurred.= p> |
queuePosition |
Numer |
The position in the queue at the time of the call request. |
audioTestStep |
Int (ePCAudioTestStep) |
Indicates at which point the audio test failed. See table below |
=C2=AD
event |
eventData |
description |
initializing |
target, clientType |
This event is fired when the client starts to load the library, skin and= target information. |
initialized |
target, clientType |
This event is fired when the initializing is complete and the required d= ata is loaded. |
requestchat |
target, clientType |
This event is fired when a new chat request was submitted. |
chatanswered |
target, clientType |
This event is fired when the chat request was answered by an operator.= p> |
chatended |
target, clientType |
This event is fired when the PushCall server has accepted the the reques= t to setup the call. |
chattimeout |
target, clientType |
This event is fired when a chat request timed out |
chatcanceled |
target, clientType |
This event is fired when the chat request was canceled |
unknowntarget |
target, clientType |
This event is fired when the specified target is unknown. |
closed |
target, clientType |
This event is fired when the client is opened when no chat operator is a= vailable |
Name |
Type |
Description |
target |
String |
The target name used by the client. |
clientType |
String |
The type of the client. For the HMTL chat client the value is =E2=80=9Cc= hat=E2=80=9D. |
event |
eventData |
description |
initializing |
target, clientType |
This event is fired when the client starts to load the library, skin and= target information. |
initialized |
target, clientType |
This event is fired when the initializing is complete and the required d= ata is loaded. |
mailsent |
target, clientType |
This event is fired when the mail is sent successfully. |
unknowntarget |
target, clientType |
This event is fired when the specified target is unknown. |
notavailable |
target, clientType |
This event is fired when the service is not enabled for the specified ta= rgetname |
error |
target, clientType |
This event is fired when mail sending failed |
Name |
Type |
Description |
target |
String |
The target name used by the client. |
clientType |
String |
The type of the client. For the HMTL chat client the value is =E2=80=9Cm= ail=E2=80=9D. |
<!DOCT= YPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org= /TR/html4/loose.dtd"> <html> <head> <script type=3D'text/javascript' src=3D'https://ajax.google= apis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script><!--Hos= ted on CDN--> <script type=3D'text/javascript' src=3D'http://smartcontact= button.pushcall.com/jquery.pushcall-1.1.2.min.js'></script> </head> <body> <div id=3D'dcmn'></div> <script type=3D"text/javascript"> // Start standard Google Analytics code var _gaq =3D _gaq || []; _gaq.push(['_setAccount', '<PUT_YOUR_GOOGLE_ANALYTIC= S_ID_HERE>']); _gaq.push(['_setDomainName', '<PUT_YOUR_DOMAINNAME_H= ERE>']); _gaq.push(['_trackPageview']); (function() { var ga =3D document.createElement('script'); ga.type =3D= 'text/javascript'; ga.async =3D true; ga.src =3D ('https:' =3D=3D document.location.protocol ?= 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s =3D document.getElementsByTagName('script')[0]; s.= parentNode.insertBefore(ga, s); })(); // End standard Google Analytics code </script> <script type=3D"text/javascript"> function pcEventListener(event, eventData) { switch (event) { case 'initializing': if (eventData.callType=3D=3D'wtp') { _gaq.push(['_trackEvent', = 'WebToPhone window opened for target ' + eventData.target]); } else if (eventData.callType=3D=3D'cm= n') { _gaq.push(['_trackEvent', = 'CallMeNow window opened for target ' + eventData.target]); } else if (eventData.callType=3D=3D'cm= l') { _gaq.push(['_trackEvent', = 'CallMeLater window opened for target ' + eventData.target]); } break; case 'callcreated': if (eventData.callType=3D=3D'wtp') { _gaq.push(['_trackEvent', = 'WebToPhone requested for target ' + eventData.target]); } else if (eventData.callType=3D=3D'cm= n') { _gaq.push(['_trackEvent', = 'CallMeNow requested for target ' + eventData.target, eventData.phoneNumber= ]); } else if (eventData.callType=3D=3D'cm= l') { _gaq.push(['_trackEvent', = 'CallMeLater requested for target ' + eventData.target, eventData.phoneNumb= er]); } break; } } $(document).ready(function(){ $('#dcmn').pcclient({ targetName: '<your_targetname_here&= gt;', clientType: 'cmn', eventCallback: pcEventListener, context: this }); }); </script> </body> </html>
The CallMeNow and CallMeLater HTML client comes with a default =E2=80=9C= PushCall=E2=80=9D style design. By defining a custom CSS file it=E2=80=99s = possible to apply custom styling.
The CallMeNow and CallMeLater client are build around an HTML structure = consisting of several HTML elements, like DIVs, SPANs and SELECTs. Each of = these elements has a class attribute defined. Depending on which of the cli= ents is active an additional class =E2=80=98cmn=E2=80=99 or =E2=80=98cml=E2= =80=99 will be applied to each element in the HTML structure.
<div i= d=3D"dcmn2" class=3D"pcac"> <div class=3D"pcac_inputComponents" style=3D"opacity: 1;"> <div class=3D"pcac_head"> <p class=3D"pcac_title" style=3D"">Let us call you= </p> <p class=3D"pcac_desc" style=3D"">Let us call you = on your regular phone. Please enter your phone number.</p> </div> <div class=3D"pcac_countryContainer"> <select name=3D"country"> <option value=3D"COUNTRY_CODE">COUNTRY= LABEL</option> </select> </div> <div class=3D"pcac_phoneNumberContainer"> <div class=3D"pcac_phoneNumberArea"> <span class=3D"pcac_prefix">+31</span>= ; <input type=3D"text" class=3D"pcac_phoneNumber= pcac_phoneNumber_desc"> </div> </div> <div class=3D"pcac_dateTimeContainer" style=3D"display: none;"> <select name=3D"date" class=3D"pcac_date"> <option value=3D"DATE_VALUE">DATE LABEL</option> </select> <select name=3D"hours" class=3D"pcac_hours"> <option value=3D"HOUR_VALUE">10</option> </select> <div class=3D"pcac_hourMinuteSeparator">:</div&= gt; <select name=3D"minutes" class=3D"pcac_hours"> <option value=3D"MINUTE_VALUE">MINUTE LABEL</op= tion> </select> </div> <div class=3D"pcac_callButtonContainer" style=3D""> <button type=3D"button" class=3D"pcac_cmn_call">Ca= ll me</button> </div> <div class=3D"pcac_switchTypeContainer" style=3D""> <a href=3D"#" class=3D"pcac_simpleButton"><span= >Choose a Date/Time</span></a> </div> <div class=3D"pcac_backButtonContainer" style=3D"display: none;"> <a href=3D"#"><span>Back</span></a&= gt; </div> </div> </div>
With the introduction of v1.0.3 an additional (dynamic) class value is a= dded to each element of the HTML client representing the state of the clien= t. This allows designers/CSS implementers to differentiate the designs base= d on the state of the client. E.g. different backgrounds and even different= sizes of the client are possible. See below for a table of all possible st= ates and their respective class value:
class value |
description |
idle |
The client is in the idle state and is ready for user input |
cmn_success |
A successful request for a CallMeNow call has been made |
cml_success |
A successful request for a CallMeLater call has been made |
queued |
The call had been placed in a queue. The HTML client is showing the numb= er in the queue. |
notification |
The client is showing a notification message. E.g. the client is display= ed outside opening hours or is temporarily not available |
error |
An error is displayed by the client |
Only one of these values will be active at a time.
Table of contents