SalesIQチャットウィンドウを新しいパーソナライズウィジェット（ベータ）でカスタマイズする方法

SalesIQチャットウィンドウを新しいパーソナライズウィジェット（ベータ）でカスタマイズする方法

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

メモ:
  1. この機能は現在ベータ版です。必要に応じて、ウィジェットをさらに改善するために JS API コードやフォーマットが変更される場合があります。
  2. また、ウィジェットの JS API は新しい SalesIQ ライブチャットでのみ動作します。旧バージョンをご利用の場合は、この機能を使用するには新しいライブチャットウィジェットに移行する必要があります。移行するには、更新されたライブチャットウィジェットを入手するために [support@zohosalesiq.com] までお問い合わせください。
このガイドでは、JS API を使用して Zoho SalesIQ のチャットウィンドウにパーソナライズされたウィジェットを追加するための設定手順を説明します。

パーソナライズされたウィジェットはビジネスにどのように役立ちますか?

  1. ユーザーエンゲージメントの向上: パーソナライズされたウィジェットは、Web サイト上の訪問者／ユーザーのエンゲージメントを大幅に高めることができます。訪問者は情報を受動的に閲覧するのではなく、動的なウィジェットと対話できるため、より直感的で魅力的な体験を提供できます。
  2. 全ページでの一貫した表示: ウィジェットは Web サイトのすべてのページに表示されるため、一貫した露出を確保できます。これにより、訪問者がサイト内のどこにいても、重要なメッセージやオファーを効果的に伝えることができます。
  3. インタラクティブな情報提供: 視覚的に魅力的でインタラクティブな形式で提示されたコンテンツの方が、訪問者の関心を引きやすくなります。インタラクティブなウィジェットを使用することで、従来の Web サイトのテキストよりも効果的に重要な情報を伝えることができます。
  4. オファーへの簡単なアクセス: 訪問者は、ウィジェットをクリックするだけで、商品、サービス、お知らせに簡単にアクセスできます。このシームレスなアクセスにより、回遊性が高まり、コンバージョンの向上につながります。
  5. 柔軟なお知らせ設定: SalesIQ では、チャットウィンドウ用に 4 種類のカスタムウィジェット（お知らせ、ニュース、コマンドパネル、IM チャンネル）をサポートしており、情報の共有方法を自由にパーソナライズおよびカスタマイズできます。コンテンツを調整して、自社のビジネスニーズや訪問者の関心に合わせて配信できます。

パーソナライズされたウィジェットの種類

SalesIQ では、ニュースや更新情報の配信（CTA 付き）、商品やサービスなどの一覧表示に使用できる 4 種類のウィジェットをサポートしています。
  1. お知らせウィジェット
  2. ニュースウィジェット
  3. コマンドパネルウィジェット
  4. IM チャンネルウィジェット
ウィジェット

説明

機能


出力イメージ


お知らせ


このウィジェットは、今後のイベント、特別オファー、キャンペーンなどを強調表示するために使用できます。ユーザーのエンゲージメントを高めるための明確なコールトゥアクション（CTA）ボタンを含めることができます。

  1. 任意のメディア（動画または画像）付きバナー
  2. 件名
  3. 本文テキスト
  4. 任意の記事または URL にリンクするコールトゥアクション
 



ニュース


このウィジェットは、コールトゥアクション（CTA）ボタンなしで、最新情報やニュースを共有するために使用できます。

  1. 任意のメディア（動画または画像）付きバナー
  2. 件名
  3. 本文テキスト



コマンドパネル


このウィジェットには、チャット／通話の開始、URL のオープン、カスタムアクションの呼び出しなど、複数のアクションを設定できます。これらはすべてラベルとして表示されます。このウィジェットを使用すると、さまざまなサービスやオファーを提示でき、ユーザーはウィジェットから直接、予約の実施、記事へのアクセスなど、複数のアクションを実行できます。


  1. 件名
  2. アクション
    1. チャットを開始
    2. 通話を開始
    3. URL を開く
    4. 記事を開く
    5. カスタムクライアントアクションをトリガー

IM チャンネル
このウィジェットは、IM／ソーシャルチャンネルを 2 通りの方法で表示するのに役立ちます。

  1. チャンネルの一覧
（または）




SalesIQ のチャットウィンドウにパーソナライズされたウィジェットを追加する

以下の手順に従って、任意のウィジェットを SalesIQ のチャットウィンドウに追加します。
  1. SalesIQ のインストールコードを Web サイトのソースコードに追加します。
    1. まず、SalesIQ のインストールコードを Web サイトに追加する必要があります。
    2. そのために、SalesIQ ダッシュボードで、［設定］ > ［ブランド］ > ［インストール］ > ［Web サイト］に移動し、SalesIQ のインストールコードをコピーします。
    3. 次に、Web サイトの HTML ソースコードの閉じタグ </body> の直前にインストールコードを貼り付けます。
  2. カスタムウィジェットコードを SalesIQ のインストールコードに追加します。
    1. SalesIQ コードを Web サイトのソースコードに追加したら、次の手順として、任意のカスタマイズを行うためのカスタムウィジェットコードを SalesIQ のインストールコードに追加します。
    2. 以下は、SalesIQ のチャットウィンドウにパーソナライズされたウィジェットを追加するための構文です。
構文:
  1. // SalesIQ インストールコード
  2. $Zoho。salesiq。ready(function() {
  3. $Zoho。salesiq。set('ホーム。widgets', [
  4. // 表示するウィジェットの一覧
  5. ]);
  6. })
    1. 対象のウィジェットタイプのカスタムウィジェットコードは、インストールコード内の ホーム。widgets ready function の中に追加する必要があります。
    2. 複数のウィジェットを、1 つずつ順番に並べて設定することもできます。

メディア／アクションオブジェクト

ウィジェットでは、次のメディアとアクションをサポートしています。

メディアオブジェクト

画像と動画のオブジェクトは、お知らせウィジェットとニュースウィジェットでサポートされています。
  1. 1. 画像
  2. {
  3. '種類' : '画像',
  4. 'url' : 'https://www.zohowebstatic.com/sites/zweb/images/salesiq/bot/images_bot.png',
  5. 'image_position' : 'fit|fill'
  6. }
  7. 2. 動画
  8. {
  9. '種類':'video',
  10. 'thumbnail':'https://zoho.com/images/bot.png',
  11. 'url': 'https://zoho.com/videos/bots.mp4',
  12. 'autoplay' : 真,
  13. 'subtitles': 'https://zoho.com/videos/bots.srt'
  14. }

操作 object

画像オブジェクトと動画オブジェクトは、アナウンス、ニュース、コマンドパネルウィジェットでサポートされています。
  1. 1. リンク
  2. {
  3. '種類' : 'リンク',
  4. 'ラベル' : string, // 表示するテキスト
  5. 'url' : 'https://www.zoho.com/salesiq/help/developer-guides/bot-siq-scripts-zobot-response-cta-2.0.html'
  6. }

  8. 2. 通話
  9. {
  10. '種類' : '通話',
  11. 'ラベル' : string, // 表示するテキスト
  12. 'provider' : 'native|system', // native - SalesIQ から発信 | system - FaceTime または携帯電話の通話
  13. 'contact_number' : 番号 //電話番号
  14. }

  16. 3. メール
  17. {
  18. '種類' : 'メール',
  19. 'ラベル' : string, // 表示するテキスト
  20. 'email_id' : 'サポート@zohosalesiq.com'
  21. }

  23. 4. chat
  24. {
  25. '種類' : 'chat',
  26. 'ラベル' : string // 表示するテキスト
  27. }

  29. 5. article
  30. {
  31. '種類' : 'article',
  32. 'article_id' : $articleId // 例 : '115844000014148177'
  33. 'ラベル' : string // 表示するテキスト
  34. }

  36. 6. client_action
  37. {
  38. '種類' : 'client_action', // 操作オブジェクト内の clientaction_name キーに基づいて、カスタムのクライアントサイド操作をトリガーします。詳細は クライアント操作 API ドキュメントを参照してください。
  39. 'ラベル' : string, // 表示するテキスト
  40. '名前' : 'bookbtn', // クライアント関数を呼び出すときに送信されるキー
  41. 'clientaction_name' : 'book_now'
  42. }

Announcement widget

  1. アナウンスウィジェットの構文コードは次のとおりです。
構文:
  1. {
  2. '種類' : 'announcement',
  3. 'banner' : media object ,
  4. '件名' : string,
  5. 'text' : string,
  6. '操作' : 操作 object
  7. }
  1. 上記の構文コードを要件に合わせてカスタマイズし、インストールコードの ready 関数内に貼り付けます。

Sample コード

参照用のコードサンプルを以下に示します。
  1. //SalesIQ ダッシュボードで、［設定］ > ［ブランド］ > 対象のブランドを選択 > ［インストール］ > ［Webサイト］に移動し、コードをコピーしてここに貼り付けると、このサンプルコードが動作します。
  2. <script>window.$Zoho=window.$Zoho || {};$Zoho。salesiq=$Zoho。salesiq||{ready:function(){}}</script><script id='zsiqscript' src='https://salesiq.zohopublic.com/widget?wc=siqfe0612efca087f0231494bd17d55e66512cf7eb42ab4d0f0ae8ccc0a932be' defer></script>
  3. <script>
  4. $Zoho。salesiq。ready = function () {
  5. $Zoho。salesiq。set('ホーム。widgets', [
  6. {
  7. 種類: 'announcement',
  8. banner: {
  9. 種類: '画像',
  10. url: 'https://previewengine-accl.zohoexternal.com/image/WD/gkbu53ba12feb59204d558ba0e4440c52d3f1?version=1.0&width=2046&height=1536',
  11. image_position: 'fit|fill'
  12. },
  13. 件名: 'Lead Nurturing 101: 無料 Training',
  14. text: 'すべて Zoho ユーザー in the region are ようこそ！ - 参加する the meetup! Zoho One subscribers will gain the most insights. Zoho CRM and other stand-alone app ユーザー will discover how Zoho's full suite can boost their 法人 完了.',
  15. 操作: {
  16. 種類: 'リンク',
  17. ラベル: '今すぐ登録する',
  18. url: 'https://www.zoho.com/zoholics/'
  19. }
  20. }
  21. ]);
  22. };
  23. </script>

Output


News widget

  1. ニュースウィジェットの構文コードは次のとおりです。
構文:
  1. {
  2. '種類' : 'news',
  3. 'banner' : media object,
  4. '件名' : string,
  5. 'text' : string
  6. }
  1. 上記の構文コードを要件に合わせてカスタマイズし、インストールコードの ready 関数内に貼り付けます。

Sample コード

参照用のコードサンプルを以下に示します。
  1. //SalesIQ ダッシュボードで、［設定］>［ブランド］> 対象のブランドを選択 >［インストール］>［ウェブサイト］の順に進み、コードをコピーして、このサンプルコードが動作するようにここに貼り付けてください。
  2. <script>window.$Zoho=window.$Zoho || {};$Zoho。salesiq=$Zoho。salesiq||{ready:function(){}}</script><script id='zsiqscript' src='https://salesiq.zohopublic.com/widget?wc=siqfe0612efca087f0231494bd17d03555e66512cf72ab4d0f0ae8ccc0a932be' defer></script>
  3. <script>
  4. $Zoho。salesiq。ready = function() {
  5. $Zoho。salesiq。set('ホーム。widgets', [
  6. {
  7. 種類: 'news',
  8. banner: {
  9. 種類: '画像',
  10. url: 'https://previewengine-accl.zohoexternal.com/image/BACKSTAGE/912000271967525?cli-msg=eyJtb2R1bGUiOiJFdmVudEltYWdlUmVzb3VyY2UiLCJ0eXBlIjowLCJwb3J0YWxJZCI6IjY1MDczMzk2MSIsInN1YlJlc291cmNlSWQiOiI2NTA3MzM5NjEiLCJpZCI6IjkxMjAwMDI3MTk2NzUyNSJ9',
  11. image_position: 'fit|fill'
  12. },
  13. 件名: 'Zoholics に参加しませんか: テクノロジーについて語り合いながら、おいしいコーヒーを楽しみましょう',
  14. text: '最新の製品アップデート、1 対 1 のサポートセッション、Zoho のお客様やパートナーとの充実したネットワーキングの機会をご用意しています。皆さまからのフィードバックをもとに、今年の Zoholics がどなたにとっても価値あるイベントとなるよう取り組んできました。'
  15. }
  16. ]);
  17. };
  18. </script>

出力


コマンドパネルウィジェット

  1. コマンドパネルメッセージの構文コードは次のとおりです。
構文:
  1. {
  2. '種類': 'command_panel',
  3. '件名': 'STRING',
  4. '処理': アクションオブジェクト
  5. }
  1. 上記の構文コードを要件に合わせてカスタマイズし、インストールコードの ready 関数内に貼り付けてください。

サンプルコード

参照用のコードサンプルを以下に示します。
  1. //SalesIQ ダッシュボードで、［設定］>［ブランド］> 対象のブランドを選択 >［インストール］>［ウェブサイト］の順に進み、コードをコピーして、このサンプルコードが動作するようにここに貼り付けてください。
  2. <script>window.$Zoho=window.$Zoho || {};$Zoho。salesiq=$Zoho。salesiq||{ready:function(){}}</script><script id='zsiqscript' src='https://salesiq.zohopublic.com/widget?wc=siqfe0612efca087f0231494bd17555e66512cf7eb42ab4d0f0ae8ccc0a932be' defer></script>
  3. <script>
  4. $Zoho。salesiq。ready = function () {
  5. $Zoho。salesiq。set('ホーム。widgets', [
  6. {
  7. 種類: 'command_panel',
  8. 件名: 'Zoholics に参加しませんか: テクノロジーについて語り合いながら、おいしいコーヒーを楽しみましょう',
  9. 処理: [
  10. {
  11. 種類: 'chat',
  12. ラベル: 'チャットを開始'
  13. },
  14. {
  15. 種類: '通話',
  16. ラベル: '通話を発信',
  17. provider: 'native|system'
  18. },
  19. {
  20. 種類: 'リンク',
  21. ラベル: '製品を確認',
  22. url: 'https://events.zoho.com/ZoholicsSydney2024'
  23. },
  24. {
  25. 種類: 'article',
  26. article_id: 'ARTICLE_ID',
  27. ラベル: 'Zoho について'
  28. },
  29. {
  30. 種類: 'client_action',
  31. ラベル: '予約を申し込む',
  32. 名前: 'bookbtn',
  33. clientaction_name: 'openBookingForm'
  34. },
  35. ]
  36. }
  37. ]);
  38. };
  39. </script>

出力



IM チャネルウィジェット

SalesIQ のチャットウィジェット内にインスタントメッセージング（IM）チャネルを、次の 2 種類の表示形式で埋め込むことができます。
  1. action_item – 各 IM チャネルを、デフォルトの［チャット］や［通話］ボタンと同様の縦並びボタンとして表示します。
  2. channel_links – IM チャネルを横一列に並んだアイコンとして表示し、よりコンパクトな表示を提供します。
どちらの形式でも、ユーザーは自分が普段利用しているメッセージングプラットフォームから、SalesIQ のチャット画面を介して直接あなたに連絡できます。

出力



対応チャネル:

以下は、ウィジェット設定で使用できる対応 IM チャネルの一覧と、id および url 属性のサンプル値です。

Alert
メモ: 以下のサンプル URL と ID は SalesIQ の IM チャネルの値です。実際のご利用環境の値に置き換えてください。

チャネル名
サンプル URL 形式
ID
WhatsApp https://wa.me/917305992852 917305992852
LINE https://line.me/R/ti/p/@246qkdpd @246qkdpd
Instagram https://ig.me/m/ZohoSalesIQ ZohoSalesIQ
WeChat weixin://dl/chat?<WECHAT_ID> zoho_support_id
Facebook https://m.me/ZohoSalesIQ ZohoSalesIQ
X (Twitter) https://x.com/messages/compose?recipient_id=5827392 5827392
Telegram https://t.me/zylker_shop_bot zylker_shop_bot

action_item

  1. action_item の構文コードは次のとおりです。
構文:
  1. {
  2. '種類' : 'action_item',
  3. '件名' : string,
  4. // channel キーで使用できる値 - 'Facebook' | 'instagram' | 'WhatsApp' | 'telegram' | 'x' | 'we' | 'LINE'
  5. 'icon' : {
  6. 種類 : 'channel',
  7. 名前: 'チャネル名',
  8. id: '$unique_key', // URL がある場合は任意
  9. url: '<チャネルの URL>'
  10. }
  11. }
  1. 上記の構文コードを要件に合わせてカスタマイズし、インストールコードの ready 関数内に貼り付けます。

サンプルコード

参照用のコードサンプルを以下に示します。
  1. //SalesIQ ダッシュボードで、［設定］>［Brands］> 対象のブランドを選択 >［Installation］>［Webサイト］の順に移動し、コードをコピーして、このサンプルコード内の該当箇所に貼り付けてください。
  2. <script>window.$Zoho=window.$Zoho || {};$Zoho。salesiq=$Zoho。salesiq||{ready:function(){}}</script><script id='zsiqscript' src='https://salesiq.zohopublic.com/widget?wc=siqfe0612efca087f0231494bd17555e66512cf7eb42ab4d0f0ae8ccc0a932be' defer></script>
  3. <script>
  4. $Zoho。salesiq。ready = function () {
  5. $Zoho。salesiq。set('ホーム。widgets', [
  6. {
  7. 種類: 'action_item',
  8. 件名: 'チャットで問い合わせる',
  9. icon: {
  10. 種類: 'channel',
  11. 名前: 'WhatsApp',
  12. //以下の番号は SalesIQ の WhatsApp 用番号です。自社の WhatsApp ビジネス番号に置き換えてください。
  13. id: '917305992852', // URL がある場合は任意
  14. url: 'https://wa.me/917305992852'
  15. }
  16. },
  17. {
  18. 種類: 'action_item',
  19. 件名: 'チャットで問い合わせる',
  20. icon: {
  21. 種類: 'channel',
  22. 名前: 'instagram',
  23. //以下の ID は SalesIQ の Instagram 用 ID です。自社の Instagram ID に置き換えてください。
  24. id: 'zohosalesiq', // URL がある場合は任意
  25. url: 'https://www.instagram.com/zohosalesiq/'
  26. }
  27. }
  28. ]);
  29. };
  30. </script>
  1. channel_links の構文コードは次のとおりです。
構文:
  1. {
  2. '種類': 'channel_links',
  3. '件名' : string,
  4. // channel キーで使用できる値 - 'Facebook' | 'instagram' | 'WhatsApp' | 'telegram' | 'x' | 'we' | 'line'
  5. 'channels': [
  6. {
  7. 名前: 'channel の名前',
  8. id: '$unique_key', // URL がある場合は任意
  9. url: '<channel の URL>'
  10. }
  11. ]
  12. }
  1. 上記の構文コードを要件に合わせてカスタマイズし、インストールコードの ready 関数内に貼り付けてください。

サンプルコード

参照用のコードサンプルを以下に示します。
  1. //SalesIQ ダッシュボードで、［設定］>［Brands］> 対象のブランドを選択 >［Installation］>［Webサイト］の順に移動し、コードをコピーして、このサンプルコード内の該当箇所に貼り付けてください。
  2. <script>window.$Zoho=window.$Zoho || {};$Zoho。salesiq=$Zoho。salesiq||{ready:function(){}}</script><script id='zsiqscript' src='https://salesiq.zohopublic.com/widget?wc=siqfe0612efca087f0231494bd17555e66512cf7eb42ab4d0f0ae8ccc0a932be' defer></script>
  3. <script>
  4. $Zoho。salesiq。ready = function () {
  5. $Zoho。salesiq。set('ホーム。widgets', [
  6. {
  7. 種類: 'channel_links',
  8. 件名: '各種チャネルでお問い合わせ',
  9. channels: [
  10. {
  11. 名前: 'WhatsApp',
  12. //以下の番号は SalesIQ の WhatsApp 用番号です。自社の WhatsApp ビジネス番号に置き換えてください。
  13. id: '917305992852', // URL がある場合は任意
  14. url: 'https://wa.me/917305992852' // 自社の WhatsApp 番号に置き換えてください。
  15. },
  16. {
  17. 名前: 'line',
  18. //以下の ID は SalesIQ の LINE 用 ID です。自社の LINE ID に置き換えてください。
  19. id: '@246qkdpd', // URL がある場合は任意
  20. url: 'https://line.me/R/ti/p/@246qkdpd' // 自社の LINE ID に置き換えてください。
  21. },
  22. {
  23. 名前: 'instagram',
  24. //以下の ID は SalesIQ の Instagram 用 ID です。自社の Instagram ID に置き換えてください。
  25. id: 'zohosalesiq', // URL がある場合は任意
  26. url: 'https://ig.me/m/zohosalesiq' // 自社の Instagram ユーザー名に置き換えてください。
  27. },
  28. {
  29. 名前: 'we',
  30. id: 'WECHAT_ID', / URL がある場合は任意
  31. url: 'weixin://dl/chat?WECHAT_ID' // 自社の WeChat ID に置き換えてください。
  32. },
  33. {
  34. 名前: 'Facebook',
  35. //以下の ID は SalesIQ の Facebook 用 ID です。自社の Facebook ID に置き換えてください。
  36. id: 'ZohoSalesIQ', // URL がある場合は任意
  37. url: 'https://m.me/ZohoSalesIQ' // 自社の Facebook ページ名またはユーザー ID に置き換えてください。
  38. },
  39. {
  40. 名前: 'x',
  41. //以下の ID は SalesIQ の Facebook 用 ID です。自社の Facebook ID に置き換えてください。
  42. id: '5827392', // URL がある場合は任意
  43. url: 'https://x.com/messages/compose?recipient_id=5827392' // 自社の X（旧 Twitter）の受信者 ID に置き換えてください。
  44. },
  45. {
  46. 名前: 'telegram',
  47. id: 'zylker_shop_bot', // URL がある場合は任意
  48. url: 'https://t.me/zylker_shop_bot' // 自社の Telegram ユーザー名に置き換えてください。
  49. }
  50. ]
  51. }
  52. ]);
  53. };
  54. </script>