SidetalkGuides
Sidetalk website ↗Open dashboard
Guide homeUser guides

Customer Contact Update developer documentation

5 min readGuide reference date: October 14, 2026.View original in Notion ↗

Purpose

This document explains how to integrate Sidetalk AI chat into a website regardless of platform, language, or framework.

1. Basic installation (client side)

Load the script and call the initialization function in your website’s HTML. Insert it just before </head>, or </body> as appropriate, on every page or the pages where the chat button should appear.

1.1 Load the script

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

1.2 Initialization code

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

2. Member information integration (user info)

Set userInfo to automatically link signed-in user information to the chat window. A signature must be included for security.

2.1 userInfo object structure

The structure assigned to userInfo in the initialization code.
Field nameTypeRequiredDescription
signatureStringOThe server-generated security authentication token (see generation method below)
member_idStringOUnique member ID (such as a database primary key)
user_nameStringXMember name
user_emailStringXMember email
user_phoneStringXMember phone number

3. Generate the signature (server side)

Generate signature on the server, not the client. Keep the Sign Key out of the browser.

3.1 Generation algorithm

  1. Prepare the data:
    • Sign Key: the secret key in Sidetalk administrator settings
    • User Agent: the client’s User-Agent header value
    • Expires In: token expiration time (Unix timestamp; current time + 3600 seconds recommended)
  2. Concatenate strings in this exact order: member_id + user_name + user_email + user_phone + user_agent + sign_key + expires_in
  3. Hashing: hash the concatenated string with HMAC-SHA256 using the Sign Key.
  4. Encoding: create JSON from the result, then Base64-encode it.

3.2 Code examples by language

[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. Complete integration example (HTML)

Inject server-generated data into the HTML template for final rendering.
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. Cautions

  1. User-Agent match: authentication may fail if the User-Agent used to generate the signature differs from the actual browser’s User-Agent.
  2. Sign Key security: never expose the Sign Key in HTML or client-side JavaScript.
  3. Data order: authentication fails if string concatenation uses the wrong order. (id → name → email → phone → ua → key → expire)