시나리오 개요
고객 지원, 판매 및 기타 고객 커뮤니케이션에서 가장 널리 사용되는 SaaS 제품 중 하나인 Zendesk. 한편, 가트너에 따르면, Tencent Chat은 중국 시장에서 챔피언이 되었으며, 전 세계 커뮤니케이션 플랫폼 서비스(CPaaS)에서 가장 유능한 공급업체 중 하나입니다. 따라서 우리는 Chat과 Zendesk 통합 솔루션을 제공할 수 있게 되었습니다.
이 에세이에서는 Zendesk의 지원 팀 범위를 확장하고 지원 팀이 모든 플랫폼에서 클라이언트와 채팅할 수 있도록 하는 클라이언트-에이전트 실시간 통신 시스템 구축 방법에 대해 논의할 것입니다. 우리는 Zendesk 티켓 바용 Chat App을 완성하였으며, 필요한 것은 설치하고 아래 지침에 따라 클라이언트를 게시하는 것입니다.
관심 목록에 통합 솔루션이 없다면, 서두르지 마세요. 이 에세이를 읽고 TUIKit를 사용하여 자신의 개인 앱을 만들 수 있습니다. 이는 귀찮은 일이 아니라 원하는 앱의 복잡성에 따라 몇 시간 또는 며칠이면 됩니다.
적용된 제품
기본 통합 가이드라인
전제 조건
Zendesk에 등록하지 않았다면 무료 체험를 시도해 보세요.
Chat 서비스를 사용하려면 Tencent RTC에 등록해야 하며, 여기에는 Chat 외에도 많은 클라우드 기반 서비스가 포함되어 있습니다. 그런 다음 콘솔에서 응용 프로그램 만들기를 클릭하여 SDKAppID를 가져오세요. 이것이 Chat 서비스를 시작하는 데 필요한 것입니다.
클라이언트 측 구축을 위해 웹 서버도 필요하며, 이 기사에서는 다루지 않습니다.
통합 맵
이 통합 솔루션의 목표는 명확합니다: 에이전트의 할당을 듣고 클라이언트와의 대화에 에이전트를 초대하여 티켓에 대한 문제나 상담을 논의하는 것입니다.
여기 일반 통합 맵이 있습니다:
일반적인 워크플로우는 다음과 같습니다:
1. 최종 사용자가 Chat에 로그인합니다.
1. 최종 사용자가 백엔드 서버에 티켓을 제출합니다.
2. 제출된 정보에 따라 Zendesk에 대한 티켓을 생성합니다.
3. Chat에서 그룹을 생성하고 에이전트가 그룹에 참여하기를 기다립니다.
4. 에이전트가 티켓을 수락하거나 에이전트에게 할당됩니다.
5. 할당된 에이전트가 Chat 그룹에 참여합니다.
6. 이제 클라이언트와 에이전트가 자유롭게 채팅할 수 있습니다.
클라이언트 측 워크플로우는 다음과 같습니다:
로그인 전에 클라이언트는 마지막에 생성한 티켓을 재사용할 수 있습니다. 그 경우 Chat 서버에 로그인하십시오.
그렇지 않으면 Zendesk에 새 티켓을 제출하십시오.
서버에 로그인하고 반환된 ticket.id를 사용하여 그룹을 생성합니다.
Zendesk에 대한 Chat 프로세스는 다음과 같습니다:
티켓 업데이트 프로세스:
시나리오별 구현
클라이언트 측 구축
채팅 기능을 완료하기 위해 프론트엔드 프로젝트와 Zendesk 요청을 호출하는 백엔드 프로젝트를 개발해야 합니다. 해야 할 작업에 대해 걱정하지 마세요. 프론트엔드는 TUIKit를 사용하여 블록 쌓듯이 쉽게 진행할 수 있습니다. TUIKit는 Chat SDK를 기반으로 하는 TUI 구성 요소 세트로, 대화, 채팅, 검색, 관계 체인, 그룹, 오디오/비디오 통화 등 독립적인 구성 요소를 제공합니다. TUIKit는 현재 iOS, Android, 웹 및 Flutter를 포함한 플랫폼을 지원하며, React Native에서도 작업 중입니다. 최신 상태를 알림 받으려면 채널을 주목하세요. TUIKit를 적용하면 createTicket API를 호출하는 전략만 정의하면 됩니다.
백엔드 프로젝트를 구축하는 데 필요한 모든 코드는 다음과 같습니다:
const express = require('express');
const axios = require('axios').default;
var TLSSigAPIv2 = require('tls-sig-api-v2'); // TIM을 위한 UserSig 생성
require('dotenv').config();
const app = express();
app.use(express.json());
const port = process.env.PORT || 15000;
const YOUR_SDKAPPID = process.env.YOUR_SDKAPPID || 0;
const YOUR_SECRET = process.env.YOUR_SECRET || '';
const ADMIN_USERID = process.env.ADMIN_USERID || '';
const zendeskAxioInstance = axios.create({
baseURL: `https://${process.env.SUB_DOMAIN}.zendesk.com/api/v2/`,
auth: {
username: process.env.EMAIL || '',
password: process.env.TOKEN || ''
},
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
timeout: 35000
});
app.use(express.json());
app.use(function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', '*');
next();
});
app.post('/createticket', async (req, res) => {
const { userId, caseInfo } = req.body;
if (!userId) return res.status(500).send('userId가 없습니다.');
const zendeskCase = await createTicket(caseInfo);
if (!zendeskCase.success) return res.status(500).send('사례 생성 실패');
const groupId = zendeskCase.id;
const result = await createGroup(
groupId,
userId,
caseInfo.subject || groupId
);
if (result.ErrorCode !== 0)
return res.status(500).send('그룹 생성 실패');
sendGreeting(result.GroupId);
res.status(200).send(result);
});
const createTicket = async function (caseInfo) {
const { subject, desc, name, email } = caseInfo;
const data = {
request: {
requester: {
name: name || '익명의 고객',
email: email
},
subject: subject,
comment: {
body: desc
}
}
};
try {
const result = await zendeskAxioInstance({
method: 'POST',
url: '/requests.json',
data: data
});
return {
id: result.data.request.id,
success: true
};
} catch (e) {
return { id: undefined, success: false, error: e };
}
};
const generateUserSig = function () {
const expires = 600;
const api = new TLSSigAPIv2.Api(YOUR_SDKAPPID, YOUR_SECRET);
return api.genSig(ADMIN_USERID, expires);
};
const generateRandom = function () {
return Math.floor(Math.random() * 4294967295);
};
const createGroup = async function (groupId, userId, groupName) {
const sig = generateUserSig();
const random = generateRandom();
const data = {
Type: 'Public',
Name: groupName,
GroupId: `ZENDESK#${groupId}`,
ApplyJoinOption: 'FreeAccess',
MemberList: [{ Member_Account: userId }]
};
const url = `https://console.tim.qq.com/v4/group_open_http_svc/create_group?sdkappid=${YOUR_SDKAPPID}&identifier=${ADMIN_USERID}&usersig=${sig}&random=${random}&contenttype=json`;
try {
const groupRes = await axios.post(url, data);
return groupRes.data;
} catch (e) {
return { ErrorCode: -1, ErrorInfo: e };
}
};
const sendGreeting = async function (groupId) {
const sig = generateUserSig();
const random = generateRandom();
const data = {
GroupId: groupId,
Content: "담당자를 귀하의 주제에 배정하고 있으니 잠시 기다려 주세요..."
};
const url = `https://console.tim.qq.com/v4/group_open_http_svc/send_group_system_notification?sdkappid=${YOUR_SDKAPPID}&identifier=${ADMIN_USERID}&usersig=${sig}&random=${random}&contenttype=json`;
try {
const groupRes = await axios.post(url, data);
return groupRes.data;
} catch (e) {
return { ErrorCode: -1, ErrorInfo: e };
}
};
app.listen(process.env.PORT || port, () =>
console.log(`예제 앱이 포트 ${port}에서 실행 중입니다!`)
);
코드를 분해해 보겠습니다.
const port = process.env.PORT || 15000;
const YOUR_SDKAPPID = process.env.YOUR_SDKAPPID || 0;
const YOUR_SECRET = process.env.YOUR_SECRET || '';
const ADMIN_USERID = process.env.ADMIN_USERID || '';첫 번째 부분에서는 환경 변수를 통해 Chat 식별 정보를 설정해야 합니다. 모든 정보는 여기에서 확인할 수 있습니다. 주의: 비밀 키를 코드에 기록하지 마십시오. 인터넷에 유출될 수 있습니다.
const zendeskAxioInstance = axios.create({
baseURL: `https://${process.env.SUB_DOMAIN}.zendesk.com/api/v2/`,
auth: {
username: process.env.EMAIL || '',
password: process.env.TOKEN || ''
},
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
timeout: 35000
});둘째, Zendesk 요청을 구성합니다.
// Zendesk 티켓 생성
const createTicket = async function (caseInfo) {
const { subject, desc, name, email } = caseInfo;
const data = {
request: {
requester: {
name: name || '익명의 고객',
email: email
},
subject: subject,
comment: {
body: desc
}
}
};
try {
const result = await zendeskAxioInstance({
method: 'POST',
url: '/requests.json',
data: data
});
return {
id: result.data.request.id,
success: true
};
} catch (e) {
return { id: undefined, success: false, error: e };
}
};
// Chat 그룹 생성
const createGroup = async function (groupId, userId, groupName) {
const sig = generateUserSig();
const random = generateRandom();
const data = {
Type: 'Public',
Name: groupName,
GroupId: `ZENDESK#${groupId}`,
ApplyJoinOption: 'FreeAccess',
MemberList: [{ Member_Account: userId }]
};
const url = `https://console.tim.qq.com/v4/group_open_http_svc/create_group?sdkappid=${YOUR_SDKAPPID}&identifier=${ADMIN_USERID}&usersig=${sig}&random=${random}&contenttype=json`;
try {
const groupRes = await axios.post(url, data);
return groupRes.data;
} catch (e) {
return { ErrorCode: -1, ErrorInfo: e };
}
};마지막으로 입력 매개변수를 사용하여 Zendesk 티켓을 생성하고, 반환된 zendeskCase.id를 사용하여 그룹 ID로 Chat 그룹을 생성합니다. 그룹 ID 접두사로는 ZENDESK#를 사용합니다.
서버 코드를 테스트하고 온라인으로 게시하여 클라이언트 측을 준비하세요.
TIM for Zendesk 설치
Zendesk 마켓플레이스에서 Chat for Zendesk를 검색하여 설치하세요. Zendesk 마켓플레이스.
다음으로, 응용 프로그램 설치를 완료하기 위해 SDKAppId를 입력하세요.
앱은 티켓 바 영역에 표시됩니다.
에이전트의 ID를 Chat의 사용자 ID로 사용하며, 이 사용자 ID에 대한 UserSig를 획득해야 합니다. UserSig를 검색하는 방법을 참조하세요. 로그인하면 Chat의 사용자 이름이 자동으로 에이전트의 이름으로 업데이트되며, 프로필 페이지에서 다른 프로필 정보로 업데이트할 수 있습니다. 로그인하면 UserSig가 만료되거나 로그아웃이 발생할 때까지 로그인 상태가 유지됩니다.
그리고 에이전트가 티켓에 할당되면, 그는/그녀는 Chat 그룹에 초대되어 클라이언트와 다양한 유형의 메시지로 채팅하게 됩니다.
또한 앱을 개인적으로 설치할 수 있으며, 최신 TIM 패키지나 소스 코드를 얻으려면 tencentcloud_im@tencent.com에 문의하세요. 개인 앱 업로드를 위한 지침를 따르세요.
제공된 앱이 기대에 미치지 못한다면, 자신의 개인 앱을 개발할 수도 있습니다. UI 구성을 강화하기 위해 TUIKit를 적용하고, 지침에 따라 자신의 앱을 만드세요. 더 많은 Zendesk API 참조는 여기에 나열되어 있습니다.
이것이 Chat과 Zendesk를 통합하는 데 필요한 모든 것입니다. 이제 여러분은 통합 과정과 Zendesk의 워크플로우를 이해하고 자신만의 클라이언트-에이전트 실시간 통신 앱을 구축했을 것입니다. 통합에 대해 불확실한 점이 있거나 추가적인 생각이 있다면, 언제든지 문의해 주세요!
지금 주문하기
여기를 클릭하여 빠르게 구매 페이지로 이동하여 주문하세요.