### Show Hint (api.hint.show)

Source: https://callpage.github.io/documentation-js

Shows the CallPage hint. No specific setup is required beyond calling the function.

```javascript
callpage('api.hint.show');
```

--------------------------------

### Start Countdown Timer (api.countdown.start)

Source: https://callpage.github.io/documentation-js

Starts a countdown timer on a custom element. The target element must contain child elements with classes .cp-countdown__seconds and .cp-countdown__miliseconds for time updating. Callbacks can be provided for start and end events.

```html
<div id="countdown">
    <span class="cp-countdown__seconds">29</span>
    <span class="cp-countdown__miliseconds">99</span>
</div>
```

```javascript
callpage(
    'api.countdown.start',
    // element selector
    '#countdown',
    // on start callback
    function() {
        // code when countdown starts
    },
    // on end callback
    function() {
        // code when countdown ends
    }
);
```

--------------------------------

### Widget API - Start Countdown Timer

Source: https://callpage.github.io/documentation-js

Starts the countdown timer in the CallPage widget.

```APIDOC
## Start countdown timer (api.countdown.start)

### Description
Starts the countdown timer in the CallPage widget.

### Method
javascript

### Endpoint
api.countdown.start()

```

--------------------------------

### CallPage Tracking Code Snippet

Source: https://callpage.github.io/documentation-js

This script should be placed in your HTML, preferably before the closing `</body>` tag. Ensure your widget ID is correctly inserted. The script handles asynchronous loading and prevents duplicate installations.

```html
<!-- BEGIN callpage.io widget -->
<script type="text/javascript">
    var __cp = {
        // your encrypted widget ID, could be find in dashboard
        id: "YOUR-ENCRYPTED-WIDGET-ID",
        version: '1.1'
    };

    // async loader
    (function(window, document) {
        var loader = function() {
            var cp = document.createElement('script'); cp.type = 'text/javascript'; cp.async = true;
            cp.src = "//api.callpage.io+themes+widget+build+js+callpage=js".replace(/[+]/g,'/').replace(/[=]/g,'.');
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(cp, s);
        };

        window.addEventListener ? window.addEventListener("load", loader, false) : window.attachEvent("onload", loader);

        // prevent from 2 code instances on site
        if (window.callpage) {
            alert('You could have only 1 CallPage code on your website!');
        } else {

            // queue of API calls
            window.callpage = function(method) {
                if (method == '__getQueue') {
                    return this.methods;
                }
                else if (method) {
                    if (typeof window.callpage.execute === 'function') {
                        window.callpage.execute.apply(this, arguments);
                    }
                    else {
                        (this.methods = this.methods || []).push({
                            arguments: arguments
                        });
                    }
                }
            };

            // autoshow button
            callpage('api.button.autoshow');
        }
    })(window, document);
</script>
<!-- END callpage.io widget -->
```

--------------------------------

### api.countdown.start

Source: https://callpage.github.io/documentation-js

Starts the CallPage countdown timer on a specified element. It allows embedding a countdown timer in forms and requires specific child elements for time updating.

```APIDOC
## Start countdown timer (api.countdown.start)

### Description
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 `selector` should contain 2 child elements with selectors `.cp-countdown__seconds` and `cp-countdown__miliseconds`.

### Method
Callpage JavaScript API

### Endpoint
api.countdown.start

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

#### Parameters
- **selector** (string) - yes - Valid jQuery selector string
- **onStart** (function) - no - Callback will be executed when countdown starts
- **onEnd** (function) - no - Callback will be executed when countdown ends

### Request Example
```html
<div id="countdown">
    <span class="cp-countdown__seconds">29</span>
    <span class="cp-countdown__miliseconds">99</span>
</div>
```

```javascript
callpage(
    'api.countdown.start',
    // element selector
    '#countdown',
    // on start callback
    function() {
        // code when countdown starts
    },
    // on end callback
    function() {
        // code when countdown ends
    }
);
```

### Response
None
```

--------------------------------

### Statistics API - Get Managers

Source: https://callpage.github.io/documentation-js

Retrieves a list of available managers.

```APIDOC
## getManagers

### Description
Retrieves a list of available managers.

### Method
javascript

### Endpoint
getManagers()

```

--------------------------------

### Get Managers

Source: https://callpage.github.io/documentation-js

Retrieves an array of managers associated with the widget. This is useful for understanding who is available or part of the system.

```javascript
callpage('event.onReady', function() {
    // get managers
    var managers = callpage('stats.getManagers');
    console.log(managers);
});

```

```json
[
    {
        "id":28,
        "name":"Admin",
        "avatar":"url-to-avatar",
        "departments":[
            {
                "id": 1,
                "name": "Owner"
            }
        ]
    },
    {
        "id":29,
        "name":"Manager",
        "avatar":"url-to-avatar",
        "departments":[
            {
                "id": 1,
                "name": "Sales"
            }
        ]
    }
]

```

--------------------------------

### Statistics API - Get Visitor ID

Source: https://callpage.github.io/documentation-js

Retrieves the current visitor ID.

```APIDOC
## getVisitorId

### Description
Retrieves the current visitor ID.

### Method
javascript

### Endpoint
getVisitorId()

```

--------------------------------

### Get Call ID

Source: https://callpage.github.io/documentation-js

Retrieves the unique identifier for the current call attempt. The callId is retained until the page is refreshed. Returns null if the call has not yet started.

```javascript
callpage('event.onReady', function() {
    // get callId
    var callId = callpage('stats.getCallId');
    console.log(callId);
});

```

--------------------------------

### Statistics API - Get Call ID

Source: https://callpage.github.io/documentation-js

Retrieves the current call ID.

```APIDOC
## getCallId

### Description
Retrieves the current call ID.

### Method
javascript

### Endpoint
getCallId()

```

--------------------------------

### Get Visitor ID

Source: https://callpage.github.io/documentation-js

Retrieves the unique identifier for the current visitor. This ID helps in tracking individual visitor interactions across sessions.

```javascript
callpage('event.onReady', function() {
    // get unique visitor ID
    var visitorId = callpage('stats.getVisitorId');
    console.log(visitorId);
});

```

--------------------------------

### getCallId

Source: https://callpage.github.io/documentation-js

Returns the unique identifier for the current attempt. The callId is remembered even when the call ends until the page is refreshed. Returns null if callId is unknown (e.g., call has not yet started).

```APIDOC
## getCallId

### Description
Returns the unique identificator for the current attempt. The `callId` is remembered even when the call ends until the page is refreshed. Returns null if `callId` is unknown (e.g. call has not yet started).

### Method
GET (implied)

### Endpoint
stats.getCallId

### Parameters
None

### Response
#### Success Response
- **callId** (string | null) - The unique identifier for the current attempt or null if unknown.
```

--------------------------------

### Widget API - Perform a Call

Source: https://callpage.github.io/documentation-js

Initiates a call through the widget.

```APIDOC
## Perform a call (api.widget.call)

### Description
Initiates a call through the widget.

### Method
javascript

### Endpoint
api.widget.call()

```

--------------------------------

### api.button.show

Source: https://callpage.github.io/documentation-js

Shows the CallPage button immediately with an animation.

```APIDOC
## api.button.show

### Description
Shows the CallPage button immediately with an animation.

### Method
`callpage('api.button.show');`
```

--------------------------------

### Responsive Styles for Tablets and Desktops

Source: https://callpage.github.io/documentation-js

Apply custom styles to the CallPage heading for tablets and desktops using SCSS media query.

```scss
@include media-breakpoint-up(tablet) {
    // these rules will be applied for tablets and desktops.

    #callpage .cp-call__heading {
        // your styles
    }
}

```

--------------------------------

### Perform a Real-Time Call

Source: https://callpage.github.io/documentation-js

Initiate a real-time call using `api.widget.call`. This method accepts call parameters and an optional callback function to handle call progress and results.

```javascript
callpage('api.widget.call', params, callback);
```

```javascript
// event when the call is ordered. Use callback to get callRequestId
callpage('api.widget.call', {tel: '+48570123123'}, function(response) {

    var callRequestId = response? response.id : null;

    // it means that we successfully ordered a call and have its ID
    if (callRequestId) {
        console.log("Unique call ID: " + callRequestId);
    }
    else {
        // put here any logic if call was unsuccessful (e.g. no managers available, or after hours)
    }
});
```

--------------------------------

### Widget API - Show Hint

Source: https://callpage.github.io/documentation-js

Shows a hint in the CallPage widget.

```APIDOC
## Show hint (api.hint.show)

### Description
Shows a hint in the CallPage widget.

### Method
javascript

### Endpoint
api.hint.show()

```

--------------------------------

### Bind to Widget Ready Event

Source: https://callpage.github.io/documentation-js

Execute code once the CallPage widget is loaded and all its resources are available. This is the initial event to bind to.

```javascript
callpage('event.onReady', function() {
    // your code here
});

```

--------------------------------

### Open widget (api.widget.open)

Source: https://callpage.github.io/documentation-js

Opens the CallPage popup window.

```APIDOC
## Open widget (api.widget.open)

### Description
Opens CallPage popup window.

### Method
```javascript
callpage('api.widget.open');
```
```

--------------------------------

### Widget API - Show Button

Source: https://callpage.github.io/documentation-js

Shows the CallPage button.

```APIDOC
## Show button (api.button.show)

### Description
Shows the CallPage button.

### Method
javascript

### Endpoint
api.button.show()

```

--------------------------------

### Widget API - Perform a Call or Schedule

Source: https://callpage.github.io/documentation-js

Performs a call or schedules an order on the first available slot.

```APIDOC
## Perform a call or order on the first available slot (api.widget.schedule)

### Description
Performs a call or schedules an order on the first available slot.

### Method
javascript

### Endpoint
api.widget.schedule()

```

--------------------------------

### Show CallPage Button Immediately

Source: https://callpage.github.io/documentation-js

Displays the CallPage button with an animation effect immediately.

```javascript
callpage('api.button.show');

```

--------------------------------

### Widget API - Open Widget

Source: https://callpage.github.io/documentation-js

Opens the CallPage widget.

```APIDOC
## Open widget (api.widget.open)

### Description
Opens the CallPage widget.

### Method
javascript

### Endpoint
api.widget.open()

```

--------------------------------

### api.hint.show

Source: https://callpage.github.io/documentation-js

Shows the CallPage hint. This function is used to make a hint visible to the user.

```APIDOC
## Show hint (api.hint.show)

### Description
Shows CallPage hint.

### Method
Callpage JavaScript API

### Endpoint
api.hint.show

### Parameters
None

### Request Example
```javascript
callpage('api.hint.show');
```

### Response
None
```

--------------------------------

### Set Background Color to Black with Tooltip Adjustment

Source: https://callpage.github.io/documentation-js

Sets 'black' as the background color and adjusts the tooltip color to be 10% lighter than 'black'. This demonstrates adjusting a dark base color for tooltips.

```scss
// Sets 'black' as background color of the elements and 
// make the color of agreement tooltip 10% LIGHTER than given 'black' color.
@include background-color(black, $tooltip-amount: 10%);
```

--------------------------------

### Set Background Color with Tooltip Adjustment

Source: https://callpage.github.io/documentation-js

Sets 'lightblue' as the background color and adjusts the tooltip color to be 10% darker than 'lightblue'. Use this when specific tooltip color adjustments are needed.

```scss
// Sets 'lightblue' as background color of the elements and 
// make the color of agreement tooltip 10% DARKER than given 'ligthblue' color.
@include background-color(ligthblue, $tooltip-amount: 10%);
```

--------------------------------

### Perform a Call

Source: https://callpage.github.io/documentation-js

Initiates a real-time call through the CallPage API. You can specify the phone number to call and provide a callback function to handle events during the call.

```APIDOC
## Perform a call (api.widget.call)

### Description
Initiates a real-time call via the CallPage API.

### Method
`callpage('api.widget.call', params, callback);`

### Parameters
#### Path Parameters
- **params** (object) - Required - Contains call parameters.
  - **tel** (string) - Required - Phone number to call in E164 format (e.g., `+48888888888`).
  - **department_id** (number) - Optional - Department unique ID (e.g., `123`). Can also be set using `api.setDepartment`.
#### Query Parameters
- **callback** (function) - Optional - A callback function executed when the call is in progress.

### Request Example
```javascript
// event when the call is ordered. Use callback to get callRequestId
callpage('api.widget.call', {tel: '+48570123123'}, function(response) {
    var callRequestId = response ? response.id : null;
    // it means that we successfully ordered a call and have its ID
    if (callRequestId) {
        console.log("Unique call ID: " + callRequestId);
    } else {
        // put here any logic if call was unsuccessful (e.g. no managers available, or after hours)
    }
});
```
```

--------------------------------

### Widget API - Auto-show Button

Source: https://callpage.github.io/documentation-js

Automatically shows the CallPage button.

```APIDOC
## Auto-show button (api.button.autoshow)

### Description
Automatically shows the CallPage button.

### Method
javascript

### Endpoint
api.button.autoshow()

```

--------------------------------

### Responsive Styles for Mobile and Small Tablets

Source: https://callpage.github.io/documentation-js

Apply custom styles to the CallPage heading for mobile devices and small tablets using SCSS media query.

```scss
@include media-breakpoint-down(tablet) {
    // these rules will be applied for mobiles and small tablets.

    #callpage .cp-call__heading {
        // your styles
    }
}

```

--------------------------------

### Statistics API - Has Available Managers

Source: https://callpage.github.io/documentation-js

Checks if there are any available managers.

```APIDOC
## hasAvailableManagers

### Description
Checks if there are any available managers.

### Method
javascript

### Endpoint
hasAvailableManagers()

```

--------------------------------

### api.widget.schedule

Source: https://callpage.github.io/documentation-js

Schedules a call to the first available timeslot. It takes a parameters object including the phone number and an optional department ID, and an optional callback function to handle the response.

```APIDOC
## api.widget.schedule

### Description
Schedules a call to the first available timeslot. It takes a parameters object including the phone number and an optional department ID, and an optional callback function to handle the response.

### Method
`callpage('api.widget.schedule', params, callback);`

### Parameters
#### Params Object
- **params** (object) - Required - Object containing call details.
  - **tel** (string) - Required - Phone number to call in E164 format (e.g., _+4888888888_).
  - **department_id** (string) - Optional - Department unique ID (e.g., _123_). Can also be set via `api.setDepartment`.

#### Callback Function
- **callback** (function) - Optional - This function will be executed when the call is in progress. It receives a response object containing the `callRequestId`.

### Request Example
```javascript
callpage('api.widget.schedule', {tel: '+48570123123'}, function(response) {
    var callRequestId = response ? response.id : null;
    if (callRequestId) {
        console.log("Unique call ID: " + callRequestId);
    } else {
        // Handle unsuccessful call order
    }
});
```

### Response
#### Success Response
- **id** (string) - The unique ID of the ordered call.
```

--------------------------------

### Bind to Widget Loaded Event

Source: https://callpage.github.io/documentation-js

Execute code when the CallPage widget has finished loading and is ready for interaction. This event fires after 'onReady'.

```javascript
callpage('event.onWidgetLoaded', function() {
    // your code here
});

```

--------------------------------

### Widget API - Toggle Scoring System

Source: https://callpage.github.io/documentation-js

Toggles the scoring system for the widget.

```APIDOC
## Toggle scoring system (api.scoring.toggle)

### Description
Toggles the scoring system for the widget.

### Method
javascript

### Endpoint
api.scoring.toggle()

```

--------------------------------

### Schedule a Call with Callback

Source: https://callpage.github.io/documentation-js

Schedules a call to a specified phone number and executes a callback function when the call is in progress. The `department_id` can be set here or using `api.setDepartment`.

```javascript
callpage('api.widget.schedule', params, callback);
```

```javascript
// event when the call is ordered. Use callback to get callRequestId
callpage('api.widget.schedule', {tel: '+48570123123'}, function(response) {

    var callRequestId = response? response.id : null;

    // it means that we successfully ordered a call and have its ID
    if (callRequestId) {
        console.log("Unique call ID: " + callRequestId);
    }
    else {
        // put here any logic if call was unsuccessful
    }
});

```

--------------------------------

### Customize Background Active Amount

Source: https://callpage.github.io/documentation-js

Sets 'lightblue' as the widget theme and makes the background of active elements 12% darker. Useful for highlighting selected items.

```scss
// Sets 'lightblue' as background color of the elements and 
// make the color of agreement tooltip 12% DARKER than given 'ligthblue' color.
@include main-color(lightblue, $background-active-amount: 12%);
```

--------------------------------

### Open CallPage Widget on Site Entry

Source: https://callpage.github.io/documentation-js

Use this anchor link to redirect visitors to a URL that opens the CallPage widget upon page load.

```html
<a href="#cp-widget">Click to open CallPage window</a>
```

--------------------------------

### Customize Brand Button Styles

Source: https://callpage.github.io/documentation-js

Apply custom styles such as letter spacing and font size to the brand button using this mixin.

```scss
@include brand-button {
  letter-spacing: 1px;
  font-size: 16px;
}
```

--------------------------------

### Widget API - Set Department

Source: https://callpage.github.io/documentation-js

Sets the department for the widget.

```APIDOC
## Set department (api.setDepartment)

### Description
Sets the department for the widget.

### Method
javascript

### Endpoint
api.setDepartment(departmentId)

### Parameters
#### Path Parameters
- **departmentId** (string) - Required - The ID of the department.

```

--------------------------------

### Bind to Button Showed Event

Source: https://callpage.github.io/documentation-js

Execute code when the CallPage button is displayed on the page. Use this to confirm visibility or trigger related actions.

```javascript
callpage('event.onButtonShowed', function() {
    // your code here
});

```

--------------------------------

### Widget API - Hide Hint

Source: https://callpage.github.io/documentation-js

Hides a hint in the CallPage widget.

```APIDOC
## Hide hint (api.hint.hide)

### Description
Hides a hint in the CallPage widget.

### Method
javascript

### Endpoint
api.hint.hide()

```

--------------------------------

### Bind to Call Created Event

Source: https://callpage.github.io/documentation-js

Execute code when a visitor orders a call (either scheduled or real-time). The 'call' object contains the call ID.

```javascript
callpage('event.onCallCreated', function(call) {
    // call variable contains call ID 
    // your code here
});

```

--------------------------------

### Check Available Managers

Source: https://callpage.github.io/documentation-js

Determines if there is at least one manager currently available to handle a call. This is useful for managing user expectations and call routing.

```javascript
callpage('event.onReady', function() {
    var hasAvailableManagers = callpage('stats.hasAvailableManagers');
    // your code here
});

```

--------------------------------

### Bind to Real-Time Call Event

Source: https://callpage.github.io/documentation-js

Execute code when a visitor orders a real-time call. Access the call ID from the 'call' object.

```javascript
callpage('event.onCallRealTime', function(call) {
    // get call ID
    var callId = call.id;

    // your code here
});

```

--------------------------------

### api.button.autoshow

Source: https://callpage.github.io/documentation-js

Automatically shows the CallPage button after a timeout defined in the dashboard's `widget.button.showTimeout` setting. This is typically embedded in the widget code by default.

```APIDOC
## api.button.autoshow

### Description
Automatically shows the CallPage button after a timeout defined in the dashboard's `widget.button.showTimeout` setting. This is typically embedded in the widget code by default.

### Method
`callpage('api.button.autoshow');`
```

--------------------------------

### Open CallPage Widget via API

Source: https://callpage.github.io/documentation-js

Call this JavaScript function to programmatically open the CallPage popup window.

```javascript
callpage('api.widget.open');
```

--------------------------------

### Set Widget Theme to Lightblue

Source: https://callpage.github.io/documentation-js

Sets 'lightblue' as the primary widget theme color. This is the default usage.

```scss
// Set lightblue as widget theme.
@include main-color(lightblue);
```

--------------------------------

### Set Background Color to Light Blue

Source: https://callpage.github.io/documentation-js

Sets 'lightblue' as the background color for elements. This is the basic usage of the mixin.

```scss
// Sets 'lightblue' as background color of the elements.
@include background-color(ligthblue);
```

--------------------------------

### Bind to Call In Progress Event

Source: https://callpage.github.io/documentation-js

Execute code when a call's status changes to 'IN-PROGRESS', indicating the visitor has picked up the phone. The 'call' object contains the call ID.

```javascript
callpage('event.onCallInProgress', function(call) {
    // get call ID
    var callId = call.id;

    // your code here
});

```

--------------------------------

### Bind to Scheduled Call Event

Source: https://callpage.github.io/documentation-js

Execute code when a visitor orders a scheduled call. The 'call' object provides the call ID and scheduled timestamp if available.

```javascript
callpage('event.onCallScheduled', function(call) {
    // get call ID
    var callId = call.id;

    // scheduled timestamp
    if (call.scheduled_at) {
    }

    // your code here
});

```

--------------------------------

### Bind to Widget Opened Event

Source: https://callpage.github.io/documentation-js

Execute code when the CallPage popup window is opened. Useful for tracking user engagement when the widget is displayed.

```javascript
callpage('event.onWidgetOpened', function() {
    // your code here
});

```

--------------------------------

### api.button.hide

Source: https://callpage.github.io/documentation-js

Hides the CallPage button immediately with an animation.

```APIDOC
## api.button.hide

### Description
Hides the CallPage button immediately with an animation.

### Method
`callpage('api.button.hide');`
```

--------------------------------

### Widget API - Show Eyecatcher

Source: https://callpage.github.io/documentation-js

Shows the eyecatcher element in the CallPage widget.

```APIDOC
## Show eyecatcher (api.eyecatcher.show)

### Description
Shows the eyecatcher element in the CallPage widget.

### Method
javascript

### Endpoint
api.eyecatcher.show()

```

--------------------------------

### Hide Hint (api.hint.hide)

Source: https://callpage.github.io/documentation-js

Hides the CallPage hint. This function is straightforward to use.

```javascript
callpage('api.hint.hide');
```

--------------------------------

### getManagers

Source: https://callpage.github.io/documentation-js

Returns an array of managers which belong to this widget. Includes manager ID, name, avatar URL, and their departments.

```APIDOC
## getManagers

### Description
Returns array of managers which belongs to this widget.

### Method
GET (implied)

### Endpoint
stats.getManagers

### Parameters
None

### Response
#### Success Response
- **managers** (array) - An array of manager objects, each containing id, name, avatar, and departments.

### Response Example
```json
[
    {
        "id":28,
        "name":"Admin",
        "avatar":"url-to-avatar",
        "departments":[
            {
                "id": 1,
                "name": "Owner"
            }
        ]
    },
    {
        "id":29,
        "name":"Manager",
        "avatar":"url-to-avatar",
        "departments":[
            {
                "id": 1,
                "name": "Sales"
            }
        ]
    }
]
```
```

--------------------------------

### Set Department

Source: https://callpage.github.io/documentation-js

Allows you to assign CallPage managers to specific departments, such as 'Billing' or 'Support'. This ensures that visitors are routed to the appropriate group during an order.

```APIDOC
## Set department (api.setDepartment)

### Description
Assigns CallPage managers to a specific department for call routing.

### Method
`callpage('api.setDepartment', departmentId);`

### Parameters
#### Path Parameters
- **departmentId** (number) - Required - The unique ID of the department to assign.

### Request Example
```javascript
callpage('api.setDepartment', 123);
```
```

--------------------------------

### api.hint.hide

Source: https://callpage.github.io/documentation-js

Hides the CallPage hint. This function is used to make a hint invisible to the user.

```APIDOC
## Hide hint (api.hint.hide)

### Description
Hides CallPage hint.

### Method
Callpage JavaScript API

### Endpoint
api.hint.hide

### Parameters
None

### Request Example
```javascript
callpage('api.hint.hide');
```

### Response
None
```

--------------------------------

### hasAvailableManagers

Source: https://callpage.github.io/documentation-js

Returns true if there is at least one available manager who is able to pick up the phone right now.

```APIDOC
## hasAvailableManagers

### Description
Returns `true` if there is at least one available manager who is able to pick up the phone right now.

### Method
GET (implied)

### Endpoint
stats.hasAvailableManagers

### Parameters
None

### Response
#### Success Response
- **available** (boolean) - `true` if at least one manager is available, `false` otherwise.
```

--------------------------------

### Show Eyecatcher (api.eyecatcher.show)

Source: https://callpage.github.io/documentation-js

Displays the CallPage eyecatcher. This function is used to show a visual element.

```javascript
callpage('api.eyecatcher.show');
```

--------------------------------

### Toggle CallPage Scoring System

Source: https://callpage.github.io/documentation-js

Use this function to turn the CallPage scoring system on or off. The scoring system classifies leads based on predefined rules.

```javascript
callpage('api.scoring.toggle', toggle);
```

--------------------------------

### api.eyecatcher.show

Source: https://callpage.github.io/documentation-js

Shows the CallPage eyecatcher. This function is used to display an eyecatcher element.

```APIDOC
## Show eyecatcher (api.eyecatcher.show)

### Description
Shows eye catcher.

### Method
Callpage JavaScript API

### Endpoint
api.eyecatcher.show

### Parameters
None

### Request Example
```javascript
callpage('api.eyecatcher.show');
```

### Response
None
```

--------------------------------

### Bind to Widget Exit Event

Source: https://callpage.github.io/documentation-js

Execute code when the CallPage widget is disabled and cannot be loaded. Use this for cleanup or alternative actions.

```javascript
callpage('event.onWidgetExit', function() {
    // your code here
});

```

--------------------------------

### Set Small Secondary Text Color

Source: https://callpage.github.io/documentation-js

Use this mixin to specifically set the color for smaller elements like agreement short text or social share counts. It's a subset of the main text color functionality.

```scss
@include small-secondary-text-color(black);
```

--------------------------------

### getVisitorId

Source: https://callpage.github.io/documentation-js

Returns the unique identifier of the current visitor.

```APIDOC
## getVisitorId

### Description
Returns the unique identificator of the current visitor.

### Method
GET (implied)

### Endpoint
stats.getVisitorId

### Parameters
None

### Response
#### Success Response
- **visitorId** (string) - The unique identifier for the current visitor.
```

--------------------------------

### Widget API - Hide Button

Source: https://callpage.github.io/documentation-js

Hides the CallPage button.

```APIDOC
## Hide button (api.button.hide)

### Description
Hides the CallPage button.

### Method
javascript

### Endpoint
api.button.hide()

```

--------------------------------

### Set Department ID

Source: https://callpage.github.io/documentation-js

Use `api.setDepartment` to assign incoming calls to a specific department. This ensures calls are routed to the correct managers.

```javascript
callpage('api.setDepartment', departmentId);
```

```javascript
callpage('api.setDepartment', 123);
```

--------------------------------

### Set Text Color for Widget Elements

Source: https://callpage.github.io/documentation-js

Use this mixin to set the primary text color for titles, paragraphs, and close icons. It automatically generates a less noticeable secondary text color.

```scss
@include text-color(black);
```

--------------------------------

### Replace Selected Tab Color

Source: https://callpage.github.io/documentation-js

Allows overriding the auto-generated color for the selected tab with a custom color. Use this when you need precise control over tab appearance.

```scss
// Set 'lightblue' color as widget theme.
@include main-color(lightblue);
// If you want to replace auto-generated color of selected tab
// with your own color.
@include background-active-color(tomato);
```

--------------------------------

### Widget API - Close Widget

Source: https://callpage.github.io/documentation-js

Closes the CallPage widget.

```APIDOC
## Close widget (api.widget.close)

### Description
Closes the CallPage widget.

### Method
javascript

### Endpoint
api.widget.close()

```

--------------------------------

### Close widget (api.widget.close)

Source: https://callpage.github.io/documentation-js

Closes the CallPage popup window.

```APIDOC
## Close widget (api.widget.close)

### Description
Closes CallPage popup window.

### Method
```javascript
callpage('api.widget.close');
```
```

--------------------------------

### Widget API - Set Variable of Custom Rule

Source: https://callpage.github.io/documentation-js

Sets a variable for a custom rule within the scoring system.

```APIDOC
## Set variable of custom rule (api.scoring.setVariable)

### Description
Sets a variable for a custom rule within the scoring system.

### Method
javascript

### Endpoint
api.scoring.setVariable(variableName, variableValue)

### Parameters
#### Path Parameters
- **variableName** (string) - Required - The name of the variable.
- **variableValue** (any) - Required - The value to set for the variable.

```

--------------------------------

### Bind to Call Completed Event

Source: https://callpage.github.io/documentation-js

Execute code when a call's status changes to 'COMPLETED', signifying a successful call. The 'call' object contains the call ID.

```javascript
callpage('event.onCallCompleted', function(call) {
    // get call ID
    var callId = call.id;

    // your code here
});

```

--------------------------------

### Toggle scoring system (api.scoring.toggle)

Source: https://callpage.github.io/documentation-js

Toggles the scoring system on or off. The scoring system classifies leads based on quality using rules. When a rule is triggered, the score value changes, and if the value reaches a defined threshold, CallPage marks the user as engaged and displays a custom title popup.

```APIDOC
## Toggle scoring system (api.scoring.toggle)

### Description
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.

### Parameters
#### Query Parameters
- **toggle** (boolean) - Optional - Toggles on/off scoring system

### Method
```javascript
callpage('api.scoring.toggle', toggle);
```
```

--------------------------------

### Set Background Color for Active Elements

Source: https://callpage.github.io/documentation-js

Use this mixin to set the background color for active elements, such as the selected contact type. The color parameter accepts standard CSS color formats.

```scss
@include background-active-color(ligthblue);

```

--------------------------------

### Auto-Show CallPage Button

Source: https://callpage.github.io/documentation-js

Automatically shows the CallPage button after a timeout defined in the dashboard. This is often embedded by default.

```javascript
callpage('api.button.autoshow');

```

--------------------------------

### Bind to Widget Closed Event

Source: https://callpage.github.io/documentation-js

Execute code when the CallPage popup window is closed. Useful for tracking user interaction or performing actions after the widget is dismissed.

```javascript
callpage('event.onWidgetClosed', function() {
    // your code here
});

```

--------------------------------

### Set Secondary Background Color

Source: https://callpage.github.io/documentation-js

This mixin sets the background color for specific elements like the circle of a countdown timer or inactive stars in a star rating. The color parameter accepts standard CSS color formats.

```scss
// Sets 'lightblue' as background color of the certain elements.
@include background-secondary-color(ligthblue);

```

--------------------------------

### Set Variable for CallPage Scoring Rule

Source: https://callpage.github.io/documentation-js

Set a variable that will be compared against a custom scoring rule. If the condition matches, the custom rule triggers.

```javascript
callpage('api.scoring.setVariable', 6);
```

```javascript
callpage('api.scoring.setVariable', 'hello');
```

--------------------------------

### Set Button Tooltip Border Color

Source: https://callpage.github.io/documentation-js

Sets the border color for the button tooltip, which appears over a widget button. This is used for features like 'one click to call' and displaying information about an active call when the widget is closed. The color parameter accepts standard CSS color formats.

```scss
@include button-tooltip-border-color(tomato);

```

--------------------------------

### Widget API - Hide Eyecatcher

Source: https://callpage.github.io/documentation-js

Hides the eyecatcher element in the CallPage widget.

```APIDOC
## Hide eyecatcher (api.eyecatcher.hide)

### Description
Hides the eyecatcher element in the CallPage widget.

### Method
javascript

### Endpoint
api.eyecatcher.hide()

```

--------------------------------

### Set variable of custom rule (api.scoring.setVariable)

Source: https://callpage.github.io/documentation-js

Sets a variable for the scoring system's custom rule. This method accepts a variable that is compared against the custom rule's value. If the condition matches, the custom rule triggers.

```APIDOC
## Set variable of custom rule (api.scoring.setVariable)

### Description
Scoring system provides special custom rule. When you create one in the dashboard you specify its value and comparison condition. JavaScript API `api.scoring.setVariable` accepts variable which gets compared with the value of custom rule. If the condition matches custom rule triggers.

### Parameters
#### Query Parameters
- **variable** (number | string) - Yes - The variables which gets compared with the value of custom rule.

### Method
```javascript
callpage('api.scoring.setVariable', variable);
```

### Request Example
```json
{
  "example": "callpage('api.scoring.setVariable', 6);"
}
```

### Request Example
```json
{
  "example": "callpage('api.scoring.setVariable', 'hello');"
}
```
```

--------------------------------

### Set Divider Color

Source: https://callpage.github.io/documentation-js

Applies a color to elements such as tab dividers, input borders, and link underlines. The color parameter accepts standard CSS color formats. This mixin internally uses `button-tooltip-border-color`.

```scss
@include divider-color(tomato);

```

--------------------------------

### Hide CallPage Button

Source: https://callpage.github.io/documentation-js

Hides the CallPage button with an animation effect.

```javascript
callpage('api.button.hide');

```

--------------------------------

### Close CallPage Widget via API

Source: https://callpage.github.io/documentation-js

Call this JavaScript function to programmatically close the CallPage popup window.

```javascript
callpage('api.widget.close');
```

--------------------------------

### api.eyecatcher.hide

Source: https://callpage.github.io/documentation-js

Hides the CallPage eyecatcher. This function is used to hide an eyecatcher element.

```APIDOC
## Hide eyecatcher (api.eyecatcher.hide)

### Description
Hides eye catcher.

### Method
Callpage JavaScript API

### Endpoint
api.eyecatcher.hide

### Parameters
None

### Request Example
```javascript
callpage('api.eyecatcher.hide');
```

### Response
None
```

--------------------------------

### Hide Eyecatcher (api.eyecatcher.hide)

Source: https://callpage.github.io/documentation-js

Hides the CallPage eyecatcher. Use this function to remove the eyecatcher from view.

```javascript
callpage('api.eyecatcher.hide');
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.