시작하기

1. 패키지 설치

   npm

   npm i @capgo/capacitor-crisp

   pnpm

   pnpm add @capgo/capacitor-crisp

   yarn

   yarn add @capgo/capacitor-crisp

   bun

   bun add @capgo/capacitor-crisp

2. 네이티브 프로젝트와 동기화

   npm

   npx cap sync

   pnpm

   pnpm cap sync

   yarn

   yarn cap sync

   bun

   bunx cap sync

3. Crisp 웹사이트 ID 받기

   • crisp.chat에서 가입하세요.
   • 웹사이트/프로젝트 만들기
   • 설정 > 설정 지침에서 웹사이트 ID를 찾으세요.

기본 사용법

플러그인을 가져오고 웹사이트 ID로 구성합니다.

import { CapacitorCrisp } from '@capgo/capacitor-crisp';

// Configure Crisp with your website ID
const configureCrisp = async () => {
  await CapacitorCrisp.configure({
    websiteID: 'YOUR_WEBSITE_ID'
  });
};

// Open the chat
const openChat = async () => {
  await CapacitorCrisp.openMessenger();
};

// Set user information
const setUserInfo = async () => {
  await CapacitorCrisp.setUser({
    email: 'user@example.com',
    nickname: 'John Doe',
    phone: '+1234567890',
    avatar: 'https://example.com/avatar.jpg'
  });
};

// Reset user session (logout)
const logout = async () => {
  await CapacitorCrisp.resetChatSession();
};

API 참조

구성(옵션)

웹사이트 ID와 선택적 설정으로 Crisp를 구성하세요.

interface ConfigureOptions {
  websiteID: string;
  locale?: string; // e.g., 'en', 'fr', 'es'
  tokenID?: string; // For authenticated sessions
}

await CapacitorCrisp.configure({
  websiteID: 'YOUR_WEBSITE_ID',
  locale: 'en'
});

오픈메신저()

Crisp 채팅 인터페이스를 엽니다.

await CapacitorCrisp.openMessenger();

setUser(옵션)

채팅 세션에 대한 사용자 정보를 설정합니다.

interface UserOptions {
  email?: string;
  nickname?: string;
  phone?: string;
  avatar?: string;
}

await CapacitorCrisp.setUser({
  email: 'user@example.com',
  nickname: 'John Doe'
});

setUserCompany(옵션)

비즈니스 사용자를 위한 회사 정보를 설정합니다.

interface CompanyOptions {
  name: string;
  url?: string;
  description?: string;
  employment?: {
    title?: string;
    role?: string;
  };
  geolocation?: {
    city?: string;
    country?: string;
  };
}

await CapacitorCrisp.setUserCompany({
  name: 'Acme Corp',
  url: 'https://acme.com',
  employment: {
    title: 'CEO',
    role: 'Leadership'
  }
});

푸시이벤트(옵션)

사용자 작업을 추적하기 위해 맞춤 이벤트를 보냅니다.

interface EventOptions {
  name: string;
  color?: 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'purple' | 'pink' | 'brown' | 'grey' | 'black';
  data?: { [key: string]: any };
}

await CapacitorCrisp.pushEvent({
  name: 'checkout_completed',
  color: 'green',
  data: {
    price: 99.99,
    currency: 'USD'
  }
});

setSessionSegment(세그먼트)

채팅 세션을 분류하기 위한 세그먼트를 설정합니다.

await CapacitorCrisp.setSessionSegment('premium_customer');

재설정ChatSession()

현재 채팅 세션을 재설정합니다(로그아웃에 유용함).

await CapacitorCrisp.resetChatSession();

고급 기능

사용자 정의 사용자 데이터

// Set multiple custom data fields
await CapacitorCrisp.setSessionData({
  key: 'plan',
  value: 'premium'
});

await CapacitorCrisp.setSessionData({
  key: 'signup_date',
  value: '2024-01-15'
});

메시지 사전 설정

채팅 입력에 미리 채워진 메시지를 설정합니다.

await CapacitorCrisp.setMessageText(
  "Hello, I need help with my order #12345"
);

채팅 가능 여부

채팅 위젯을 사용할 수 있는 시기를 제어합니다.

// Hide chat temporarily
await CapacitorCrisp.setTokenID('user_token_12345');

완전한 예

import { CapacitorCrisp } from '@capgo/capacitor-crisp';

export class ChatService {
  async initialize() {
    // Configure Crisp
    await CapacitorCrisp.configure({
      websiteID: 'YOUR_WEBSITE_ID',
      locale: 'en'
    });
  }

  async loginUser(user: any) {
    // Set user information
    await CapacitorCrisp.setUser({
      email: user.email,
      nickname: user.name,
      phone: user.phone,
      avatar: user.avatarUrl
    });

    // Set custom data
    await CapacitorCrisp.setSessionData({
      key: 'user_id',
      value: user.id
    });

    await CapacitorCrisp.setSessionData({
      key: 'account_type',
      value: user.accountType
    });

    // Set segment
    if (user.isPremium) {
      await CapacitorCrisp.setSessionSegment('premium');
    }

    // Track login event
    await CapacitorCrisp.pushEvent({
      name: 'user_login',
      color: 'blue',
      data: {
        method: 'email'
      }
    });
  }

  async openSupport(context?: string) {
    if (context) {
      await CapacitorCrisp.setMessageText(
        `I need help with: ${context}`
      );
    }

    await CapacitorCrisp.openMessenger();
  }

  async logout() {
    await CapacitorCrisp.resetChatSession();
  }
}

스타일 지정 및 사용자 정의

Crisp는 앱 테마에 자동으로 적응하지만 Crisp 대시보드를 통해 추가로 사용자 정의할 수 있습니다.

1. Crisp 대시보드로 이동
2. 설정 > 웹사이트 설정 > 채팅박스 및 이메일 설정으로 이동하세요.
3. 색상, 위치, 동작을 맞춤설정하세요.

모범 사례

1. 초기화 즉각적인 가용성을 위해 앱 초기화 중에 Crisp를 구성합니다.

   import { App } from '@capacitor/app';
   
   App.addListener('appStateChange', async ({ isActive }) => {
     if (isActive) {
       await CapacitorCrisp.configure({
         websiteID: 'YOUR_WEBSITE_ID'
       });
     }
   });

2. 사용자 컨텍스트 설정 더 나은 지원을 위해 가능한 경우 항상 사용자 정보를 제공하십시오.

   if (user.isAuthenticated) {
     await CapacitorCrisp.setUser({
       email: user.email,
       nickname: user.name
     });
   }

3. 중요한 이벤트 추적 이벤트를 사용하여 지원 상담원에게 컨텍스트를 제공합니다.

   await CapacitorCrisp.pushEvent({
     name: 'error_occurred',
     color: 'red',
     data: {
       error: error.message,
       screen: 'checkout'
     }
   });

4. 로그아웃을 적절하게 처리 사용자가 로그아웃하면 항상 세션을 재설정합니다.

   async logout() {
     await CapacitorCrisp.resetChatSession();
     // Your other logout logic
   }

플랫폼 노트

iOS

• iOS 10.0+ 필요
• 네이티브 Crisp iOS SDK 사용
• 푸시 알림 지원(Crisp 대시보드에서 구성)

Android

• Android 5.0(API 21) 필요+
• 기본 Crisp Android SDK 사용
• 머티리얼 디자인 준수

웹

• Crisp으로 돌아감 JavaScript SDK
• 기본 플랫폼과의 전체 기능 패리티