Documentation: Twitter 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 administrator panel section containing all site modules. In the module list, find "IWS.BY Twitter 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
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.
Button Type
This option determines how the button is displayed on the site. It can be a standard floating button, or a floating button that opens a popup window with manager information and a "Start Chat" button when clicked.
Logo
This option determines the type of logo displayed on the site. Two variants are available: the new Twitter X logo and the old Twitter logo with the bird.
Twitter login
Enter your Twitter username to which the user will be redirected after clicking the button.
Link Opening Attribute
This option determines how the link opens in the site visitor's browser. Two options are available: the link will open in a new window/tab, or it will open in the current browser window/tab.
Button Size (pixels)
This field determines the button's dimensions (height and width). Specified as a number in pixels.
Background Color
This option sets the background color of the floating button. Specified in RGB format.
Icon Color
This option sets the color of the icon on the floating button. Specified in HEX format.
Button location
This option determines the position of the floating button relative to the site visitor's screen. Two options are available: left or right side. The button will be pinned to the bottom of the screen.
The next two fields are filled depending on the chosen side for displaying the button.
Right indent
This field sets the distance between the button and the right side of the visitor's screen. Specified as a number in pixels.
Left indent
This field sets the distance between the button and the left side of the visitor's screen. Specified as a number in pixels.
Bottom indent
This field sets the distance between the button and the bottom of the visitor's screen. Specified as a number in pixels.
Layer level (Z-INDEX)
Enter the layer level at which the button will be displayed relative to all other site elements. Analogous to the CSS z-index property.
The next block of settings defines the border for the floating button.
Border Settings
Enable the border?
This option activates the border around the floating button. If "Yes" is selected, the border settings from below will be applied.
Border Width
Enter the border width. Specified as a number in pixels. Analogous to the CSS border-width property.
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 color of the border around the floating button widget. Specified in HEX format.
The last block of options is responsible for button animation. Let's review each option and animation type.
Animation Settings
Turn on the animation?
This option activates the animation for the floating 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 button. Four animation variants are available: pulse, bounce, slide, and icon rotation.
Duration
Enter the duration in seconds for one animation cycle to play.
Pulse Length
Enter the length in pixels for the button's pulse effect when the "Pulse" animation type is selected.
Bounce Height
Enter the maximum height in pixels the button will bounce when the "Bounce" animation type is selected.
Width of movement
Enter the maximum width in pixels for the button's lateral movement when the "Slide" animation type is selected.
Manager Settings
Manager settings are applied only if "Manager" is selected in the "Button Type" option within the main module settings.
Main Manager Settings
Window design
This option determines the design of the popup window with manager information. Three variants are available: light, dark, and custom. If "Custom" is selected, you can configure your own color scheme for the popup window.
Image of the manager
This option sets the manager's image, which will be displayed at the top of the popup window. Uploading a square image is recommended.
Manager Name
Enter the manager's name, which will be displayed at the top of the popup window.
Manager Department
Enter the manager's department, which will be displayed at the top of the popup window below the manager's name.
Message from the manager
Enter the manager's welcome message, which will be displayed in the central part of the popup window.
Button name
Enter the text that will be displayed on the button at the bottom of the popup window.
Custom Design Settings
Header Background Color
This option sets the background color of the top part of the popup window. Specified in HEX format.
Name Color
This option sets the color of the manager's name at the top of the popup window. Specified in HEX format.
Department Color
This option sets the color of the manager's department at the top of the popup window. Specified in HEX format.
Close Icon Color
This option sets the color of the close icon at the top of the popup window. Specified in HEX format.
Close icon color when hovering
This option sets the color of the close icon at the top of the popup window when hovered over with the mouse cursor. Specified in HEX format.
Background color of content
This option sets the background color of the central part of the popup window containing the manager's message. Specified in HEX format.
Message Background Color
This option sets the background color of the manager's message in the central part of the popup window. Specified in HEX format.
Message Text Color
This option sets the text color of the manager's message in the central part of the popup window. Specified in HEX format.
Footer Background Color
This option sets the background color of the bottom part of the popup window. Specified in HEX format.
Button Background Color
This option sets the background color of the button at the bottom of the popup window. Specified in HEX format.
Button background color when hovering
This option sets the background color of the button at the bottom of the popup window when hovered over with the mouse cursor. Specified in HEX format.
Text color on the button
This option sets the text color on the button at the bottom of the popup window. Specified in HEX format.
Text color on the button when hovering
This option sets the text color on the button at the bottom of the popup window when hovered over with the mouse cursor. Specified in HEX format.
Analytics Settings
This section is designed to track events and goals triggered by clicking the Twitter module buttons. Events can be sent to Google Analytics, and goals can be sent to Yandex Metrica. If you need integration with other analytics services, please email us, and we will try to implement it.
The settings in this section will only work if you have installed the integration codes for Google Analytics or Yandex Metrica on your site.
Enable Analytics?
If "Yes" is selected, analytics features will be applied to the button.
Google Analytics
Enable Google Analytics?
If "Yes" is selected, the Google Analytics settings from the fields below will be applied to the button.
The fields below are applied depending on the button type. If the button type is "Button", an event will be sent when the floating button is clicked. If the button type is "Manager", there will be multiple events: the first when the floating button is clicked, and the second when the button in the popup window is clicked to open the chat.
Instructions for creating a new event are available at the following link: https://support.google.com/analytics/answer/10085872?hl=en
"Button" Mode
In this mode, a single event is sent when the floating button is clicked.
Parameter
Enter the parameter name used when creating the event in Google Analytics.
Value
Enter the parameter value used when creating the event in Google Analytics.
"Manager" Mode
In this mode, two events are sent. The first is when the floating button is clicked. The second is when the button in the popup window is clicked.
Parameter (Step 1)
Enter the parameter name for the first step used when creating the event in Google Analytics. The first step is clicking the floating button.
Value (Step 1)
Enter the parameter value for the first step used when creating the event in Google Analytics. The first step is clicking the floating button.
Parameter (Step 2)
Enter the parameter name for the second step used when creating the event in Google Analytics. The second step is clicking the button in the popup window that opens the chat.
Value (Step 2)
Enter the parameter value for the second step used when creating the event in Google Analytics. The second step is clicking the button in the popup window that opens the chat.
Yandex Metrica
Enable Yandex Metrica?
If "Yes" is selected, the Yandex Metrica settings from the fields below will be applied to the button.
Yandex Metrica ID
Enter the numeric identifier of your resource in Yandex Metrica. For information on how to find your resource ID in Yandex Metrica, please refer to the following link: https://yandex.com/support/metrica/general/tag-id.html.
The fields below are applied depending on the button type. If the button type is "Button", an event will be sent when the floating button is clicked. If the button type is "Manager", there will be multiple events: the first when the floating button is clicked, and the second when the button in the popup window is clicked to open the chat.
Instructions for creating a new goal are available at the following link: https://yandex.com/support/metrica/general/goal-js-event.html. The plugin supports the "JavaScript event" goal type.
"Button" Mode
In this mode, a single event is sent when the floating button is clicked.
Event ID
Enter the goal identifier used when creating the goal in Yandex Metrica.
"Manager" Mode
In this mode, two events are sent. The first is when the floating button is clicked. The second is when the button in the popup window is clicked.
Event ID (Step 1)
Enter the goal identifier for the first step used when creating the goal in Yandex Metrica. The first step is clicking the floating button.
Event ID (Step 2)
Enter the goal identifier for the second step used when creating the goal in Yandex Metrica. The second step is clicking the button in the popup window that opens the chat.
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.