Изменение позиции лавашара и чата

У лавашара установлено значение position: fixed — это дефолтная позиция лавашара:

position: fixed;
bottom: 15px;
right: 30px';

Дефолтная позиция чата:

position: fixed;
bottom: 30px;
right: 30px';

Свойство position используется, чтобы контролировать положение лавашара и чата на странице. Оно содержит следующие поля:

kpssX — Отступ для лавашара по оси X. Будет применен к значению left или right, в зависимости от значения align. Значение игнорируется при kpssMobilePosition = 'center'.
kpssY — Отступ для лавашара по оси Y. Будет применен к значению bottom.
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 { FloatingAssistantChat } from '@sberdevices/assistant-web-sdk';

export const ChatWithAssistant: FC = () => {
    return (
        <FloatingAssistantChat
            {...props}
            position={{
                kpssX: 750,
                kpssY: 500,
                kpssMobilePosition: 'center',
                chatOffsetX: 200,
                chatOffsetY: 200,
                align: 'right',
                kpssAnimation: 'alternative',
            }}
        />
    );
};

Обновлено 20 апреля 2022

Заметили ошибку?

Выделите текст и нажмите Ctrl + Enter, чтобы сообщить нам о ней

Популярные

Популярные

Изменение позиции лавашара и чата