Изменение позиции лавашара и чата
У лавашара установлено значение 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
, чтобы сообщить нам о ней