Documentation: Floating Contact Button for Joomla
System Requirements
System requirements differ for Joomla 3, Joomla 4, Joomla 5 and Joomla 6, so please refer to the section corresponding to your version.
Joomla 3
Joomla 4
Joomla 5 and Joomla 6
Extension Installation
The extension installation process is slightly different for Joomla 3 and Joomla 4/5/6, so please refer to the section corresponding to your version.
Installation for Joomla 3
- Download the extension package.
- Go to the Joomla 3 administration panel.
- Open "Extensions" -> "Extension Manager".
- Click on the "Upload Package" tab.
- Select the downloaded extension package and click "Upload and Install".
Installation for Joomla 4, Joomla 5, and Joomla 6
- Download the extension package.
- Go to the Joomla 4/5/6 administration panel.
- Open "System" -> "Extensions".
- Click on the "Upload Package" tab.
- Drag and drop the downloaded extension package into the upload area or click "Select Package".
- Click "Upload and Install".
Extension settings
Go to the module list in the Joomla administrator panel. In the module list, find "IWS.BY Floating Contact Button". Click on the module name, and a page with available settings will open. Let's review each field below.
License key
Enter the license key received from the IWS.BY website when obtaining the module. Without a key in this field, the module will not be able to access the update server and update automatically.
Phone icon
This option selects the icon to be displayed on the floating button. Eleven icon variants are available.
Button size (pixels)
This field determines the button size: its height and width. Specify as a number in pixels.
Background Color
This option specifies the background color of the floating contact button. Specify in RGB format.
Icon color
This option specifies the icon color on the floating contact button. Specify in HEX format.
Button location
This option determines the position of the floating contact button relative to the website visitor's screen. Two options are available: left and right sides. The button will be anchored to the bottom of the site.
The following two fields are filled depending on the selected side for displaying the button.
Right indent
This field sets the distance between the button and the right side of the website visitor's screen. Specify as a number in pixels.
Left indent
This field sets the distance between the button and the left side of the website visitor's screen. Specify as a number in pixels.
Bottom indent
This field sets the distance between the button and the bottom of the website visitor's screen. Specify as a number in pixels.
Layer level (Z-INDEX)
Enter the layer level at which the button will be available relative to all site elements. Analogous to the CSS property: z-index.
The following settings block defines the border for the floating contact button.
Enable the border?
This option activates the border around the floating button. If "Yes" is selected, the border settings will be applied from the options below.
Border width
Enter the border width. Specify as a number in pixels. Analogous to the CSS property: border-width.
Border style
This option determines the border style around the button. Four border styles are available: solid, dashed, dotted, and double.
Border color
This option sets the border color around the floating contact button widget. Specify in HEX format.
The last block of options is responsible for the button animation. Let's review each option and each type of animation.
Turn on the animation?
This option activates the animation of the floating contact button. If "Yes" is selected, the animation from the field below will be applied.
Animation type
This option determines the type of animation applied to the floating contact button. Four animation variants are available: button pulses, button jumps, button moves, and icon rotates.
Duration
This field specifies the duration of the button animation playback as a number in seconds.
Pulse length
This field specifies the maximum length of the pulse. Specify as a number in pixels. The pulse length is applied only if "Button pulses" is selected in the "Animation type" field.
Jump height
This field specifies the maximum height the button will jump. Specify as a number in pixels. The jump height is applied only if "Button jumps" is selected in the "Animation type" field.
Movement width
This field specifies the maximum movement distance from the center to the side of the button. Specify as a number in pixels. The movement width is applied only if "Button moves" is selected in the "Animation type" field.
Window design
This option determines the design of the contact widget window. Three design variants are available: Light, Dark, and Custom. Custom design will open access to additional fields where you can customize the widget design to match your website's design.
Window title
Enter the text title to be displayed in the header of the contact widget.
Window description
Enter the text description to be displayed in the header of the contact widget.
Type of icons
This option determines the icon design displayed in the contact widget. Two icon display variants are available: plain icons and icons in a circle.
The following fields are responsible for the color of the contact icons.
Phone icon
This option sets the color for all phone contact icons in the contact widget. Specify in HEX format.
Email icon
This option sets the color for all Email contact icons in the contact widget. Specify in HEX format.
WhatsApp icon
This option sets the color for all WhatsApp contact icons in the contact widget. Specify in HEX format.
Telegram icon
This option sets the color for all Telegram contact icons in the contact widget. Specify in HEX format.
Viber icon
This option sets the color for all Viber contact icons in the contact widget. Specify in HEX format.
Skype icon
This option sets the color for all Skype contact icons in the contact widget. Specify in HEX format.
Facebook icon
This option sets the color for all Facebook contact icons in the contact widget. Specify in HEX format.
VK.com icon
This option sets the color for all VK.com contact icons in the contact widget. Specify in HEX format.
Adding Contacts
Adding contacts to the widget is simple. At the bottom of the module, pay attention to the button with the "+" sign in the "Contacts" field.
Click on it. A group of fields for adding a contact will appear below. Click the button each time you need to add a new contact.
Let's review the fields for adding a new contact.
Contact type
This option sets the type of contact to which the added contact will belong. It can be: phone call, Email, WhatsApp, Telegram, Viber, Skype, Facebook, and VK.com.
Icon
This option sets the icon applicable to the added contact. A total of 11 icons are available in the module. Icons are available according to the contact type.
Contact
Enter the contact number, email address, or Telegram login in this field. The phone number must be specified in international format without the "+" sign. The email address must be specified in standard email format. For Telegram contact, a login is used. For Skype contact, you need to enter your Skype login. Facebook and VK.com contact types support only a direct link to the desired page.
Example phone number for calls, WhatsApp, and Viber: 375441111111
Example email address: noreply@iws.by
Telegram login: telegramLogin
Skype login: skypeLogin
Facebook link: https://www.facebook.com/facebook/
VK.com link: https://vk.com/vk/
Attention! If the format of the entered contact data is not observed, the contact will not work.
Contact title
Enter the text name of the contact in this field. It is displayed at the top right relative to the contact icon.
Contact description
Enter the text description of the contact in this field. It is displayed at the bottom right relative to the contact icon.
Custom Design Settings
Custom design settings become available after selecting "Custom Design" in the "Window design" field.
Header background
This option is responsible for the background color of the upper part of the contact widget, which displays the title, description, and close button. Specify in HEX format.
Header title
This option is responsible for the text color of the widget title located in the upper part of the widget. Specify in HEX format.
Header description
This option is responsible for the text color of the widget description located in the upper part of the widget. Specify in HEX format.
Header close button
This option is responsible for the color of the widget close icon located in the upper part of the widget. Specify in HEX format.
Content background
This option is responsible for the background color of the central part of the widget, where contacts are placed. Specify in HEX format.
Content title
This option is responsible for the text color of the title for each contact in the central part of the widget. Specify in HEX format.
Content description
This option is responsible for the text color of the description for each contact in the central part of the widget. Specify in HEX format.
Item background when hovering
This option is responsible for the background color of the contact when hovering over it with the mouse cursor. Specify in HEX format.
Color icon inside circle
This option is responsible for the color of the icons when "In Circle" is selected in the "Type of icons" field. Specify in HEX format.
Extension update error
If you encounter an error when updating an extension in the Joomla control panel, this section of the instructions is for you.
Error appears in several cases, all of which are related to the extension's license key.
1) You have not filled in the license key in the extension settings.
Go to the extension settings and check if the "License key" field is filled in. Without a license key, it is not possible to download updates. Sometimes, you may have added a license key, but the Joomla CMS did not save it correctly. In this case, in the extension settings, after entering the license key, click "Save" and then click "Save & Close".
2) Your license key has expired.
To check the expiration date of your license key, go to https://iws.by/en/my-account/view-license-keys. In the list of license keys, find the key for your extension and check its validity in the "Valid until" column. If the license key has expired, it is not possible to get updates. To resolve this issue, place a new order and obtain a current license key.
3) The license key is not valid on your current site.
Our update system is designed so that the first time you access the update server, the license key is assigned to the site that requested it. If you try to use the license key on multiple sites, updates will be available for only one site. If you need updates for multiple sites, purchase multiple license keys on our website. Sites without license keys will not be able to receive updates.
Attention! If you have changed your site's address and cannot download updates, write to us at support@iws.by with the new site address. We will update the data on our update server, and within 24 hours you will be able to receive updates.
Support
IWS.BY support service for questions regarding our products is available via email: support@iws.by.
All available support options are available on the Support page: Go to.