capacitor-crisp

➡️ Get Instant updates for your App with Capgo 🚀

Fix your annoying bug now, Hire a Capacitor expert 💪

Crisp native SDK for capacitor

Install

npm install @capgo/capacitor-crisp
npx cap sync

Init

Call configure in your code Before any other method :

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

CapacitorCrisp.configure({websiteID: '******-****-****-****-********'})

iOS

To enable your users to take and upload photos to the chat as well as download photos to their photo library, add :

Privacy - Camera Usage Description (NSCameraUsageDescription)

Privacy - Photo Library Additions Usage Description (NSPhotoLibraryAddUsageDescription)

to your app's Info.plist.

Android Integration

Nothing special to do.

Open chatbox

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

CapacitorCrisp.openMessenger()

configure(...)

configure(data: { websiteID: string; }) => Promise<void>

Param	Type
`data`	`{ websiteID: string; }`

openMessenger()

openMessenger() => Promise<void>

setTokenID(...)

setTokenID(data: { tokenID: string; }) => Promise<void>

Param	Type
`data`	`{ tokenID: string; }`

setUser(...)

setUser(data: { nickname?: string; phone?: string; email?: string; avatar?: string; }) => Promise<void>

Param	Type
`data`	`{ nickname?: string; phone?: string; email?: string; avatar?: string; }`

pushEvent(...)

pushEvent(data: { name: string; color: eventColor; }) => Promise<void>

Param	Type
`data`	`{ name: string; color: eventColor; }`

setCompany(...)

setCompany(data: { name: string; url?: string; description?: string; employment?: [title: string, role: string]; geolocation?: [country: string, city: string]; }) => Promise<void>

Param	Type
`data`	`{ name: string; url?: string; description?: string; employment?: [title: string, role: string]; geolocation?: [country: string, city: string]; }`

setInt(...)

setInt(data: { key: string; value: number; }) => Promise<void>

Param	Type
`data`	`{ key: string; value: number; }`

setString(...)

setString(data: { key: string; value: string; }) => Promise<void>

Param	Type
`data`	`{ key: string; value: string; }`

sendMessage(...)

sendMessage(data: { value: string; }) => Promise<void>

Param	Type
`data`	`{ value: string; }`

setSegment(...)

setSegment(data: { segment: string; }) => Promise<void>

Param	Type
`data`	`{ segment: string; }`

reset()

reset() => Promise<void>

Type Aliases

eventColor

@capgo/capacitor-crispパッケージ

@capgo/capacitor-crispパッケージを使用すると、ネイティブSDKであるCrispをCapacitorアプリに統合できます。このパッケージは、Crispの設定、チャットボックスのオープン、ユーザー詳細の設定、イベントの送信などのメソッドを提供します。

@capgo/capacitor-crispパッケージを使い始めるには、次の手順に従ってください。

インストール

ターミナルを開き、Capacitorアプリのルートディレクトリに移動します。
次のコマンドを実行してパッケージをインストールします。

npm install @capgo/capacitor-crisp
npx cap sync

Crispの初期化

@capgo/capacitor-crispパッケージが提供するメソッドを使用する前に、あなたのウェブサイトIDでCrispを設定する必要があります。プロジェクトに次のコードを追加してください：

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

CapacitorCrisp.configure({ websiteID: '******-****-****-****-********' });

'******-****-****-****-********'を実際のCrispウェブサイトIDに置き換えます。

iOS統合

iOSをターゲットにする場合は、アプリのInfoplistファイルに次の権限を追加する必要があります：

プライバシー - カメラ使用説明 (NSCameraUsageDescription)
プライバシー - 写真ライブラリの追加使用説明 (NSPhotoLibraryAddUsageDescription)

各権限について、アプリがなぜそれを必要とするのか説明する説明を提供してください。

Android統合

Android統合に関しては、追加の手順は必要ありません。

チャットボックスを開く

アプリでCrispチャットボックスを開くには、@capgo/capacitor-crispパッケージが提供するopenMessengerメソッドを使用します。プロジェクトに次のコードを追加してください：

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

CapacitorCrisp.openMessenger();

これにより、ユーザーはサポートチームと会話を開始できるCrispチャットボックスが開きます。

追加機能

@capgo/capacitor-crispパッケージは、Crispのカスタマイズやインタラクションのためのいくつかの他のメソッドを提供します。以下は利用可能なメソッドの一部です：

setTokenID: ユーザーのトークンIDを設定します。
setUser: ニックネーム、電話番号、メール、アバターなどのユーザー詳細を設定します。
pushEvent: Crispにカスタムイベントを送信します。
setCompany: 名前、URL、説明、雇用、地理的位置などの会社の詳細を設定します。
setInt: カスタム整数値を設定します。
setString: カスタム文字列値を設定します。
sendMessage: Crispにチャットメッセージを送信します。
setSegment: ユーザーのセグメントを設定します。
reset: Crispの設定をリセットします。

これらのメソッドとそのパラメーターについての詳細は、@capgo/capacitor-crispパッケージの公式ドキュメントを参照してください。

これで完了です！@capgo/capacitor-crispパッケージを使用してCrispをCapacitorアプリに統合する方法を学びました。Crispチャットボックスを通じてユーザーとのシームレスなコミュニケーションを楽しんでください。