Documentation: Skype Button for Joomla

Go to the site modules list in the Joomla administrator panel. In the module list, find "IWS.BY Skype Button". Click on the module title, and a page with available settings will open. Let's review each field below.

Main Module Settings

• License key. The license key obtained on the IWS.BY website should be entered in this field. Without the license key in this field, the module will not be able to access the update server and automatically update.
• Button type. The option specifies the type of button. "Button" – a simple button will be displayed on the site page. "Manager" – when you click on the button, a pop-up window with information about the manager and a button to open a chat with the manager in Skype will appear. "Agents" – when you click on the button, a pop-up window will appear with a list of agents who are available for communication via Skype. "Card" – a static block with an operator who is available for communication via Skype.
• Link opening attribute. This option is responsible for opening a link in the browser of a site visitor. Two options are possible: by clicking on the button the link will open in a new window, or by clicking on the button the link will open in the current browser window.
• REL link attribute. The option is responsible for describing the link for search engine robots.
  "Nofollow" – attribute prohibits search robots from following the link.
  "Noreferrer" – attribute prohibits passing the link of the source of the transition (your site).

Floating Button Settings

• Button size. The field is responsible for the button size, specifying the height and width of the button. It is specified by a number in pixels.
• Background color. Option specifies the background color of the floating button. It is specified in HEX format.
• Icon color. Option specifies the color of the icon on the floating button. It is specified in HEX format.
• Button location. The option is responsible for the position of the floating button relative to the site visitor's screen. Two options are available: left and right side. The button will be pinned to the bottom of the site.
• Right indent. The field specifies the distance between the button and the right part of the screen of the site visitor. It is specified by a number in pixels. The value from this field is applied if the "Button location" field is set to "Right".
• Left indent. The field specifies the distance between the button and the left part of the screen of the site visitor. It is specified by a number in pixels. The value from this field is applied if the "Button location" field is set to "Left".
• Bottom indent. The field specifies the distance between the button and the bottom of the screen of the site visitor. It is specified by a number in pixels.
• Layer level. The field should be filled with the layer level on which the button will be available relative to all site elements. Analog of the property in CSS: z-index.

Border Settings

• Enable border?. The option is responsible for activating the border around the button widget. If "Yes" is selected, the settings for the border will be applied from the settings below.
• Border width. The width of the frame is filled in the field. It is specified by a number in pixels. Analogous to CSS property: border-width.
• Border style. The option is responsible for the style of the frame around the button. Four frame styles are available: solid, dashed, dotted, and double line.
• Border color. This option specifies the color of the border around the widget button. It is specified in HEX format.

Animation Settings

• Enable animation?. The option is responsible for activating the button animation. If "Yes" is selected, the animation from the field below will be applied.
• Animation type. The option is responsible for the type of animation to be applied to the button. Four animation options are available: button pulsing, button bouncing, button moving, and icon rotating.
• Duration. Specifies the duration, in seconds, of the animation loop playback.
• Pulse length. Sets the length of the maximum ripple point from the button. It is specified by a number in pixels. The value from this field is applied if the "Animation type" field is set to "Button pulses".
• Jump height. Sets the height of the button's maximum jump. It is specified by a number in pixels. The value from this field is applied if the "Animation type" field is set to "Button jumps".
• Movement width. Sets the maximum horizontal point of button movement. It is specified by a number in pixels. The value from this field is applied if the "Animation type" field is set to "Button moves".

"Button" Mode

To apply the "Button" mode settings, select the "Button" value in the "Button type" field in the first tab of the module settings. After that, switch to the "Button mode" tab in the module settings.

• Skype login. In the field you need to enter your Skype login, with which the chat will be opened.
  Skype login example: skypeLogin
• Button view. The option is responsible for the kind of button that will be shown on the page. Two types of button are available. "Floating button" – there will be a button on the site page that will be positioned relative to the site visitor's screen. "Static button" – button will be fixed at the specified position of the module as a static block.
• Enable external indents?. If "Yes" is selected, external indents from the settings below will be applied to the button.
• External top indent. The field is responsible for the distance between the button and the nearest object from above. It is specified by a number.
• External right indent. The field is responsible for the distance between the button and the nearest object to the right. It is specified by a number.
• External bottom indent. The field is responsible for the distance between the button and the nearest object below. It is specified by a number.
• External left indent. The field is responsible for the distance between the button and the nearest object on the left. It is specified by a number.
• Unit of external indentation. The option is responsible for the unit type applied to the external indentation of the button. It can be: px, %, em.

Operator status widget settings

• Enable operator status?. If "Yes" is selected, you will see options in the settings below that allow you to customize the operator's availability time.
• Work schedule. A group of options that allows you to customize the schedule of the operator's status in the network. You can customize the statuses for each day of the week. The fields for one day of the week will be described below. The fields are repeated for each day of the week.

• Working?. If "Yes" is selected, the operator will be available that day of the week.
• Start working day. Specifies the time from which the operator status will be indicated as "Online".
• End working day. Specifies the time after which the operator will not be available, the status will be "Offline".

• Online status color. Specifies the background color of the object that is responsible for the status of the operator on the button when it is online. It is specified in HEX format.
• Offline status color. Specifies the background color of the object that is responsible for the status of the operator on the button when it is offline. It is specified in HEX format.
• Widget width. This field specifies the width of the object that is responsible for the status of the operator on the button. It is specified by a number in pixels.
• Right indent. Responsible for the indentation from the right side to the object that is responsible for the status of the operator on the button. It is specified by a number in pixels.
• Bottom indent. Responsible for the indentation from the bottom side to the object that is responsible for the status of the operator on the button. It is specified by a number in pixels.
• Enable effect when the operator is offline. If "Yes" is selected, the values from the settings below will be applied to the button when the operator is not online.
• Button background color if operator offline. The background color will be applied to the button when the operator is offline. Specified in HEX format.
• Icon color if operator offline. The color will be applied to the icon on the button when the operator is offline. Specified in HEX format.

"Manager" Mode

To apply the "Manager" mode settings, select the "Manager" value in the "Button type" field in the first tab of the module settings. After that, switch to the "Manager" tab in the module settings.

Basic settings

• Skype login. In the field you need to enter your Skype login, with which the chat will be opened.
  Skype login example: skypeLogin
• Window design. This option is responsible for the design of the popup window. There are three color design options: light, dark, and custom. Custom will open additional settings, with the help of which you can customize your own color scheme to match the design of your site.
• Manager photo. Specifies an image for the manager. It is recommended to use a square image, as it will be displayed in a circle at the top of the widget.
• Manager name. Specifies the name of the manager. The manager name is displayed to the right of the manager image at the top of the widget.
• Manager department. Specifies the manager's department. The manager's department is displayed to the right of the manager's image, under the manager's name at the top of the widget.
• Message from manager. The message from the manager will be displayed in the center part of the widget.
• Button name. The field specifies the text for the button at the bottom of the widget, clicking on which the visitor will be prompted to write a letter to the e-mail specified in the module settings.
• Enable icon?. If "Yes" is selected, a call icon will appear next to the name on the button that prompts you to write an email.
• Icon size. The field is responsible for the width and height of the icon. It is specified by a number in pixels.

Manager status settings

• Enable operator status?. If the value "Yes" is selected, the operator's status will be shown in the "Manager" mode. To customize the status, you must fill in the manager's working hours by day of the week. The fields below will be described for one day of the week. These settings fields are available for each day of the week.
• Disconnect operator?. If "Yes" is selected, effects will be applied to the button if the operator is not online.
• Work schedule. A group of options that allows you to customize the schedule of the operator's status in the network. You can customize the statuses for each day of the week. The fields for one day of the week will be described below. The fields are repeated for each day of the week.

• Working?. If "Yes" is selected, the operator will be available that day of the week.
• Start working day. Specifies the time from which the operator status will be indicated as "Online".
• End working day. Specifies the time after which the operator will not be available, the status will be "Offline".

• Message from manager if he offline. A message that will be shown in the widget when it is offline.
• Operator status in header?. If "Yes" is selected, the operator's status will be shown at the top of the widget under the operator's department: online or offline.

Manager status on floating button

• Online status color. This option sets the color of the widget when the manager is online. It is specified in HEX format.
• Offline status color. Option sets the widget color when the manager is offline. It is specified in HEX format.
• Widget width. The field specifies the width and height of the widget with the manager's status. It is specified by a number in pixels.
• Right indent. The field is responsible for the distance from the right side to the object that shows the status of the manager. It is specified by a number in pixels.
• Bottom indent. The field is responsible for the distance from the bottom side to the object that shows the status of the manager. It is specified by a number in pixels.

Manager status on the widget header

• Enable manager status?. If "Yes" is selected, the manager's status will be shown at the top of the manager widget window.
• Online status color. This option sets the color of the widget when the manager is online. It is specified in HEX format.
• Offline status color. Option sets the widget color when the manager is offline. It is specified in HEX format.
• Widget width. The field specifies the width and height of the widget with the manager's status. It is specified by a number in pixels.
• Manager status «online». The status text of the manager when he or she is online.
• Manager status «offline». The status text of the manager when he is offline.

Customizing your own design

• Header background color. This option sets the background color of the top part of the widget where the manager's data is displayed. It is specified in HEX format.
• Name color. This option specifies the color of the manager name at the top of the widget. It is specified in HEX format.
• Department color. This option specifies the color of the manager department at the top of the widget. It is specified in HEX format.
• Manager status color. This option specifies the color of the manager status at the top of the widget. It is specified in HEX format.
• Close icon color. This option specifies the color of the icon at the top of the widget that closes the widget window. It is specified in HEX format.
• Close icon color when hovering. This option specifies the color of the icon at the top of the widget that closes the widget window when the mouse cursor hovers over it. It is specified in HEX format.
• Content background color. This option sets the background color of the central part of the widget where the message from the manager is displayed. It is specified in HEX format.
• Message background color. This option sets the background color of the manager's message in the central part of the widget. It is specified in HEX format.
• Message color. This option specifies the color of the manager's message text in the central part of the widget. It is specified in HEX format.
• Footer background color. This option sets the background color of the bottom part of the widget where the button is located. It is specified in HEX format.
• Button background color. This option sets the background color of the button at the bottom of the widget. It is specified in HEX format.
• Button background color when hovering. This option sets the background color of the button at the bottom of the widget when the mouse cursor hovers over it. It is specified in HEX format.
• Text color on button. This option sets the color of the text on the button at the bottom of the widget. It is specified in HEX format.
• Text color on button when hovering. This option sets the color of the text on the button at the bottom of the widget when the mouse cursor hovers over it. It is specified in HEX format.
• Icon color on button. This option specifies the color of the icon on the button at the bottom of the widget. It is specified in HEX format.
• Icon color on button when hovering. This option sets the color of the icon on the button at the bottom of the widget when the mouse cursor hovers over it. It is specified in HEX format.
• Button color when manager is offline. Option sets the color of the button at the bottom of the widget when the manager is offline. It is specified in HEX format.
• Button color when manager is offline, when hovered over. Option sets the color of the button at the bottom of the widget when the manager is offline, when hovering over the button with the mouse cursor. It is specified in HEX format.
• Button text color when manager is offline. This option sets the color of the text on the button at the bottom of the widget when the manager is offline. It is specified in HEX format.
• Button text color when manager is offline, when hovered over. This option sets the color of the text on the button at the bottom of the widget when the manager is offline, when hovering over the button with the mouse cursor. It is specified in HEX format.
• Color of icon on button when manager is offline. This option sets the color of the icon on the button at the bottom of the widget when the manager is offline. It is specified in HEX format.
• Color of icon on button when manager is offline, when hovered over. The option sets the color of the icon on the button at the bottom of the widget when the manager is offline, when hovering over the button with the mouse cursor. It is specified in HEX format.

Typography settings

• Customize typography?. If "Yes" is selected, the ability to customize the typography of all text elements will be enabled in Manager mode.

Next, one group of fields will be described. Such field groups can be configured for: manager's name, manager's department, manager's status in the header, message from manager, chat button and hover chat button.

• Text size. Responsible for the size of the text on the element being customized. Analogous to CSS property: font-size.
• Text unit. The unit of measure to be applied to the text size. You can select px, %, em, and rem.
• Line height. Responsible for the height of lines of text in a customizable element. The analog of CSS property: line-height.
• Line height unit. The unit of measure to be applied to the height of the rows. You can select px, %, em, and rem.
• Text weight. This option specifies the thickness of the text. It is possible to choose a value from 100 to 900. The analog of CSS property: font-weight.
• Text transformation. This option specifies the case of the text element. It can be: first letters uppercase, lowercase, uppercase, and case-insensitive. The analog of CSS property: text-transform.
• Text design. This option sets the layout of the text element. It can be: no decoration, underlined, line over text, and crossed out. Analogous to the CSS property: text-decoration.

"Agents" Mode

In order for the "Agents" mode settings to be applied, select the "Agents" value in the "Button type" field in the first tab of the module settings. After that, switch to the "Agents" tab in the module settings.

Basic settings

• Window design. The option is responsible for the design of the popup window. There are three color design options: light, dark, and custom. Custom will open additional settings, with the help of which you can customize your own color scheme to match the design of your site.
• Window title. In the box you need to enter the name of the window you want to be shown at the top of the popup on the left.
• Window description. In the field, enter the description of the window you want to be shown at the top of the popup window to the left below the window name.
• Agents. The option is responsible for adding agents that will be displayed in the popup window. In the instructions we will describe a group of fields to one agent. Add other agents in the same way.

• • Agent photo. Specifies an image for the agent. It is recommended to use a square image, as it will be displayed in the circle to the left of the agent's name and department.
  • Agent name. Specifies the name of the agent. The agent name is displayed to the right of the agent image.
  • Agent department. Specifies the agent's department. The agent's department is displayed to the right of the agent's image, under the agent's name.
  • Skype login. In the field you need to enter your Skype login, with which the chat will be opened.
    Skype login example: skypeLogin
  • Work schedule. The settings are responsible for the status of the agent. The schedule settings are separate for each agent. They are specified for each day of the week.

• Working?. If "Yes" is selected, the operator will be available that day of the week.
• Start working day. Specifies the time from which the operator status will be indicated as "Online".
• End working day. Specifies the time after which the operator will not be available, the status will be "Offline".

Agent status settings

• Enable agent status?. If "Yes" is selected, the status of the operator will be shown in the "Agents" mode. To customize the status, you need to fill in the manager's working hours by days of the week. Settings of working hours take place in the form of adding agents above.
• Widget width. This field specifies the width and height of the widget with the operator's status. It is specified by a number in pixels.
• Online status color. Responsible for the background color of the object that responds to the status of the agent if it is online. It is specified in HEX format.
• Offline status color. Responsible for the background color of the object that responds to the status of the agent if it is offline. It is specified in HEX format.
• Online agent status. The status text of the agent when it is online.
• Offline agent status. The status text of the agent when it is offline.
• Enable photo effect when agent is offline. If "Yes" is selected, a grayscale effect will be applied to the photo of an agent who is offline.

Customizing your own design

• Header background color. This option sets the background color of the top part of the widget where the agent data is displayed. It is specified in HEX format.
• Window title color. This option specifies the color of the popup title at the top of the widget. It is specified in HEX format.
• Window description color. This option specifies the color of the popup description at the top of the widget. It is specified in HEX format.
• Close icon color. This option specifies the color of the icon at the top of the widget that closes the widget window. It is specified in HEX format.
• Close icon color when hovering. This option specifies the color of the icon at the top of the widget that closes the widget window when the mouse cursor hovers over it. It is specified in HEX format.
• Content background color. This option sets the background color of the central part of the widget where the message from the agent is displayed. It is specified in HEX format.
• Agent name color. This option specifies the color of the manager name. It is specified in HEX format.
• Agent name color when hovering. Option specifies the color of the agent name when the mouse cursor hovers over the agent block. It is specified in HEX format.
• Agent department color. Option specifies the color of the agent's department. It is specified in HEX format.
• Agent department color when hovering. This option specifies the color of the agent department when the mouse cursor hovers over the agent block. It is specified in HEX format.
• Agent status color. This option specifies the color of the agent's status. It is specified in HEX format.
• Agent status color when hover. This option specifies the color of the agent status when the mouse cursor is over the agent block. It is specified in HEX format.
• Background color of agent block when hovering. This option sets the background color of the agent block when the mouse cursor hovers over it. It is specified in HEX format.
• Border color under agent block. This option specifies the color of the border separating agent blocks. It is specified in HEX format.
• Border color under agent block when hovering. This option specifies the color of the border separating agent blocks. The border color changes when the mouse cursor is moved over the agent block that is above the border. It is specified in HEX format.

Typography settings

• Customize typography?. If "Yes" is selected, the ability to customize the typography of all text elements will be enabled in the Agents mode.

Next, one group of fields will be described. Such field groups can be configured for: window name, window description, agent name, agent department and agent status.

• Text size. Responsible for the size of the text on the element being customized. Analogous to CSS property: font-size.
• Text unit. The unit of measure to be applied to the text size. You can select px, %, em, and rem.
• Line height. Responsible for the height of lines of text in a customizable element. The analog of CSS property: line-height.
• Line height unit. The unit of measure to be applied to the height of the rows. You can select px, %, em, and rem.
• Text weight. This option specifies the thickness of the text. It is possible to choose a value from 100 to 900. The analog of CSS property: font-weight.
• Text transformation. This option specifies the case of the text element. It can be: first letters uppercase, lowercase, uppercase, and case-insensitive. The analog of CSS property: text-transform.
• Text design. This option sets the layout of the text element. It can be: no decoration, underlined, line over text, and crossed out. Analogous to the CSS property: text-decoration.

"Card" Mode

To apply the "Card" mode settings, select the "Card" value in the "Button type" field in the first tab of the module settings. After that, switch to the "Card mode" tab in the module settings.

Basic settings

• Skype login. In the field you need to enter your Skype login, with which the chat will be opened.
  Skype login example: skypeLogin
• Card design. The option is responsible for the design of the card. There are three color design options: light, dark, and custom. Custom will open additional settings, with the help of which you can customize your own color scheme to match the design of your site.
• Graphic element. The option is responsible for the graphic element that will be shown on the card. Two options are available: operator photo or module icon.
• Operator photo. The option specifies the photo of the operator displayed on the card. It is recommended to upload a square photo.
• Photo type. The option is responsible for the type of the operator's photo. It can be: square, square with rounded corners, and round.
• Operator name. Specifies the name of the operator. The operator name is displayed to the right of the manager image.
• Operator department. Specifies the operator's department. The operator's department is displayed to the right of the manager's image.
• Message from operator. Sets the operator's message. The operator message is displayed to the right of the manager image.

Block settings

• Enable external indents?. If "Yes" is selected, the external indents defined by the fields below will be applied to the card block.
• External top indent. Specifies the indentation from the card to the nearest object from above. It is specified by a number.
• External right indent. Specifies the indentation from the card to the nearest object to the right. It is specified by a number.
• External bottom indent. Specifies the indentation from the card to the nearest object at the bottom. It is specified by a number.
• External left indent. Specifies the indentation from the card to the nearest object on the left. It is specified by a number.
• Unit of external indentation. This option specifies the unit of measure to be applied to external indents. Available: px, % and em.
• Enable internal indentation?. If "Yes" is selected, the internal indents defined by the fields below will be applied to the card block.
• Internal top indent. Specifies the indentation from the top border of the card to the content. It is specified by a number.
• Internal right indent. Specifies the indentation from the right border of the card to the content. It is specified by a number.
• Internal bottom indent. Specifies the indentation from the bottom border of the card to the content. It is specified by a number.
• Internal left indent. Specifies the indentation from the left border of the card to the content. It is specified by a number.
• Unit of internal indentation. This option specifies the unit of measure to be applied to internal indents. Available: px, % and em.
• Round corners of card?. If "Yes" is selected, the card will have rounded corners.
• Corner rounding radius. Specifies the rounding of the corners of the card block. It is indicated by a number.
• Unit of measurement for radius of rounding. Specifies the unit of measure to be applied to corner rounding. Available: px, % and em.

Operator status settings

• Enable operator status. If "Yes" is selected, the operator's status will be shown in the "Card" mode. For status settings it is necessary to fill in the working hours of the operator by days of the week. Working hours settings are made in the field below.
• Work schedule. The settings are responsible for the status of the operator. They are specified for each day of the week.

• Working?. If "Yes" is selected, the operator will be available that day of the week.
• Start working day. Specifies the time from which the operator status will be indicated as "Online".
• End working day. Specifies the time after which the operator will not be available, the status will be "Offline".

• Message from the operator if he is not online. In the field, the message that will be shown on the card when the operator is offline.
• Online status color. Responsible for the background color of the object that responds to the status of the operator, if it is on the network. It is specified in HEX format.
• Offline status color. Responsible for the background color of the object that responds to the status of the operator if it is offline. It is specified in HEX format.
• Widget width. This field specifies the width and height of the widget with the operator's status. It is specified by a number in pixels.
• Operator status «online». The status text of the operator when it is on the network.
• Operator status «offline». Operator status text when the operator is offline.
• Enable effect when the operator is offline. If "Yes" is selected, a gray color effect will be applied to the photo of the operator who is not online. The card block will also be highlighted in this status.

Customizing your own design

• Card background color. This option specifies the background color of the card on which the agent's data is displayed. It is specified in HEX format.
• Icon color. This option specifies the color of the icon on the card. It is specified in HEX format.
• Operator name color. This option specifies the color of the agent's name. It is specified in HEX format.
• Spacer color. This option specifies the color of the separator between the agent's name and his department. It is specified in HEX format.
• Operator department color. Option specifies the color of the agent's department. It is specified in HEX format.
• Operator status color. This option specifies the color of the agent's status. It is specified in HEX format.
• Operator message color. This option specifies the color of the message from the agent. It is specified in HEX format.

Typography settings

• Customize typography?. If "Yes" is selected, the ability to customize the typography of all text elements will be enabled in the "Agents" mode.

Next, one group of fields will be described. Such field groups can be configured for: agent name, agent department, agent status and agent message.

• Text size. Responsible for the size of the text of the element being customized. Analogous to CSS property: font-size.
• Text unit. The unit of measure to be applied to the text size. You can select px, %, em, and rem.
• Line height. Responsible for the height of lines of text in a customizable element. The analog of CSS property: line-height.
• Line height unit. The unit of measure to be applied to the height of the rows. You can select px, %, em, and rem.
• Text weight. This option specifies the thickness of the text. It is possible to choose a value from 100 to 900. The analog of CSS property: font-weight.
• Text transformation. This option specifies the case of the text element. It can be: first letters uppercase, lowercase, uppercase, and case-insensitive. The analog of CSS property: text-transform.
• Text design. This option sets the layout of the text element. It can be: no decoration, underlined, line over text, and crossed out. Analogous to the CSS property: text-decoration.

Analytics Settings

This section of settings is necessary to analyze the clicks on the widget buttons. Settings add events to the button, but do not add Google Analytics and Yandex Metrica counters, this is done by other plugins. Events will work if analytics service codes are installed on the site pages. To go to the analytics settings, click on the "Analytics" tab at the top of the plugin settings.

• Enable analytics?. The option includes analytics capabilities to track button events.

Google Analytics

Creating events in Google Analytics is described in the official documentation and can be accessed by clicking here: https://support.google.com/analytics/answer/12844695?hl=en.
The module supports two types of event tracking.

• The first one is in the button mode "Button". The event is hung on the button and sent to the service after pressing the button.
• The second one is in the button mode "Manager" and "Agents". In this case there will be two events. The first event is passed when the floating button is clicked, and the second event is passed when the button in the widget is clicked.

• Enable Google Analytics?. The option includes the ability to pass button event tracking analytics to Google Analytics.

Button type: Button and card

• Parameter. The field is filled with the identifier of the parameter created in Google Analytics.
• Value. The field is filled with the value of the parameter created in Google Analytics.

Button type: Manager and Agents

• Parameter (step 1). The field is populated with the parameter ID for the first step (floating button click) created in Google Analytics.
• Value (step 1). The field is populated with the parameter value for the first step (floating button click) created in Google Analytics.
• Parameter (step 2). The field is filled with the parameter ID for the second step (clicking the button in the pop-up window) created in Google Analytics.
• Value (step 2). The field is populated with the parameter value for the second step (clicking the button in the pop-up window) created in Google Analytics.

Yandex Metrica

Creating goals in Yandex Metrica is described in the official documentation and is available at the link: https://yandex.com/support/metrica/general/goal-js-event.html?lang=en#js-event.
The module supports two types of event tracking.

• First – in the "Button" button mode. The event is hung on the button and passed to the service after the button is clicked. Create an ordinary JavaScript target.
• Second – in the "Manager" and "Agents" button modes. In this case, there will be two events. The first event is passed when the floating button is clicked, and the second event is passed when the button in the widget is clicked. Create a composite target from two JavaScript events.

• Enable Yandex Metrics?. The option includes the ability to transfer analytics on button goal tracking to Yandex Metrica.
• Yandex Metrics ID. In the field you need to enter the counter number of your site in Yandex Metrica. How to find the counter number is described in the link: https://yandex.com/support/metrica/general/tag-id.html?lang=en.

Button type: Button and card

• Event ID. The field is filled with the identifier of the goal created in Yandex Metrica.

Button type: Manager and Agents

• Event ID (step 1). The field is filled with the ID of the goal for the first step (clicking on the floating button) created in Yandex Metrica.
• Event ID (step 2). The field is filled with the ID of the goal for the second step (clicking the button in the pop-up window) created in Yandex Metrica.

CSS and JS

This section is for advanced users who know CSS and JavaScript syntax. If your knowledge allows you to work with CSS and JS, this section is for you.

• CSS code. In the text box you can enter CSS code to be added to the pages of the site where the button is installed.
• JS code. In the text field you can enter JavaScript code, which should be added to the pages of the site where the button is installed. JS syntax should be used according to the official Joomla documentation.

Popup window trigger function

For the "Manager" and "Agents" modes, there is a function to trigger the popup window. To use it, you need to call the JavaScript function via the onClick method.

The function looks like this:

openIwsbySkypeID();

In this function, you must replace "ID" with the numeric identifier of your module. This identifier can be found in the administrator panel, in the list of all modules on your site. The table has an "ID" column containing the module identifiers. In the row of the button module, the corresponding column contains the required identifier.

For example, if the module identifier is 20, the popup window trigger function will look like this:

openIwsbySkype20();

This function can be called using two methods:

1. Call via onClick method:

   <a href="#" onClick="openIwsbySkype20();return false;">

   Note that return false is added after the function – this disables the link redirection. To prevent the page from refreshing, this element must be added.

2. Call via link value:

   <a href="javascript:openIwsbySkype20()">

You can use either method of your choice. The first method is recommended for regular non-clickable objects on your site page. The second is recommended for buttons and links, as it is set via the link address.

Operator status error

If you notice that the operator status is not working correctly, the first thing you need to do is check your hosting settings. In the php.ini file, the correct time zone for your region must be set. To do this, go to the phpinfo() page view, and your region should be set in the timezone field. If the region is incorrect, please contact the technical support of your hosting provider and ask them to configure the timezone according to your region.