カテゴリー
SDK - JavaScript
クイックスタート
このドキュメントでは、JavaScript SDK(以下「SDK」)の初期設定について説明します。 SDKは、Webサービスにチャネルボタンを簡単に設置できるようにします。 以下の2つの方法からいずれかを選択して設置してください。 オプション1. 直接ロード 一般的なケース Webサービスが複数のページで構成されており、各ページをリクエストするたびに新しい静的リソースをロードする場合は、以下のガイドを参照してください。 上記のような方式で動作するWebサービスは、一般的にMPAと呼ばれます。 詳細はMPA(Multi-Page Application)をご参照ください。 ステップ1:インストール HTMLファイルの<body>タグ内に以下のスクリプトを挿入します。 <script> (function(){var w=window;if(w.ChannelIO){return w.console.error("ChannelIO script included twice.");}var ch=function(){ch.c(arguments);};ch.q=[];ch.c=funcWebView
Android(JavaScript) AndroidのWebView内でJavaScript SDKを使用するには、いくつかの追加ステップが必要です。 JavaScript SDKはプッシュ通知を提供していません。 プッシュ通知をサポートするには、JavaScript SDKの代わりにAndroid SDKを使用してください。ベストプラクティスに従うために、Android(SDK)セクションをご参照ください。 新しいタブを許可する AndroidのWebViewで新しいタブを許可するには、いくつかの追加設定が必要です。 webChromeClient = object : WebChromeClient() { override fun onCreateWindow( view: WebView?, isDialog: Boolean, isUserGesture: Boolean, resultMsg: Message? ): Boolean { // intercept new window val transport = resultMsg?.obj as? WebView.WContent Security Policy
Content Security Policy(CSP)のリストは、SDKの機能追加に基づいて更新される場合があります。 Content Security Policy(CSP)は、クロスサイトスクリプティング(XSS)、クリックジャッキング、ピクセルパーフェクト・タイミング攻撃などのコードインジェクション攻撃を防ぐために設計された、不可欠なウェブセキュリティ標準です。 以下は、チャネルトークのCSPリストです。プラットフォームでCSPを実装している場合は、これらを必ずホワイトリストに含めてください。 default-src *.channel.io *.channel.app *.cdninstagram.com connect-src *.channel.io *.channel.app *.sentry.io wss://*.channel.io wss://*.desk-ws.channel.io wss://*.front-ws.channel.io script-src 'unsafe-inline' *.channel.io *.sentry-cdn.com style-カスタマイズ
チャネルボタンをカスタマイズ JavaScript SDKが提供するデフォルトのチャネルボタンを使用する代わりに、独自のチャネルボタンをカスタマイズして使用することができます。 1. カスタムボタンの作成例: <!-- Example 1: Using a class selector --> <button class="custom-button-1">chat</button> <!-- Example 2: Using an ID selector --> <button id="custom-button-2">chat</button> 2. カスタムランチャーセレクタの使用: customLauncherSelectorに、作成したHTML要素のCSSセレクタを指定します。 注:カンマ(,)で区切ることで、複数のセレクタを同時に対象に設定することも可能です 詳細については、CSSセレクターのドキュメントを参照してください。 3. デフォルトのチャネルボタンの非表示設定 hideChannelButtonOnBootを true に設定してください。これにより、起動時にデフAPIリファレンス
4件の記事ブラウザーのサポート状況
チャネルトークがサポートするWebブラウザの詳細をご紹介します。 管理画面のブラウザーサポート - Chrome:最新バージョン - Safari:14以降のバージョン - Edge:最新バージョン JavaScript SDKのブラウザサポート - Chrome:最新バージョン - Safari:16以降のバージョン - Edge:最新バージョンよくある質問
このドキュメントでは、JavaScript SDK(以下「SDK」)に関するよくある質問について説明します。 会員と非会員の区別 SDKは、boot時のBoot OptionにmemberIdが指定されているかどうかに基づいて、メンバーユーザーと匿名ユーザーを区別します。 詳細についてはbootをご参照ください。 ユーザー操作なしでプロフィールを設定する ユーザーの操作なしで会員ユーザーのプロフィールを設定する方法については、boot内の会員ユーザー用bootコードをご参照ください。 チャネルボタンの配置 チャネルボタンの配置を設定するには、管理画面の [チャネル設定 ] - [基本設定] - [ボタンの設置・設定] - [チャットボタンの設定] に移動してください。 チャネルボタンの画像を変更する チャネルボタンの画像は、管理画面の [チャネル設定 ] - [基本設定] - [ボタンの設置・設定] - [チャットボタンの設定] - [ボタンのデザイン] から設定できます。 HTML要素によるチャネルボタンのカスタマイズ HTML要素を使用してチャネルボタンをカスタマイズする方法につい