Smart Contact Overlay Menu



Back to Support Page

The Smart Contact Overlay Menu (a.k.a. Overlay Menu) is part of the Smart Contact Button family. The Pizza Button is the other member of this familiy.

The Overlay Menu is menu that - when opened - is displayed on top of the web page. The menu can show up to 4 icons representing the 4 possible PushCall contact tools:

  • Call Me Now
  • Chat
  • Mail
  • Click-To-Call
Clicking on one of the icons will open a popup window with the requested contact tool

The icons reflect the availability of each of their contact tool. Depending on your configuration, they will show greyed-out or will be hidden upon unavailability of the service. Outside office hours the Call Me Now and Click-To-Call icons will be disabled (greyed-out) or hidden. The same happens to the Chat icon when no chat operators are available. When you've enabled the mail service for your account, this icon will allways be visible.

Example

The Overlay Menu can be opened using your own inline button or using the corner button.

Corner button

See the right bottom corner of this webpage for an example of the corner button. Hover your mouse pointer over the button to raise it. Click on it to open the Overlay Menu. Scroll the webpage and notice that it stays in the corner.

Inline button

Here's an example of an inline button:
Click and test it yourself!

Web page integration

Both options (inline and corner button) are very easy to integrate into any existing webpage. Simply include any of the following code blocks in the <body> of your HTML page.

For the corner button use: 
<script language="JavaScript" type="text/javascript">
var pcScriptLocation = document.location.protocol+'//smartcontactbutton.pushcall.com/pcscom.js';
document.write(unescape("%3Cscript src='" + pcScriptLocation + "' type='text/javascript'%3E%3C/script%3E"));
</script>
<script language="JavaScript" type="text/javascript">
pcscom = new PCSCOM( 'yourtargetname' );
pcscom.createCornerButton();
</script>

For an inline button use: 
<a href="#" onClick="pcscom.toggleMenu(); return false;">
  <img src="button.jpg" border=0 />
</a>
<script language="JavaScript" type="text/javascript">
var pcScriptLocation = document.location.protocol+'//smartcontactbutton.pushcall.com/pcscom.js';
document.write(unescape("%3Cscript src='" + pcScriptLocation + "' type='text/javascript'%3E%3C/script%3E"));
</script>
<script language="JavaScript" type="text/javascript">
pcscom = new PCSCOM( 'yourtargetname' );
</script>
Please note that you should replace yourtargetname with the name of your target.

You can also use a combination of an inline button and an corner button, like this page does.

Optional features

Some optional parameters are available for customization of the Overlay Menu and corner button.


The language of the text displayed on the overlay menu can be customized by setting an optional parameter 'locale' in the constructor of the PCSCOM object: 
pcscom2 = new PCSCOM( 'yourtargetname', {locale: 'es'} );
The type of this parameter is a string and represents the 2 character ISO 639-1 language code. The default value is automatically determined by the browser language.
The following languages are currently supported:
  • English (en)
  • French (fr)
  • Spanish (es)
  • German (de)
  • Dutch (nl)

By default the icons are hidden for the services that are not available (NA). (Services are not available when they're not enabled for your account) By setting showOnNA to true, the icons of not available services will be show greyed-out. 
pcscom = new PCSCOM( 'yourtargetname', { showOnNA: true } );
The type of this parameter is boolean. The default value is false.

By default the icons are shown greyed-out for the services that are closed. (Services are 'closed' when used out of office hours) By setting showOnClosed to false, the icons of closed services will be hidden. 
pcscom = new PCSCOM( 'yourtargetname', { showOnClosed: false } );
The type of this parameter is boolean. The default value is true.

The color of the available contact tool icons can be customized by setting an optional parameter 'baseColor' in the call to PCSCOM: 
pcscom = new PCSCOM( 'yourtargetname', { baseColor:'0xFF0000' } );
The value of this parameter is an hexidecimal RGB value represented as string. The default value is '0xFD6700'. (PushCall orange)
Some example values:
ColorValue
Red'0xFF0000'
Green'0x00FF00'
Blue'0x0000FF'
PushCall orange'0xFD6700'

Specifying multiple optional parameters can be achieved by comma-seperating these parameters: 
pcscom = new PCSCOM( 'yourtargetname', { baseColor: '0xFF0000', showOnNA: true } );

It's also possible to change the dimensions of the popup windows. 
pcscom.setOnlineCallingSize( width, height );
pcscom.setCallMeNowSize( width, height );
pcscom.setChatSize( width, height );
pcscom.setMailSize( width, height );

The default label for the corner button is "Contact Us". This caption is customizable by using the captionText parameter: 
pcscom.createCornerButton( {captionText: 'Click Me!' } );
The type of this parameter is string.

By default the corner button uses the same color as specified in the Overlay Menu, which is orange by default. This color is customizable by using the baseColor parameter: 
pcscom.createCornerButton( {baseColor: '0xFF0000' } );
The value of this parameter is an hexidecimal RGB value represented as string. For example values see the above table.

The raised corner button displays icons for each of the PushCall contact tools. Each of these icons can be hidden individually. By using any of the following parameters:
  • showMailIcon
  • showChatIcon
  • showOnlineCallingIcon
  • showCallMeNowIcon
In the following example we only want to show the Call Me Now and Click-To-Call icons: 
pcscom.createCornerButton( { showMailIcon: false, showChatIcon: false } );
The type of these parameters is a boolean. De default value of each of these parameters is true.

Compatibility

This functionality is tested and proven to work in all 5 major browsers:
  • Internet Explorer (6,7 & 8)
  • Mozilla FireFox (2 & 3)
  • Google Chrome (3)
  • Opera (9)
  • Safari (3 & 4)
It's also compatible with both the HTTP- and HTTPS-protocol. So you can safely integrate this on a webpage that's served over HTTPS.

Remarks

It's possible to put multiple Smart Contact Overlay Menus on one page, just make sure to use a different id for the <div>-block (and the PCSCPB call)

PushCall B.V.
Nieuwe Plantage 58 - 2611 XK - Delft - The Netherlands
Tel. +31-(0)88-007 18 00 - info@pushcall.com