thumbnail

チャットボタンの設定

大切なサイトにチャネルトークのボタンが自然に溶け込むように位置を修正したり、カスタムボタンでブランドの個性を表現できます。

マルチプラグインを設定して、セキュリティを強化できます。または、マルチプラグインを通して各ページごとに異なるボタンを表示させることも可能です。ボタンリストで表示させたいチャットボタンを選択し、各ボタン別に設定を行なってください。

  • [基本ボタン] で設定したプラグインが、チャット画面のURLやサポートbotで使用される基本のプラグインになります。

  • 同じ顧客データで管理している複数のサイトがある場合は、マルチプラグインを活用してください。

  • プラグイン別にプラグインキーを活用して、それぞれの違うサイトや違うページに設置してください。

チャットボタンのプラグインキーまたはインストールスクリプトを確認できます。詳しい設置方法はこちらからご確認ください。

  • チャネルトークの基本のチャットボタンを19種類の多様なアイコンに変更できます。お好みのボタンデザインを選んでカラーも自由に設定できます。

  • ボタンの背景色はチャネルのテーマの色に準じます。背景色が暗いほどアイコンは白っぽくなり、背景色が明るいと暗めになります。

ブランドの雰囲気を伝える画像にボタンを変更したい場合は、画像をアップロードしてカスタマイズすることができます。設定方法と活用例をご覧ください。

  • アップロード可能な拡張子:png / jpg / gif

  • 画像の推奨サイズは最小180x180px、1:1の比率でアップロードできます。

  • デスクトップボタンは56px、モバイルウェブボタンは44pxのサイズで自動で調整されます。

  • デスクトップボタンとモバイルウェブボタンは同じ画像が適用されます。

  • 背景のないpngファイルの場合、バックグラウンドに背景色が適用されます。

  • モバイルネイティブSDKの場合、別途コーディングによるカスタマイズが必要です。

既存の1:1の比率ではない画像をカスタムボタンとして利用中の場合、そのまま維持することができます。ただし、新しい画像をアップロードする際には1:1比率のサイズでのみ登録ができます。変更後は以前の画像に戻すことができません。

活用イメージ

チャネルトークの基本のチャットボタンを使わずにボタンをカスタマイズしたいが、どのように設定すればいいか分からない場合は、こちらの活用イメージをご参考ください。

  • 顧客がサイトに初めて訪問した際に、チャット問い合わせができることを知らせる横長のボタンのことです。拡大型ボタンは4〜30文字で設定可能です。

  • 拡大型ボタンにはチャネルのプロフィールまたはマネージャーのプロフィール画像(最大2人)が表示されます。(モバイルウェブの場合はマネージャーのプロフィールが表示されません。)

  • 顧客がサイトを訪問してチャネルトークのチャットボタンを押した後に表示される、ラウンジ(チャットリスト)画面のテーマを設定できます。

  • [ライト]、[ダーク]、[システム] モードで適用でき、システムモードに設定しておくと、お客様のシステム(ブラウザ)設定に従います。

  • 自社で開発したサイトの場合、APIを活用してデスクの設定より優先的に適用されるテーマを指定できます。

PCでサイトを訪れた際に表示されるチャットボタンを設置できます。

  • 方法:[チャネル設定] - [基本設定ボタンの設置・設定] - [チャットボタンの設定] - [デスクトップ]

オプション

説明

位置

サイトの左側 / 右側にボタンが位置するように設定できます。

位置の調節

上下 / 縦横に、一定の範囲内で位置調整が可能です。

モバイルウェブでサイトを訪問した際に表示されるチャットボタンを設定できます。

  • 方法:[チャネル設定] - [基本設定ボタンの設置・設定] - [チャットボタンの設定] - [モバイルウェブ]

オプション

説明

モバイル設定

モバイルウェブでチャットボタンを隠すことができます。

位置

サイトの左側 / 右側にボタンが位置するように設定できます。

位置調節

上下 / 縦横に、一定の範囲内で位置調整が可能です。

拡大型ボタンの位置

拡大型ボタン、プッシュ通知やマーケティングメッセージの位置を設定できます。

特定のページにのみチャットボタンを表示させたい場合は、 ホワイトリストを設定してください。ホワイトリストに、チャットボタンを表示させたいドメインを入力すれば、該当のドメインでのみボタンが表示されます。

  • ドメインの入力時、httpまたはhttpsを除いた残りのアドレスを入力してください。

入力した文字列が含まれた全てのドメインに適用されます。適用させたいページが多い場合は、共通して含まれている文字列のみ入力すれば、1度に複数のページに適用させることができます。

拡大型ボタンが表示されたままになりません。

拡大型ボタンは顧客が初めてサイトに訪問した際に、チャットがあることを認知させるものです。

そのため以下のように動作します。

  • 顧客が初めてサイトに訪問すると拡大型ボタンが表示されます。

  • 拡大型ボタンが表示された10秒後に顧客がスクロールしたり、サイトの更新やページの移動をすると基本のチャットボタンが表示されます。

  • 拡大型ボタンを閉じたり、拡大型ボタンをクリックする場合も基本のチャットボタンが表示されるようになります。

  • 顧客がブラウザーを閉じてから再度ブラウザーを開くと拡大型ボタンが表示されます。(この時ブラウザーにクッキーが残っている場合は、再度ブラウザーを開いた時に拡大型ボタンは表示されません。他のブラウザーや他のデバイスから再度サイトに訪問する際に拡大型ボタンが表示されます。)

チャネルトークは企業と顧客のコミュニケーションの課題を解決するためのツールです。そのため顧客の体験を高めるためにサイトに溶け込むようなUIを目指して、デザインをしています。

サイトの邪魔をせず、顧客のサイトの利用体験を損なわないために、拡大型ボタンは顧客がクリックやスクロールしたり、ページの移動をした際に基本のチャットボタンが表示されるようになっています。

拡大型ボタンを設定しましたが表示されません。

拡大型ボタンは基本のチャットボタンを利用している場合やボタンのデザインをアイコンまたはカスタムして設定した場合に利用できます。ただし、営業時間が不在中であったり、運営中の状態でも応答までの時間が遅い場合は拡大型ボタンが表示されません。

次のような場合も拡大型ボボタンは表示されません。

  • モバイルネイティブSDKの場合

  • CSSにてボタンのカスタマイズをしている場合

  • アップデート前のバージョンでボタンをカスタマイズして利用している場合

拡大型ボタンにマネージャーのプロフィール画像が表示されません。

対応できるマネージャーの候補が1人であったり、マネージャーが「チャネルのプロフィールで対応」を使用している場合は拡大型ボタンにマネージャーのプロフィール画像が表示されません。つまりマネージャーのプロフィールを表示できない時は、拡大型ボタンにテキストの案内文のみが表示されます。またモバイルウェブの場合はマネージャーのプロフィールが表示されません。

[マネージャーのプロフィールの表示例]

  • 「チャネルプロフィールで対応」がOFFで、

  • 「担当者なしのチャット通知」がONで、

  • オペレーダリーダーボードの点数が高い順

PC上でチャットボタンが表示されません。

  1. [チャネル設置] - [チャット運営] - [営業時間] - [営業時間外の運営設定] - [チャットボタンを非表示] に設定されていると、営業時間外にチャットボタンが表示されなくなります。

  2. [チャネル設置] - [基本設定] - [ボタンの設置・設定] - [オプション設定] のホワイトリストが設定されているかご確認ください。ホワイトリストに追加したURLでのみ、チャットボタンが表示されます。

モバイル上でチャットボタンが表示されません。

[基本設定] - [ボタンの設置・設定] - [モバイルウェブ] - [モバイル設定] - [モバイルでボタンを隠す] がチェックされていないか確認してください。

サイトにログインした時に、チャネルトークのボタンが見えません。

[チャネル設定] - [開発者向け] - [セキュリティ設定] - [メンバーハッシュ機能] が設定されているか、ご確認ください。この設定は、Cafe24・WordPress・MakeShop以外のビルダー社では設定できません。