Widgets

A small window in the corner of the page. It doesn't obstruct the main content and is suitable for any website layout. Unlike corner banners, which are only available in the extended version, it doesn't allow changing the style, distance from the edge of the page, and the z-index property value.

1. If you need to test multiple variants of text or design, click the Add variant button. Another experimental variant will become available for customization. The variants will alternate during the experiment.

2. For each variant, select a widget type from the drop-down list.

3. Specify settings:

   • Position: The widget's position on the site page. Available options: Top left, Top right, Bottom left, and Bottom right.

   • Цветовая тема (Color scheme): Type of color scheme to use in the widget (dark or light). Choose according to your website's overall color scheme.

   • Заголовок (Title): The widget's title text. The title is displayed in a larger font compared to other widget elements. Its size can be configured only in the extended version of Varioqub.

   • Text: Main text of the widget that is positioned below the title and explains the widget's purpose.

   • Название ссылки (Link name): The text of the link that takes users to another page when clicked.

   • Адрес ссылки (Link address): The URL of the page to open when users click the link.

   • Таймаут повторного показа после закрытия (дни) (Replay timeout after closing (days)): Number of days after which the widget may reappear after the user closes it.

4. Use the Experiment testing window to visually check the widget placement on your site.

5. Click Save and run.

An animated pop-up window. You can place it either at the top or bottom of the screen. To draw the user's attention to the button, use the Пульсирование (Pulse) effect.

1. If you need to test multiple variants of text or design, click the Add variant button. Another experimental variant will become available for customization. The variants will alternate during the experiment.

2. For each variant, select a widget type from the drop-down list.

3. Specify settings:

   • Position: The widget's position on the site page. Available options: Сверху экрана (Top), Снизу экрана (Bottom).

   • Цветовая тема (Color scheme): Type of color scheme to use in the widget (dark or light). Choose according to your website's overall color scheme.

   • Заголовок (Title): The widget's title text. By default, the title is displayed in a larger font compared to other widget elements. To adjust its size, use Manual styles setup.

   • Text: Main text of the widget that is positioned below the title and explains the widget's purpose.

   • Название ссылки (Link title): The text of the button that takes users to another page when clicked..

   • Адрес ссылки (Link URL): The URL of the page to open when users click the button.

   • Эффект кнопки для привлечения внимания (Button effect for attracting attention): Animation for the link button. Available options: Без эффекта (No effect), Пульсирование (Pulse).

   • Скорость анимации (Animation speed): The speed of the widget appearance animation. Available options: Быстрая (Fast), Средняя (Average), Медленная (Slow), and Без анимации (No animation).

   • Таймер показа баннера (секунды) (Banner display timer (seconds)): The number of seconds to wait after loading the page before the widget appears.

   • Таймаут повторного показа после закрытия (дни) (Replay timeout after closing (days)): Number of days after which the widget may reappear after the user closes it.

   • Значение CSS свойства z-index (CSS z-index property value): The widget's position on the page relative to other markup layers.

     If any markup elements on the page have their own z-index property that is greater than the widget's default value, the widget will appear under those elements. In this case, increase the widget's z-index value to bring it to the front.

   • Ручная настройка стилей (Manual styles setup): With manual setup, you can customize the widget to match the style of your site. This way, the widget won't stand out and will blend seamlessly with the overall design of the page.

     Alert

     You can edit styles only using the CSS classes listed below. Changes to other styles may alter the appearance of the entire page. You need to be familiar with CSS to edit these settings.

   CSS classes available for editing

   • .ymab-integration-banner-body: Styles for the banner's size and initial position relative to the page.
   • .ymab-integration-banner-body-visible: Styles for the banner's position relative to the page after its appearance.
   • .ymab-integration-banner-main: Main styles for the banner's contents.
   • .ymab-integration-banner-text-block: Shared styles for the banner's text block (title and text below the title).
   • .ymab-integration-banner-title: Styles for the title.
   • .ymab-integration-banner-text: Styles for the text below the title.
   • .ymab-integration-banner-button-block: Shared styles for the banner's button block (link button and Close button).
   • .ymab-integration-banner-button-link: Styles for the link button.
   • .ymab-integration-banner-close: Styles for the Close button.

4. Use the Experiment testing window to visually check the widget placement on your site.

5. Click Save and run.

The most prominent widget, covering the entire site page. Users will definitely notice this banner and have to either click on the link or close the window.

1. If you need to test multiple variants of text or design, click the Add variant button. Another experimental variant will become available for customization. The variants will alternate during the experiment.

2. For each variant, select a widget type from the drop-down list.

3. Specify settings:

   • Цветовая тема (Color scheme): Type of color scheme to use in the widget (dark or light). Choose according to your website's overall color scheme.

   • Заголовок (Title): The widget's title text. By default, the title is displayed in a larger font compared to other widget elements. To adjust its size, use Manual styles setup.

   • Text: Main text of the widget that is positioned below the title and explains the widget's purpose.

   • Название ссылки (Link title): The text of the button that takes users to another page when clicked..

   • Адрес ссылки (Link URL): The URL of the page to open when users click the button.

   • Скорость анимации (Animation speed): The speed of the widget appearance animation. Available options: Быстрая (Fast), Средняя (Average), Медленная (Slow), and Без анимации (No animation).

   • Таймаут повторного показа после закрытия (дни) (Replay timeout after closing (days)): Number of days after which the widget may reappear after the user closes it.

   • Значение CSS свойства z-index (CSS z-index property value): The widget's position on the page relative to other markup layers.

     If any markup elements on the page have their own z-index property that is greater than the widget's default value, the widget will appear under those elements. In this case, increase the widget's z-index value to bring it to the front.

   • Ручная настройка стилей (Manual styles setup): With manual setup, you can customize the widget to match the style of your site. This way, the widget won't stand out and will blend seamlessly with the overall design of the page.

     Alert

     You can edit styles only using the CSS classes listed below. Changes to other styles may alter the appearance of the entire page. You need to be familiar with CSS to edit these settings.

   CSS classes available for editing

   • .ymab-integration-fullscreen-body: Styles for the fullscreen widget's size and initial position relative to the page.
   • .ymab-integration-fullscreen-main: Main styles for the fullscreen widget's contents.
   • .ymab-integration-fullscreen-main-visible: Styles for the fullscreen widget's position relative to the page after its appearance.
   • .ymab-integration-fullscreen-close: Styles for the × (Close) button.
   • .ymab-integration-fullscreen-block: Shared styles for the banner's text block (title and text below the title) and the link button.
   • .ymab-integration-fullscreen-title: Styles for the title.
   • .ymab-integration-fullscreen-text: Styles for the text below the title.
   • .ymab-integration-fullscreen-button-link: Styles for the link button.

4. Use the Experiment testing window to visually check the widget placement on your site.

5. Click Save and run.