How to get a link for your site
- Open the MAX app on your smartphone.
- Go to your “Profile” section.
- In the top-left corner, tap “QR Code”.
- Tap the “Share” button.
- Choose any messaging app (e.g., SMS, Email, or even MAX itself) to send the link.
- In the message preview, you’ll see a hyperlink in the following format:
https://max.ru/u/... - Copy this link. It is your official MAX profile URL. Use it when configuring the module.
Configuring the module
The module settings are located in different places depending on the Joomla version. Please use the paths below to find the module:
- Joomla 3: “Extensions” -> “Module Manager”
- Joomla 4/5/6: “Content” -> “Site modules”
In the list of modules, find “IWS.BY MAX Button“. Click on the name of the module and you will see a page with the available settings. Consider each field below.
Lecense key. Enter the license key you received when purchasing the module from iws.by. Without a valid key in this field, the module will not be able to connect to the update server or receive automatic updates.
Basic Module Settings
Display Mode. This option controls the button display mode on your website. Simple Button — in this mode, a regular button will be shown; clicking it will redirect the user to 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 the manager’s information (name, department, photo, and greeting) and a button to open MAX Messenger. Agent List — in this mode, a floating button will be shown, 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 — this mode displays a static block with the manager’s information (name, department, avatar, and greeting). Clicking the block will redirect the user to MAX Messenger.
Link Opening Mode. This option controls how the link opens in the visitor’s browser. You can choose to open it in a new browser tab or in the current browser tab.
rel attribute. This option sets the rel attribute for the module’s link. Nofollow — instructs search engines not to consider this link when calculating page ranking. Noopener — prevents the new page from accessing the window.opener object, enhancing security when the link opens in a new tab. Noreferrer — blocks the transmission of the HTTP Referer header, hiding the source of the traffic.
Floating Button Settings
Size. The field specifies the button size in pixels.
Background Color. This option sets the button background color in HEX format.
Icon Color. This option sets the icon color on the button in HEX format.
Position. This option controls the button position relative to the visitor’s screen. The button is aligned to the bottom of the screen, and you can choose the side: right or left.
Right Offset. The field specifies the distance from the right edge of the screen to the button, entered as a number in pixels.
Left Offset. The field specifies the distance from the left edge of the screen to the button, entered as a number in pixels.
Bottom Offset. The field specifies the distance from the bottom edge of the screen to the button, entered as a number in pixels.
Layer Level. The field specifies the layer level at which the button will be positioned. This property is equivalent to the CSS z-index property.
Button Border Settings
Enable. If the “Yes” option is selected, a customizable border will be applied to the button.
Width. The field specifies the border width in pixels.
Style. This option specifies the border style applied to the button. You can choose solid, dashed, dotted, or double.
Color. This option sets the color of the border applied to the button.
Animation Settings
Enable. If the “Yes” option is selected, animation will be applied to the button.
Effect. This option sets the animation effect applied to the button. You can choose: pulsation, bounce, movement, or rotation.
Duration. The field specifies the animation duration in seconds.
Pulse Size. The field specifies the pulsation wavelength of the animation.
Jump Height. The field specifies the height to which the button should bounce, in pixels.
Movement Distance. The field specifies the distance the button should move to one side, in pixels.
Button Mode
In this mode, a standard button will be added; clicking it will redirect the user to MAX Messenger. The settings are located in the “Button” tab of the module settings.
MAX Link. You must enter the direct link to your MAX Messenger profile in this field.
Button Type. This option sets the button behavior type. Floating — the button will be fixed to the bottom edge of the screen, either on the right or left side. Static — the button will be a regular inline element placed in the module position selected in Joomla.
Add Margins. If the “Yes” option is selected, external margins will be applied to the button. Margins are applied only to the static button.
Top. The field specifies the distance from the top block to the button, in pixels.
Right. The field specifies the distance from the block on the right to the button, in pixels.
Bottom. The field specifies the distance from the bottom block to the button, in pixels.
Left. The field specifies the distance from the block on the left to the button, in pixels.
Unit. This option sets the unit of measurement to be used for external margins. You can choose: px, %, or em.
Manager Mode
In this mode, a floating button will be added; clicking it will open a popup window with the manager’s information: name, department, photo, and greeting. The settings are located in the “Manager” tab of the module settings.
Basic Settings
MAX Link. You must enter the direct link to your MAX Messenger profile in this field.
Window Theme. This option sets the color scheme of the manager information window. Light — a preconfigured light theme. Dark — a preconfigured dark theme. Custom — the theme design can be customized in the “Custom Design” options group.
Photo. This option allows you to upload an image using the Joomla media uploader. A square image is recommended.
Name. The field is used to enter the manager’s first and last name.
Department. The field is used to enter the manager’s department.
Greeting. The field is used to enter the manager’s greeting message.
Button Text. The field is used to enter the text that will appear on the button; clicking this button will redirect to MAX Messenger.
Show Icon. If the “Yes” option is selected, the MAX icon will be added to the left of the button text.
Icon Size. The field specifies the icon size on the button, entered as a number in pixels.
Custom Design Settings
These settings appear only if the “Custom” mode is selected in the “Window Theme” option.
Header Background. This option sets the background color of the header in the popup window.
Manager Name. This option sets the color of the manager’s name in the popup window.
Manager Department. This option sets the color of the manager’s department in the popup window.
Close Icon. This option sets the color of the close icon in the popup window.
Close Icon (Hover). This option sets the color of the close icon in the popup window when hovering over it with the mouse cursor.
Content Background. This option sets the background color of the central area in the popup window.
Greeting Background. This option sets the background color of the manager’s greeting message in the popup window.
Greeting Text. This option sets the text color of the manager’s greeting message in the popup window.
Footer Background. This option sets the background color of the bottom section in the popup window.
Chat Button Background. This option sets the background color of the button in the popup window that opens the chat in MAX Messenger.
Chat Button Background (Hover). This option sets the background color of the button in the popup window that opens the chat in MAX Messenger when the mouse cursor is hovered over it.
Chat Button Text. This option sets the text color of the button in the popup window that opens the chat in MAX Messenger.
Chat Button Text (Hover). This option sets the text color of the button in the popup window that opens the chat in MAX Messenger when the mouse cursor is hovered over it.
Chat Button Icon. This option sets the icon color on the button in the popup window that opens the chat in MAX Messenger.
Chat Button Icon (Hover). This option sets the icon color on the button in the popup window that opens the chat in MAX Messenger when the mouse cursor is hovered over the button.
Typography Settings
Typography settings are applied to each text element in the popup window. They are grouped for the manager’s name, department, greeting, and button text. The documentation describes one group, but the settings are identical for each text element.
Font Size. The field specifies the font size as a number. The unit of measurement is set in the option below. This corresponds to the CSS font-size property.
Unit. This option sets the unit of measurement for the font size. Available values: px, %, em, and rem.
Line Height. The field specifies the line spacing (line height) as a number. The unit of measurement is set in the option below. This corresponds to the CSS line-height property.
Unit. This option sets the unit of measurement for the line height. Available values: unitless, px, %, em, and rem.
Font Weight. This option sets the font weight. It corresponds to the CSS font-weight property. Available values: 100, 200, 300, 400, 500, 600, 700, 800, and 900.
Text Transform. This option sets the text case. It corresponds to the CSS text-transform property. Available values: Capitalize, Lowercase, Uppercase, and None.
Font Style. This option sets the font style. Available values: Normal, Italic, and Oblique.
Text Decoration. This option 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 displaying a list of agents available in MAX Messenger. The settings are located in the “Agents” tab of the module settings.
Basic Settings
Window Theme. This option sets the color scheme of the agents list window. Light — a preconfigured light theme. Dark — a preconfigured dark theme. Custom — the theme design can be customized in the “Custom Design” options group.
Window Title. The field is used to enter the text that will appear as the title of the popup window.
Window Description. The field is used to enter the text that will appear as the description in the popup window.
Next, there will be a group of fields that is identical for each agent.
Photo. This option allows you to upload an image using the Joomla media uploader. A square image is recommended.
Name. The field is used to enter the agent’s first and last name.
Department. The field is used to enter the agent’s department.
MAX Link. You must enter the direct link to your MAX Messenger profile in this field.
Custom Design Settings
These settings appear only if the “Custom” mode is selected in the “Window Theme” option.
Header Background. This option sets the background color of the header in the popup window.
Window Title. This option sets the text color of the window title in the popup window.
Window Description. This option sets the text color of the window description in the popup window.
Close Icon. This option sets the color of the close icon in the popup window.
Close Icon (Hover). This option sets the color of the close icon in the popup window when hovering over it with the mouse cursor.
Content Background. This option sets the background color of the central area in the popup window.
Agent Name. This option sets the text color of the agent’s name in the popup window.
Agent Name (Hover). This option sets the text color of the agent’s name in the popup window when hovering over it with the mouse cursor.
Agent Department. This option sets the text color of the agent’s department in the popup window.
Agent Department (Hover). This option sets the text color of the agent’s department in the popup window when hovering over it with the mouse cursor.
Agent Background (Hover). This option sets the background color of the agent’s block when hovering over it with the mouse cursor.
Divider. This option sets the color of the separator line below the agent’s block.
Divider (Hover). This option sets the color of the separator line below the agent’s block when hovering over the agent’s block with the mouse cursor.
Typography Settings
Typography settings are applied to each text element in the popup window. They are grouped for the window title, window description, agent’s name, and agent’s department. The documentation describes one group, but the settings are identical for each text element.
Font Size. The field specifies the font size as a number. The unit of measurement is set in the option below. This corresponds to the CSS font-size property.
Unit. This option sets the unit of measurement for the font size. Available values: px, %, em, and rem.
Line Height. The field specifies the line spacing (line height) as a number. The unit of measurement is set in the option below. This corresponds to the CSS line-height property.
Unit. This option sets the unit of measurement for the line height. Available values: unitless, px, %, em, and rem.
Font Weight. This option sets the font weight. It corresponds to the CSS font-weight property. Available values: 100, 200, 300, 400, 500, 600, 700, 800, and 900.
Text Transform. This option sets the text case. It corresponds to the CSS text-transform property. Available values: Capitalize, Lowercase, Uppercase, and None.
Font Style. This option sets the font style. Available values: Normal, Italic, and Oblique.
Text Decoration. This option sets the text decoration. Available values: None, Underline, Overline, and Line-through.
Card Mode
In this mode, a static manager info card will be added, clicking it will open a chat in MAX Messenger. The settings are located in the “Card” tab of the module settings.
Basic Settings
MAX Link. You must enter the direct link to your MAX Messenger profile in this field.
Card Theme. This option sets the color scheme of the card. Light — a preconfigured light theme. Dark — a preconfigured dark theme. Custom — the theme design can be customized in the “Custom Design” options group.
Avatar. This option sets the type of the operator’s avatar in the card. Available values: Messenger icon or Photo.
Manager Photo. This option allows you to upload an image using the Joomla media uploader. A square image is recommended.
Photo Shape. This option allows you to set the shape of the operator’s photo. Available values: Circular, Square, and Rounded.
Name. The field is used to enter the operator’s first and last name.
Department. The field is used to enter the operator’s department.
Greeting. The field is used to enter the operator’s greeting message.
Card Block Settings
Add Margins. If the value “Yes” is selected, external margins from the settings below will be applied to the card.
Top. The field specifies the distance from the top block to the card, in pixels.
Right. The field specifies the distance from the block on the right to the card, in pixels.
Bottom. The field specifies the distance from the bottom block to the card, in pixels.
Left. The field specifies the distance from the block on the left to the card, in pixels.
Unit. This option sets the unit of measurement to be used for the external margins. Available values: px, %, and em.
Add Padding. If the value “Yes” is selected, internal padding from the settings below will be applied to the card.
Top. The field specifies the distance from the top edge of the card to its content, in pixels.
Right. The field specifies the distance from the right edge of the card to its content, in pixels.
Bottom. The field specifies the distance from the bottom edge of the card to its content, in pixels.
Left. The field specifies the distance from the left edge of the card to its content, in pixels.
Unit. This option sets the unit of measurement to be used for the internal padding. Available values: px, %, and em.
Rounded Corners If the value “Yes” is selected, the card block will have rounded corners (CSS equivalent: border-radius).
Corner Radius. The field specifies the radius for rounding the card’s corners.
Unit. This option sets the unit of measurement for the card’s corner radius. Available values: px, %, and em.
Custom Design Settings
These settings appear only if the “Custom” mode is selected in the “Card Theme” option.
Card Background. This option sets the background color of the card.
Icon. This option sets the color of the card’s icon.
Operator Name. This option sets the text color of the operator’s name.
Divider. This option sets the color of the separator line between the operator’s name and department.
Operator Department. This option sets the text color of the operator’s department.
Greeting. This option sets the text color of the operator’s greeting message.
Typography Settings
Typography settings are applied to each text element on the card. They are grouped for the operator’s name, department, and greeting message. The documentation describes one group, but the settings are identical for each text element.
Font Size. The field specifies the font size as a number. The unit of measurement is set in the option below. This corresponds to the CSS font-size property.
Unit. This option sets the unit of measurement for the font size. Available values: px, %, em, and rem.
Line Height. The field specifies the line spacing (line height) as a number. The unit of measurement is set in the option below. This corresponds to the CSS line-height property.
Unit. This option sets the unit of measurement for the line height. Available values: unitless, px, %, em, and rem.
Font Weight. This option sets the font weight. It corresponds to the CSS font-weight property. Available values: 100, 200, 300, 400, 500, 600, 700, 800, and 900.
Text Transform. This option sets the text case. It corresponds to the CSS text-transform property. Available values: Capitalize, Lowercase, Uppercase, and None.
Font Style. This option sets the font style. Available values: Normal, Italic, and Oblique.
Text Decoration. This option 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 goal data to Yandex Metrica. Here’s how it works: when a user clicks the button, the data is sent to the enabled analytics service. Integration codes for these services must already be installed on the website. The settings are located in the “CSS & JS” tab of the module settings.
Enable Analytics. If the value “Yes” is selected, analytics integration will be enabled in the widget.
Enable Google Analytics. If the value “Yes” is selected, integration with Google Analytics will be activated.
Event creation in Google Analytics is described in the official documentation and available at: https://support.google.com/analytics/answer/12844695?hl=en. The values entered in the module settings must be pre-configured in the Google Analytics service itself.
Event Parameter. The field is used to enter the parameter ID created in Google Analytics.
Parameter Value. The field is used to enter the parameter value created in Google Analytics.
Enable Yandex Metrica. If the value “Yes” is selected, integration with Yandex Metrica will be activated.
Goal creation in Yandex Metrica is described in the official documentation and available at: https://yandex.ru/support/metrica/en/general/goal-js-event.html?lang=en#js-event. The values entered in the module settings must be pre-configured in the Yandex Metrica service itself.
Metrica Counter ID. The field requires the numeric Yandex Metrica counter ID.
Goal Name. The field is used to enter the JavaScript goal ID created in Yandex Metrica.
Additional CSS and JS Settings
Additional styles and scripts settings are located in the «CSS & JS» tab of the module settings.
CSS Code. The field is used to enter CSS code that should be added to the site. An example of the code is shown below:
.class{
color:white;
}
JS Code. The field is used to enter JavaScript code that should be added to the site. An example of the code is shown below:
alert(HelloWorld!');
Popup window trigger function
For the “Manager Card” and “Agents List” modes, a popup window trigger function is available. To use it, call the JavaScript function via the onClick method: openIwsbyMaxID();.
In this function, you need to replace “ID” with the numeric identifier of your module. You can find this ID in the administrator panel, in the list of all modules on your site. The table includes an “ID” column containing the module identifiers — locate the row for your MAX button module, and the corresponding ID in that column is the one you need.
For example, if your module ID is 20, the popup window trigger function will look like this: openIwsbyMax20();
This function can be called in two ways:
1) Calling via the onClick method:
<a href="#" onClick="openIwsbyMax20();return false;">Link</a>
Please note that return false is added after the function — this prevents the browser from following the link. To avoid page reload or navigation, this element must be included.
2) Calling via the link href attribute:
<a href="javascript:openIwsbyMax20()">Link</a>
You can use either method at your discretion. The first method is recommended for non-clickable elements on your site (e.g., divs, icons, or custom UI components). The second method is best suited for actual buttons and hyperlinks, as it uses the link’s href attribute to trigger the popup.
