Управление позицией плавающего чата и лавашара

Обновлено 30 января 2024

Позиция лавашара по умолчанию:

{
    position: fixed;
    bottom: 15px;
    right: 30px;
}

Позиция чата по умолчанию:

{
    position: fixed;
    bottom: 30px;
    right: 30px;
}

При необходимости, вы можете позиционировать лавашар абсолютно, для этого необходимо указать одно из свойств объекта position: kpssTop, kpssBottom, kpssLeft, kpssRight (string | number). Объект position используется, чтобы контролировать положение лавашара и чата на странице. Он содержит следующие поля:

• kpssX — Отступ для лавашара по оси X. Будет применен к значению left или right, в зависимости от значения align. Значение игнорируется при kpssMobilePosition = 'center'.
• kpssY — Отступ для лавашара по оси Y. Будет применен к значению bottom.
• kpssTop — CSS-свойство top. Если указано, то лавашар станет position: absolute.
• kpssBottom — CSS-свойство bottom. Если указано, то лавашар станет position: absolute.
• kpssLeft — CSS-свойство left. Если указано, то лавашар станет position: absolute.
• kpssRight — CSS-свойство right. Если указано, то лавашар станет position: absolute.
• kpssMobilePosition — Расположение лавашара на странице в мобильной верстке. Значения: center.
• chatOffsetX — Отступ для чата по оси X. Будет применен к значению left или right, в зависимости от значения align. Игнорируется в мобильной версии, так как чат открывается на весь экран.
• chatOffsetY — Отступ для чата по оси Y. Будет применен к значению bottom. Игнорируется в мобильной версии, так как чат открывается на весь экран.
• align — Расположение кнопки закрытия чата. Значения: left, right.
• kpssAnimation — Анимации для лавашара при открытии чата. Значения: default, alternative. Если значение не указано, анимация будет зависеть от позиции лавашара. Если лавашар находится в дефолтном положении (kpssX и kpssY не указаны) будет использована анимация со значением default. Если указано хотя бы одно из значений (kpssY или kpssX), то будет использована alternative анимация.

Пример:

import React, { FC } from 'react';
import { FloatingAssistantChatLottie } from '@sberdevices/assistant-web-sdk/floatingAssistantChatLottie';

export const ChatWithAssistant: FC = () => {
    return (
        <FloatingAssistantChatLottie
            {...props}
            position={{
                kpssX: 750,
                kpssY: 500,
                kpssTop: '100px',
                kpssBottom: '100%',
                kpssLeft: 0,
                kpssRight: 0,
                kpssMobilePosition: 'center',
                chatOffsetX: 200,
                chatOffsetY: 200,
                align: 'right',
                kpssAnimation: 'alternative',
            }}
        />
    );
};