ChatKit 빠른 시작을 마쳤다면 앱에 삽입한 채팅의 테마를 바꾸고 화면을 맞춤 설정해 보세요. 앱 디자인에 맞게 라이트 테마나 다크 테마를 선택하고 강조 색상, 정보 밀도, 모서리 둥글기를 조정할 수 있습니다.
개요
옵션 객체를 전달하면 테마를 맞춤 설정할 수 있습니다. ChatKit 빠른 시작에 따라 프런트엔드에 ChatKit을 삽입했다면 아래 React 구문을 사용하세요.
- React:
useChatKit({...})에 옵션을 전달하세요. - 고급 통합:
chatkit.setOptions({...})로 옵션을 설정하세요.
두 통합 방식 모두 옵션 객체의 구조는 같습니다.
맞춤 설정 옵션 살펴보기
ChatKit Studio에서 실제로 작동하는 ChatKit 구현 예제와 대화형 빌더를 살펴보세요. 문서를 읽기보다 직접 실험하면서 만드는 편이라면 아래 자료부터 시작하세요.
ChatKit UI 살펴보기
대화형 데모에서 ChatKit을 직접 사용해 보세요.
사용 가능한 위젯을 살펴보세요.
대화형 데모를 직접 조작하면서 사용법을 익혀 보세요.
작동하는 예제 살펴보기
실제로 작동하는 ChatKit 예제에서 구현 아이디어를 얻어 보세요.
레포지토리를 복제하면 모든 기능이 작동하는 템플릿으로 시작할 수 있습니다.
테마 변경하기
색상과 타이포그래피 등을 지정해 채팅 화면을 제품 디자인에 맞추세요. 아래 예제에서는 다크 모드를 적용하고 색상을 변경합니다. 모서리를 둥글게 만들고 정보 밀도를 조정한 다음 글꼴을 설정합니다.
전체 테마 옵션은 API 레퍼런스에서 확인하세요.
const options = {
theme: {
colorScheme: "dark",
color: {
accent: {
primary: "#2D8CFF",
level: 2,
},
},
radius: "round",
density: "compact",
typography: { fontFamily: "'Inter', sans-serif" },
},
};시작 화면의 문구 맞춤 설정하기
메시지 입력창의 플레이스홀더 문구를 바꿔 사용자가 어떤 질문을 할 수 있는지 알려 주거나 첫 메시지 작성을 도와주세요.
const options = {
composer: {
placeholder: "Ask anything about your data…",
},
startScreen: {
greeting: "Welcome to FeedbackBot!",
},
};새 스레드에 시작 프롬프트 표시하기
사용자가 대화를 시작할 때 프롬프트를 제안해 어떤 질문이나 작업을 요청할 수 있는지 알려 주세요.
const options = {
startScreen: {
greeting: "What can I help you build today?",
prompts: [
{
name: "Check on the status of a ticket",
prompt: "Can you help me check on the status of a ticket?",
icon: "search",
},
{
name: "Create Ticket",
prompt: "Can you help me create a new support ticket?",
icon: "write",
},
],
},
};헤더에 사용자 지정 버튼 추가하기
헤더에 사용자 지정 버튼을 배치해 앱에 필요한 탐색 기능이나 컨텍스트를 제공하거나 특정 작업을 실행할 수 있습니다.
const options = {
header: {
customButtonLeft: {
icon: "settings-cog",
onClick: () => openProfileSettings(),
},
customButtonRight: {
icon: "home",
onClick: () => openHomePage(),
},
},
};파일 첨부 활성화하기
파일 첨부는 기본적으로 비활성화되어 있습니다. 활성화하려면 첨부 파일 설정을 추가하세요.
사용자 지정 백엔드를 구현하는 경우가 아니면 반드시 hosted 업로드 전략을 사용해야 합니다.
사용자 지정 백엔드에서 다른 업로드 전략을 사용하는 방법은 Python SDK 문서를 참고하세요.
사용자가 메시지에 첨부할 수 있는 파일의 개수, 크기, 유형도 제한할 수 있습니다.
const options = {
composer: {
attachments: {
uploadStrategy: { type: "hosted" },
maxSize: 20 * 1024 * 1024, // 20 MB per file
maxCount: 3,
accept: { "application/pdf": [".pdf"], "image/*": [".png", ".jpg"] },
},
},
};엔터티 태그로 메시지 입력창에서 @멘션 활성화하기
사용자가 @멘션으로 사용자 지정 ‘엔터티’를 태그할 수 있게 하세요. 이렇게 하면 대화에 더 풍부한 컨텍스트를 제공하고 사용자가 태그한 엔터티와 상호작용할 수 있습니다.
onTagSearch를 사용해 입력한 검색어에 맞는 엔터티 목록을 반환하세요.onClick을 사용해 엔터티의 클릭 이벤트를 처리하세요.
const options = {
entities: {
async onTagSearch(query) {
void query;
return [
{
id: "user_123",
title: "Jane Doe",
group: "People",
interactive: true,
},
{
id: "document_123",
title: "Quarterly Plan",
group: "Documents",
interactive: true,
},
];
},
onClick: (entity) => {
navigateToEntity(entity.id);
},
},
};엔터티 태그의 표시 방식 맞춤 설정하기
사용자가 엔터티 태그에 마우스 포인터를 올렸을 때 표시할 내용을 위젯으로 맞춤 설정할 수 있습니다. 명함, 문서 요약, 이미지 등 다양한 미리보기를 표시해 보세요.
사용 가능한 위젯을 살펴보세요.
const options = {
entities: {
async onTagSearch() {
return [];
},
onRequestPreview: async (entity) => ({
preview: {
type: "Card",
children: [
{ type: "Text", value: `Profile: ${entity.title}` },
{ type: "Text", value: "Role: Developer" },
],
},
}),
},
};메시지 입력창에 사용자 지정 도구 추가하기
사용자가 메시지 입력창에서 앱 고유의 작업을 바로 실행할 수 있게 하면 생산성을 높일 수 있습니다. 사용자가 선택한 도구는 선호 도구로 모델에 전달됩니다.
const options = {
composer: {
tools: [
{
id: "add-note",
label: "Add Note",
icon: "write",
pinned: true,
},
],
},
};UI 영역과 기능 켜기 또는 끄기
헤더에서 제공하는 옵션만으로는 원하는 대로 구성하기 어려워 직접 구현하려는 경우, 해당하는 주요 UI 영역과 기능을 비활성화하세요. 예를 들어 고객 지원 챗봇처럼 스레드와 대화 기록이라는 개념이 용도에 맞지 않는 경우에는 대화 기록을 끄는 것이 유용할 수 있습니다.
const options = {
history: { enabled: false },
header: { enabled: false },
};로캘 재정의하기
앱 전체에 적용되는 언어 설정이 있다면 기본 로캘을 재정의하세요. 기본값은 브라우저의 로캘입니다.
const options = {
locale: "de-DE",
};