ym88659208ym87991671
Кастомизация Canvas App | Документация SmartMarket
Skip to main content

Кастомизация Canvas App

Дефолтный контейнер для смартапов типа Canvas App формируется во всплывающем окне. В примерах ниже показано, как можно задать собственный контейнер для Canvas App.

import React, { FC } from 'react';
import { createAssistantClient } from '@sberdevices/assistant-client';
import { FloatingAssistantChat } from '@sberdevices/assistant-web-sdk';

const CustomCanvasContainer: FC<{ canvasReady: boolean; onClose: () => void }> = ({
canvasReady,
onClose,
children,
}) => (
<div>
{!canvasReady && <div>Loading...</div>}

<div className={canvasReady ? 'show' : 'hide'}>
<button onClick={onClose}>Закрыть</button>
{children}
</div>
</div>
);

const Chat: FC<{ client: ReturnType<typeof createAssistantClient> }> = ({ client }) => (
<FloatingAssistantChat assistant={client} onCanvasRender={CustomCanvasContainer} mobile={false} />
);

Также Canvas App можно встроить на страницу, используя ReactDOM.createPortal:

import React, { FC } from 'react';
import ReactDOM from 'react-dom';
import { createAssistantClient } from '@sberdevices/assistant-client';
import { FloatingAssistantChat } from '@sberdevices/assistant-web-sdk';

const CANVAS_CONTAINER_ID = 'canvas-container-root';

const CustomCanvasContainer: FC<{ canvasReady: boolean; onClose: () => void }> = ({
canvasReady,
onClose,
children,
}) => (
<div>
{!canvasReady && (
<div>Loading...</div>
)}

<div className={canvasReady ? 'show' : 'hide'}>
<button onClick={onClose}>Закрыть</button>
{children}
</div>
</div>
);

const CanvasPortal: FC<{ canvasReady: boolean; onClose: () => void }> = ({ ...props }) => {
const canvasContainerRef = useRef<HTMLElement>();

useEffect(() => {
canvasContainerRef.current = document.getElementById(CANVAS_CONTAINER_ID);
}, []);

if (!canvasContainerRef.current) {
return null;
}

return ReactDOM.createPortal(<CustomCanvasContainer {...props} />, canvasContainerRef.current);
}

const Chat: FC<{ client: ReturnType<typeof createAssistantClient> }> = ({ client }) => (
<FloatingAssistantChat assistant={client} onCanvasRender={CanvasPortal} mobile={false} />
);

const client = createAssistantClient(...);

const App = () => (
<>
<Chat client={client} />
<div id={CANVAS_CONTAINER_ID} />
</>
);
Обновлено 20 апреля 2022

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

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