Show
Our documentation to help you customize CallPage to fit your websiteWe offer a powerful Javascript API that gives you flexibility and control over the behavior of the CallPage window. You can decide, how, when and where to display the window on your site, as well as view and update visitor information.
We encourage developers to write their own Javascript to extend the CallPage functionality on their sites. We're very excited when we see examples of the API used in creative ways. Let us know if you have an interesting implementation and we may publish it. Email with your creations! Testing and DebuggingThe API is intended to be self-serve. Although we can't debug or write JavaScript for you, there are some helpful ways to test your own code during development.
Verbose mode:CallPage API has
Alternative debug methods:
SupportIf you have a problem with an API call, such as it not returning the correct value or not performing the intended action, email with a link to a page where we can test the functionality and information about the steps that you've taken to debug so far. Widget API allows you to interact with widget window, button and others interactive parts. AnchorYou could manipulate with widget using anchor Opens widget on site enteringThe simplest way - redirect visitor
to URL with anchor E.g.
Opens widget on link clickingTry it
Opens CallPage popup window
Closes CallPage popup window Toggle scoring system (api.scoring.toggle)
Toggles scoring system on/off. Scoring system - a system of classifying lead according to quality using rules. When any of rules is triggered the score value is changed. When value reached the defined one, CallPage marks user as engaged and triggers popup with custom title displayed.
Set variable of custom rule (api.scoring.setVariable)
Scoring system provides special custom rule. When you create one in the dashboard you specify its value and comparison condition. JavaScript API
Set department (api.setDepartment)
You can divide CallPage managers into different departments, such as "Billing" or "Support". For example, if this parameter will point to group "Billing", all visitors entering ordering the call will talk with managers from this group and not the "Support" group.
Perform a real-time call through CallPage API.
Perform a real-time call through CallPage API or if there are no available managers right now, schedule a call on the first available timeslot.
Auto-show button (api.button.autoshow)
Shows CallPage button after timeout defined in dashboard Show button (api.button.show)
Shows CallPage button with animation immediately Hide button (api.button.hide)
Hides CallPage button with animation Show hint (api.hint.show)
Shows CallPage hint Hide hint (api.hint.hide)
Hides CallPage hint Show eyecatcher (api.eyecatcher.show)
Shows eye catcher Hide eyecatcher (api.eyecatcher.hide)
Hides eye catcher Start countdown timer (api.countdown.start)
Starts countdown timer on custom element. Allows you to embed countdown timer in your form. This function requires custom markup for valid time updating. Element
CallbacksCallbacks let you bind a custom JavaScript function to an event. For example, your function can be invoked every time the widget is opened. It's a great way to extend custom functionality and deeply integrate your site with CallPage. onReady
Code included inside
Event
Event
Event
Event onButtonShowed
Event onCallCreated
Event onCallRealTime
Event onCallScheduled
Event onCallInProgress
Event onCallCompleted
Event Statistics APIStatistics API allows you to grab some useful information about visitor, widget, status, etc. getCallId
Returns the unique identificator for the current attempt. The getManagers
Returns array of managers which belongs to this widget. getVisitorId
Returns the unique identificator of the current visitor. hasAvailableManagers
Returns Tracking code
Insert tracking code right before </body> closing tagCallPage tracking code is available in the CallPage app. You can customize the tracking code to send additional information about your visitors to CallPages applications. CallPage code snippetsCallPage embed into form with countdown timerCheck JSFiddle Custom CSSYou can
spice up your chat window using custom CSS styles and pre-defined Learn SASS / SCSSLearn SCSS How it works
Responsive / mobile websites
CallPage allows you easily define rules only for certain devices. Currently
there is only Theming
There are two widget themes which you can choose in the dashboard: light and dark ones. But if they are not enough for you, use
You can easily control "intelligent" behavior by using optional arguments described below.
Background color
Sets custom background color of the elements: widget, selected contact type tab, button tooltip, agreement tooltip and so on. Sometimes we want to highlight certain state of element. For example when contact type tab is selected. That's why we need diffrent variations of background color. Fortunately you don't have to worry about all those colors because Depending on which color user provides mixin will generate lighter or darker colors. Let's say you provide dark color, then the color of the selected tab will be light. And vice versa.
Background color of active elements
Sets background color for active elements: selected contact type.
Secondary background color
Sets background color for elements such as: circle of countdown timer and inactive start in star rating.
Divider color
Sets color for elements such as: tabs dividers, input border, border of button tooltip, link underline ans so on.
This mixin uses under the hood
Sets the border color of button tooltip. Tooltip is the component which appears over widget button. It's used for one click to call feature and showing info about active call if the widget is closed.
Text color
Sets color for titles, paragraphs, close icon etc. Callpage widget uses different colors for main text and secondary text. Fortunatelly, you don't have to worry about colors variations. You need only pass the If the generated color of secondary text doesn't match your needs, you can directly call
This mixin uses under the hood Small text color
Sets color for elements such as agreement short text or count of social shares.
Brand button customization
Applies styles for the brand button. |