Sidetalk사용자 가이드
사이드톡 홈페이지 ↗대시보드 열기
가이드 홈사용자 가이드

고객 연락처 업데이트 개발 문서

5 분 읽기가이드 기준일: 2026. 10. 14.노션 원문 보기 ↗

목적

이 문서는 플랫폼(언어 및 프레임워크)에 관계없이 Sidetalk AI 채팅 서비스를 웹사이트에 연동하는 방법을 설명합니다

1. 기본 설치 (Client-Side)

웹사이트의 HTML 코드 내에 스크립트를 로드하고 초기화 함수를 호출합니다. 모든 페이지 또는 채팅 버튼이 노출될 페이지의 </head> 태그 혹은 상황에 따라서 </body> 태그 직전에 삽입하십시오.

1.1 스크립트 로드

HTML
<script src="https://pages.sidetalk.ai/sidetalk.js"></script>

1.2 초기화 코드

HTML
<script>
SidetalkAI('init', {
    siteKey: 'YOUR_SITE_KEY',  // [필수] 관리자 페이지에서 발급받은 Site Key
    buttonText: '문의하기',      // 버튼 텍스트
    buttonBottom: '20px',      // 하단 여백
    buttonRight: '20px',       // 우측 여백
    // userInfo: { ... }       // 로그인 사용자 정보 (아래 2번 항목 참조)
});
</script>

2. 회원 정보 연동 (User Info)

로그인한 사용자의 정보를 상담창에 자동 연동하기 위해 userInfo 객체를 설정합니다. 보안을 위해 서명(Signature) 값이 반드시 포함되어야 합니다.

2.1 userInfo 객체 구조

초기화 코드의 userInfo 속성에 할당할 데이터 구조입니다.
필드명타입필수설명
signatureStringO서버에서 생성된 보안 인증 토큰 (하단 생성 방법 참조)
member_idStringO회원 고유 ID (DB PK 등)
user_nameStringX회원 이름
user_emailStringX회원 이메일
user_phoneStringX회원 전화번호

3. 서명(Signature) 생성 방법 (Server-Side)

signature는 클라이언트가 아닌 서버에서 생성해야 합니다. Sign Key가 브라우저에 노출되지 않도록 주의하십시오.

3.1 생성 알고리즘

  1. 준비 데이터:
    • Sign Key: Sidetalk 관리자 설정의 비밀키
    • User Agent: 클라이언트의 User-Agent 헤더 값
    • Expires In: 토큰 만료 시간 (Unix Timestamp, 현재시간 + 3600초 권장)
  2. 문자열 결합 (순서 엄수): member_id + user_name + user_email + user_phone + user_agent + sign_key + expires_in
  3. 암호화: 결합된 문자열을 Sign Key를 이용해 HMAC-SHA256 알고리즘으로 해싱
  4. 인코딩: 결과 데이터를 JSON으로 만든 후 Base64로 인코딩

3.2 언어별 코드 예제

[PHP]

PHP
<?php
function getSidetalkSignature($id, $name, $email, $phone, $signKey) {
    $userAgent = $_SERVER['HTTP_USER_AGENT'];
    $expiresIn = time() + 3600; // 1시간 유효

    // 데이터 결합
    $data = $id . $name . $email . $phone . $userAgent . $signKey . $expiresIn;

    // HMAC SHA256
    $token = hash_hmac('sha256', $data, $signKey);

    // JSON -> Base64
    $json = json_encode(['expires_in' => $expiresIn, 'token' => $token]);
    return base64_encode($json);
}
?>

[Node.js]

JavaScript
const crypto = require('crypto');

function getSidetalkSignature(userInfo, userAgent, signKey) {
    const { member_id, user_name, user_email, user_phone } = userInfo;
    const expiresIn = Math.floor(Date.now() / 1000) + 3600;

    const data = `${member_id}${user_name}${user_email}${user_phone}${userAgent}${signKey}${expiresIn}`;

    const token = crypto.createHmac('sha256', signKey)
        .update(data)
        .digest('hex');

    const jsonStr = JSON.stringify({ expires_in: expiresIn, token: token });
    return Buffer.from(jsonStr).toString('base64');
}

[TypeScript]

TypeScript
import * as crypto from 'crypto';

interface SidetalkUser {
    member_id: string;
    user_name: string;
    user_email: string;
    user_phone: string;
}

function getSidetalkSignature(user: SidetalkUser, userAgent: string, signKey: string): string {
    const expiresIn = Math.floor(Date.now() / 1000) + 3600;

    const data = `${user.member_id}${user.user_name}${user.user_email}${user.user_phone}${userAgent}${signKey}${expiresIn}`;

    const token = crypto.createHmac('sha256', signKey)
        .update(data)
        .digest('hex');

    const jsonStr = JSON.stringify({ expires_in: expiresIn, token: token });
    return Buffer.from(jsonStr).toString('base64');
}

[Python]

Python
import hmac
import hashlib
import json
import base64
import time

def get_sidetalk_signature(user_info, user_agent, sign_key):
    expires_in = int(time.time()) + 3600

    data = "{}{}{}{}{}{}{}".format(
        user_info['member_id'],
        user_info['user_name'],
        user_info['user_email'],
        user_info['user_phone'],
        user_agent,
        sign_key,
        expires_in
    )

    token = hmac.new(
        sign_key.encode('utf-8'),
        data.encode('utf-8'),
        hashlib.sha256
    ).hexdigest()

    json_str = json.dumps({'expires_in': expires_in, 'token': token})
    return base64.b64encode(json_str.encode('utf-8')).decode('utf-8')

4. 전체 통합 예시 (HTML)

서버에서 생성한 데이터를 HTML 템플릿에 주입하여 최종적으로 렌더링합니다.
HTML
<!DOCTYPE html>
<html lang="ko">
<body>
    <!-- 웹사이트 콘텐츠 -->

    <!-- Sidetalk Script -->
    <script src="https://pages.sidetalk.ai/sidetalk.js"></script>
    <script>
        // 서버 사이드 변수 주입 (예시)
        // 실제 구현 시에는 사용하는 템플릿 엔진 문법(PHP echo, EJS <%= %> 등)을 사용하세요.
        const isLoggedIn = true;

        const initOptions = {
            siteKey: 'YOUR_SITE_KEY',
            buttonText: '상담하기',
            buttonBottom: '20px',
            buttonRight: '20px'
        };

        if (isLoggedIn) {
            initOptions.userInfo = {
                signature: "SERVER_GENERATED_SIGNATURE_STRING", // 서버에서 생성된 값
                member_id: "user_123",
                user_name: "홍길동",
                user_email: "hong@test.com",
                user_phone: "010-1234-5678"
            };
        }

        SidetalkAI('init', initOptions);
    </script>
</body>
</html>

5. 주의사항

  1. User-Agent 일치: 서명 생성 시 사용한 User-Agent와 실제 브라우저의 User-Agent가 다를 경우 인증에 실패할 수 있습니다.
  2. Sign Key 보안: Sign Key는 절대 HTML 소스나 클라이언트 자바스크립트에 노출되어서는 안 됩니다.
  3. 데이터 순서: 서명 생성 시 문자열 결합 순서가 틀리면 인증되지 않습니다. (id -> name -> email -> phone -> ua -> key -> expire)