Documentation: MAX 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
Module settings are located in different places depending on the Joomla version. Please use the paths below to find the module:
- Joomla 3: "Extensions" -> "Modules"
- Joomla 4/5/6: "Content" -> "Site Modules"
In the module list, find "IWS.BY MAX Button". Click on the module title, and a page with available settings will open. Let's review each field below.
License Key. Enter the license key received when purchasing the module on the IWS.BY website. Without a key in this field, the module will not be able to access the update server and update automatically.
Main Module Settings
Display Mode. This option determines how the button is displayed on the site. Simple Button – in this mode, a standard button will be displayed; clicking it will redirect to the MAX messenger. The button can be floating or static. Manager Card – in this mode, a floating button will be displayed; clicking it will open a popup window with manager information (Name, Department, Photo, and Greeting) and a button to open the MAX messenger. Agents List – in this mode, a floating button will be displayed; clicking it will open a popup window with a list of agents available in MAX. Each manager can be assigned a name, department, photo, and link. Static Card – a mode where a static block with manager information (name, department, avatar, and greeting) is displayed. Clicking the block will redirect to the MAX messenger.
Link Opening Mode. This option determines how the link opens in the site visitor's browser. You can set it to open in a new browser tab or in the current browser tab.
Rel Attribute. This option sets the `rel` attribute for the module link. Nofollow – tells search engines not to count this link when calculating the page rating. Noopener – prevents the new page from accessing the `window.opener` object, increasing security when opening the link in a new tab. Noreferrer – prevents the transmission of the HTTP `Referer` header, hiding the traffic source.
Floating Button Settings
Button Size. Specifies the button size in pixels.
Background Color. Sets the button's background color in HEX format.
Icon Color. Sets the color of the icon on the button in HEX format.
Position. Determines the button's position relative to the site visitor's screen. The button is pinned to the bottom of the screen. You can choose the side: right or left.
Right Margin. Specifies the distance from the right side of the screen to the button, in pixels.
Left Margin. Specifies the distance from the left side of the screen to the button, in pixels.
Bottom Margin. Specifies the distance from the bottom of the screen to the button, in pixels.
Z-Index. Specifies the layer level on which the button will be placed. This property is analogous to the CSS `z-index` property.
Button Border Settings
Enable. If set to "Yes", a custom border will be applied to the button.
Width. Specifies the border width in pixels.
Style. Specifies the border style applied to the button. Options include solid, dashed, dotted, and double.
Color. Sets the color of the border applied to the button.
Animation Settings
Enable. If set to "Yes", animation will be applied to the button.
Effect. Sets the animation effect applied to the button. Options include pulse, bounce, slide, and rotate.
Duration. Specifies the animation duration in seconds.
Pulse Size. Specifies the wavelength of the pulse animation.
Bounce Height. Specifies the height to which the button should bounce, in pixels.
Slide Distance. Specifies the width the button should move to one of the sides, in pixels.
"Button" Mode
In this mode, a standard button will be added; clicking it will redirect to the MAX messenger. Settings are located in the "Button" tab of the module settings.
MAX Link. Enter the direct link to your MAX messenger profile in this field.
Button Type. Sets the button's behavior. Floating – the button will be pinned to the bottom right or left of the screen. Static – the button will be standard and located where the module position is assigned.
Add External Margins. If set to "Yes", external margins will be applied to the button. Margins apply only to the static button.
Top. Specifies the distance from the top block to the button, in pixels.
Right. Specifies the distance from the right block to the button, in pixels.
Bottom. Specifies the distance from the bottom block to the button, in pixels.
Left. Specifies the distance from the left block to the button, in pixels.
Unit of Measurement. Sets the unit of measurement added to external margins. Options: px, %, and em.
"Manager" Mode
In this mode, a floating button will be added; clicking it will open a popup window with manager information: name, department, photo, and greeting. Settings are located in the "Manager" tab of the module settings.
Main Settings
MAX Link. Enter the direct link to your MAX messenger profile in this field.
Window Theme. Sets the color scheme of the manager info window. Light – pre-configured light design. Dark – pre-configured dark design. Custom – the theme design can be configured in the "Custom Design" options group.
Photo. Allows uploading an image via the Joomla media manager. A square image is recommended.
Name. Enter the manager's first and last name.
Department. Enter the manager's department.
Greeting. Enter the manager's welcome message.
Button Text. Enter the text that will appear on the button, which redirects to the MAX messenger.
Show Icon. If set to "Yes", the MAX icon will be added to the left of the button text.
Icon Size. Specifies the icon size on the button, in pixels.
Custom Design Settings
These settings appear only if "Custom" is selected in the "Window Theme" option.
Header Background. Sets the header background color in the popup.
Manager Name. Sets the manager name color in the popup.
Manager Department. Sets the manager department color in the popup.
Close Icon. Sets the close icon color in the popup.
Close Icon (on hover). Sets the close icon color in the popup when hovered over.
Content Background. Sets the central part background color in the popup.
Greeting Background. Sets the greeting message background color in the popup.
Greeting Text. Sets the greeting message text color in the popup.
Footer Background. Sets the bottom part background color in the popup.
Chat Button Background. Sets the chat button background color in the popup, which opens the chat in MAX.
Chat Button Background (on hover). Sets the chat button background color in the popup when hovered over.
Chat Button Text. Sets the chat button text color in the popup.
Chat Button Text (on hover). Sets the chat button text color in the popup when hovered over.
Chat Button Icon. Sets the chat button icon color in the popup.
Chat Button Icon (on hover). Sets the chat button icon color in the popup when hovered over.
Typography Settings
Typography settings apply to every text element in the popup window. They are grouped for the name, department, manager greeting, and button text. The documentation will describe one group, but they are identical for each text element.
Font Size. Specifies the font size as a number. The unit of measurement is set in the option below. Analogous to the CSS `font-size` property.
Unit of Measurement. Sets the unit for text size. Available values: px, %, em, and rem.
Line Height. Specifies the line height as a number. The unit is set below. Analogous to the CSS `line-height` property.
Unit of Measurement. Sets the unit for line height. Available values: unitless, px, %, em, and rem.
Font Weight. Sets the text weight. Analogous to the CSS `font-weight` property. Available values: 100, 200, 300, 400, 500, 600, 700, 800, and 900.
Text Transform. Sets the text case. Analogous to the CSS `text-transform` property. Available values: capitalize, lowercase, uppercase, and none.
Font Style. Sets the text style. Available values: normal, italic, and oblique.
Text Decoration. Sets the text decoration. Available values: none, underline, overline, and line-through.
"Agents" Mode
In this mode, a floating button will be added; clicking it will open a popup window with a list of agents available in the MAX messenger. Settings are located in the "Agents" tab of the module settings.
Main Settings
Window Theme. Sets the color scheme of the agents list window. Light – pre-configured light design. Dark – pre-configured dark design. Custom – the theme design can be configured in the "Custom Design" options group.
Window Title. Enter the text that will serve as the popup window title.
Window Description. Enter the text that will serve as the popup window description.
Next is a group of fields that is identical for each agent.
Photo. Allows uploading an image via the Joomla media manager. A square image is recommended.
Name. Enter the agent's first and last name.
Department. Enter the agent's department.
MAX Link. Enter the direct link to your MAX messenger profile in this field.
Custom Design Settings
These settings appear only if "Custom" is selected in the "Window Theme" option.
Header Background. Sets the header background color in the popup.
Window Title. Sets the window title text color in the popup.
Window Description. Sets the window description text color in the popup.
Close Icon. Sets the close icon color in the popup.
Close Icon (on hover). Sets the close icon color in the popup when hovered over.
Content Background. Sets the central part background color in the popup.
Agent Name. Sets the agent name text color in the popup.
Agent Name (on hover). Sets the agent name text color in the popup when hovered over.
Agent Department. Sets the agent department text color in the popup.
Agent Department (on hover). Sets the agent department text color in the popup when hovered over.
Agent Background (on hover). Sets the agent block background color when hovered over.
Divider Line. Sets the color of the divider line under the agent block.
Divider Line (on hover). Sets the color of the divider line under the agent block when hovered over.
Typography Settings
Typography settings apply to every text element in the popup window. They are grouped for the window title, window description, agent name, and agent department. The documentation will describe one group, but they are identical for each text element.
Font Size. Specifies the font size as a number. The unit of measurement is set in the option below. Analogous to the CSS `font-size` property.
Unit of Measurement. Sets the unit for text size. Available values: px, %, em, and rem.
Line Height. Specifies the line height as a number. The unit is set below. Analogous to the CSS `line-height` property.
Unit of Measurement. Sets the unit for line height. Available values: unitless, px, %, em, and rem.
Font Weight. Sets the text weight. Analogous to the CSS `font-weight` property. Available values: 100, 200, 300, 400, 500, 600, 700, 800, and 900.
Text Transform. Sets the text case. Analogous to the CSS `text-transform` property. Available values: capitalize, lowercase, uppercase, and none.
Font Style. Sets the text style. Available values: normal, italic, and oblique.
Text Decoration. Sets the text decoration. Available values: none, underline, overline, and line-through.
"Card" Mode
In this mode, a static card with manager information will be added; clicking it will open a chat in the MAX messenger. Settings are located in the "Card" tab of the module settings.
Main Settings
MAX Link. Enter the direct link to your MAX messenger profile in this field.
Card Theme. Sets the card's color scheme. Light – pre-configured light design. Dark – pre-configured dark design. Custom – the theme design can be configured in the "Custom Design" options group.
Avatar. Sets the operator avatar type in the card. Options: messenger icon or photo.
Photo. Allows uploading an image via the Joomla media manager. A square image is recommended.
Photo Shape. Allows setting the operator photo shape. Available values: circle, square, and rounded.
Name. Enter the operator's first and last name.
Department. Enter the operator's department.
Greeting. Enter the operator's welcome message.
Card Block Settings
Add External Margins. If set to "Yes", external margins from the settings below will be applied to the card.
Top. Specifies the distance from the top block to the card, in pixels.
Right. Specifies the distance from the right block to the card, in pixels.
Bottom. Specifies the distance from the bottom block to the card, in pixels.
Left. Specifies the distance from the left block to the card, in pixels.
Unit of Measurement. Sets the unit of measurement added to external margins. Options: px, %, and em.
Add Internal Padding. If set to "Yes", internal padding from the settings below will be applied to the card.
Top. Specifies the distance from the top border to the card content, in pixels.
Right. Specifies the distance from the right border to the card content, in pixels.
Bottom. Specifies the distance from the bottom border to the card content, in pixels.
Left. Specifies the distance from the left border to the card content, in pixels.
Unit of Measurement. Sets the unit of measurement added to internal padding. Options: px, %, and em.
Border Radius. If set to "Yes", the card block will have rounded corners. Analogous to CSS `border-radius`.
Border Radius Value. Specifies the radius for rounding the card corners.
Unit of Measurement. Sets the unit added to the border radius. Options: px, %, and em.
Custom Design Settings
These settings appear only if "Custom" is selected in the "Card Theme" option.
Card Background. Sets the card background color.
Icon. Sets the card icon color.
Operator Name. Sets the operator name text color.
Divider Line. Sets the color of the divider line between the name and department.
Operator Department. Sets the operator department text color.
Greeting. Sets the operator welcome message text color.
Typography Settings
Typography settings apply to every text element on the card. They are grouped for the name, department, and operator message. The documentation will describe one group, but they are identical for each text element.
Font Size. Specifies the font size as a number. The unit of measurement is set in the option below. Analogous to the CSS `font-size` property.
Unit of Measurement. Sets the unit for text size. Available values: px, %, em, and rem.
Line Height. Specifies the line height as a number. The unit is set below. Analogous to the CSS `line-height` property.
Unit of Measurement. Sets the unit for line height. Available values: unitless, px, %, em, and rem.
Font Weight. Sets the text weight. Analogous to the CSS `font-weight` property. Available values: 100, 200, 300, 400, 500, 600, 700, 800, and 900.
Text Transform. Sets the text case. Analogous to the CSS `text-transform` property. Available values: capitalize, lowercase, uppercase, and none.
Font Style. Sets the text style. Available values: normal, italic, and oblique.
Text Decoration. Sets the text decoration. Available values: none, underline, overline, and line-through.
Analytics Settings
Analytics is used to send event data to Google Analytics and goals to Yandex Metrica. It works as follows: the user clicks the button, and the data is sent to the activated service. Integration codes for these services must be installed on the site. Settings are located in the "CSS and JS" tab of the module settings.
Enable Analytics. If set to "Yes", analytics integration will be added to the widget.
Enable Google Analytics. If set to "Yes", Google Analytics integration will be activated.
Creating events in Google Analytics is described in the official documentation, available at: https://support.google.com/analytics/answer/12844695?hl=en. The data entered in the module settings must be configured in the service.
Parameter Name. Enter the identifier of the parameter created in Google Analytics.
Parameter Value. Enter the value of the parameter created in Google Analytics.
Enable Yandex Metrica. If set to "Yes", Yandex Metrica integration will be activated.
Creating goals in Yandex Metrica is described in the official documentation, available at: https://yandex.com/support/metrica/general/goal-js-event.html#js-event. The data entered in the module settings must be configured in the service.
Yandex Metrica Counter ID. Enter the numeric identifier of your Yandex Metrica counter.
Goal Name. Enter the JavaScript goal identifier created in Yandex Metrica.
Additional CSS and JS Settings
Additional style and script settings are located in the "CSS and JS" tab of the module settings.
CSS Code. Enter the CSS code to be added to the site. A code example is shown below:
body{
background:#ccc;
}
JS Code. Enter the JavaScript code to be added to the site. A code example is shown below:
alert('Work!');Popup Window Trigger Function
For the "Manager Card" and "Agents List" modes, there is a function to trigger the popup window. To use it, you need to call the JavaScript function via the `onClick` method: `openIwsbyMaxID();`.
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 ID is 20, the popup trigger function will look like this: `openIwsbyMax20();`
This function can be called using two methods:
1) Call via onClick method:
<a href="#" onClick="openIwsbyMax20();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:openIwsbyMax20()">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.
Getting the Link for Your Website
- Open the MAX app on your smartphone.
- Go to the "Profile" section.
- Find the "QR Code" section in the top left corner.
- Tap the "Share" button.
- Choose any messenger (e.g., SMS, Email, or even MAX itself) to send it.
- In the window that opens, you will see a text message with a hyperlink like: https://max.ru/u/...
- Copy this link for the module settings. This is your official MAX profile link.
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.