ym88659208ym87991671
Управление позицией AssistantBar | Документация для разработчиков

Управление позицией AssistantBar

Обновлено 22 ноября 2023

AssistantBar зафиксирован в окне браузера, но вы можете управлять его отступами, шириной и цветом фона.

Для этого передавайте нужные CSS-свойства в необязательное свойство displayingOptions. displayingOptions принимает следующие свойства с типом string:

  • top;
  • bottom;
  • left;
  • right;
  • width;
  • background;
  • backgroundImage.

Обратите внимание, что у диалога пользователя с ассистентом прозрачный фон. Вы можете установить другой цвет самостоятельно.

Фоновый цвет можно установить:

  • с помощью параметров background и backgroundImage;
  • создав собственный фоновый блок position=fixed — в этом случае может понадобиться подписка на событие открытия и закрытия шторки ассистента (свойство onChatToggle: (isOpen: boolean) => void).

Пример использования AssistantBar с передачей фонового цвета:

import React, { FC } from 'react';
import { AssistantBar } from '@sberdevices/assistant-web-sdk/assistantBar';
import { background, gradient } from '@salutejs/plasma-tokens';

const displayingOptions = {
background,
backgroundImage: gradient,
};

export const AssistantBarWithBackground: FC = () => {
return <AssistantBar {...props} displayingOptions={displayingOptions} />;
};

Пример использования AssistantBar ограниченной ширины с общим фоном для всей страницы:

import React, { FC, useState, useCallback } from 'react';
import styled from 'styled-components';
import { AssistantBar } from '@sberdevices/assistant-web-sdk/assistantBar';
import { background, gradient } from '@salutejs/plasma-tokens';

import { Content } from '../components/Content';

const displayingOptions = {
left: '20%',
width: '60%',
};

const StyledContentContainer = styled.div<{ isOpen: boolean }>`
height: 100vh;
background: ${background};
${({ isOpen }) => (isOpen ? `background-image: ${gradient};` : '')};
`;

export const AssistantBarWithBackground: FC = () => {
const [isOpen, setIsOpen] = useState(false);

const handleChatToggle = useCallback((isOpen) => {
setIsOpen(isOpen);
}, []);

return (
<StyledContentContainer isOpen={isOpen}>
<AssistantBar {...props} displayingOptions={displayingOptions} onChatToggle={handleChatToggle} />

<Content />
</StyledContentContainer>
);
};
ПАО Сбербанк использует cookie для персонализации сервисов и удобства пользователей.
Вы можете запретить сохранение cookie в настройках своего браузера.