LogoWisora

リファレンス
  1. Home
  2. リファレンス
  3. インターネットにボットを公開する
  4. ウィジェットをカスタマイズする

ウィジェットをカスタマイズする

Web サイトに埋め込むウィジェットのデザインや動作をカスタマイズする方法について説明します。

Web サイトに埋め込むフローティング型のウィジェットをカスタマイズします。各種設定後、プレビューを確認してから保存してください。

公開状態を変更する

ウィジェット画面右上の [ウィジェット公開状態] で現在の公開状態を確認できます。

  • アクセス拒否: ウィジェットを無効にします。Web サイトでのウィジェット利用を停止します。
  • パブリックアクセス: 緑色のインジケーターで表示。ウィジェットを有効にします。Web サイトでのウィジェット利用を許可します。
  • 認証済みのみ: 黄色のインジケーターで表示。ウィジェットを有効にします。パブリックアクセスとは異なり、事前に設定した 外部認証 での本人確認に成功したエンドユーザーだけが利用できます。

認証済みのみについて

  1. 管理コンソールにログイン して、メニューの [設置設定] → [ウィジェット] を順にクリックします。

    ウィジェット画面が表示されます。

  2. [ウィジェット公開状態] の [変更] をクリックします。

    「アクセス制御レベルの選択」画面が表示されます。

  3. 新しいアクセス制御レベルを選択します。

    • アクセス拒否: ウィジェットを無効にします。Web サイトでのウィジェット利用を停止します。
    • パブリックアクセス: ウィジェットを有効にします。Web サイトでのウィジェット利用を許可します。
    • 認証済みのみ: ウィジェットを有効にします。事前に設定した 外部認証 での本人確認に成功したエンドユーザーだけが利用できます。

  4. [保存] → [変更する] を順にクリックします。

    ウィジェットの公開状態が変更されます。

プレビューでウィジェットの外観を確認する

画面中央のプレビューエリアで、現在の設定によるウィジェットの外観をリアルタイムで確認できます。設定を変更すると、プレビューに即座に反映されます。

ウィジェットの外観をカスタマイズする

画面下部のタブを選択して、外観や動作、利用ドメインなどをカスタマイズします。

[位置とサイズ]

ウィジェットが Web サイトのどの位置に、どのくらいのサイズで表示されるかを設定します。

項目説明
[下からの位置] ブラウザの表示領域の下端からウィジェットまでの距離を CSS の単位 (例: 20px, 2em) で指定します。
[右からの位置] ブラウザの表示領域の右端からウィジェットまでの距離を CSS の単位で指定します。
[幅] ウィジェットの幅を CSS の単位で指定します。
[高さ] ウィジェットの高さを CSS の単位で指定します。
[最小化時の幅] ウィジェットが最小化されている (アイコンのみ表示など) 状態の幅を指定します。
[最小化時の高さ] ウィジェットが最小化されている状態の高さを指定します。
[重なり順 (z-index)] ウィジェットの重なり順を指定するz-indexの基準値です。サイト上の他の要素と重なる場合に調整します。

[ヘッダー]

ウィジェット上部のヘッダー領域のデザインをカスタマイズします。

項目説明
[ヘッダー] ヘッダーに表示するテキストです。
[背景色]

ヘッダー領域の背景色を指定します。

例: #1d8091

カラーコード (#000000 形式) を入力したり、カラーピッカーをクリックして色を選択したりできます。

[テキスト色]

ヘッダーテキストの色を指定します。

例: #ffffff

カラーコード (#000000 形式) を入力したり、カラーピッカーをクリックして色を選択したりできます。

[フォントサイズ] ヘッダーテキストのフォントサイズを CSS の単位で指定します。

[メッセージエリア]

ユーザーとボットの対話が表示されるエリアの背景デザインを設定します。

項目説明
[背景色]

対話が表示されるエリアの背景色を指定します。

例: #ffffff

カラーコード (#000000 形式) を入力したり、カラーピッカーをクリックして色を選択したりできます。

[背景画像URL] 背景として表示する画像を URL で指定します。
[背景画像の配置]

背景画像の表示方法を選択します。

  • エリアにフィット (縦横比維持)
  • タイル状に並べる
  • 拡大せずに中央に置く
  • 拡大せずに左上に置く
[背景画像の透過度（%）] 背景画像の透明度を 0%から 100%の間で設定します。

[ボットメッセージ]

ボットが送信するメッセージ (吹き出し) のデザインを設定します。

項目説明
[ボットアバター画像URL] ボットメッセージの横に表示されるアバター画像を URL で指定します。公開されている画像 URL (PNG、JPG、SVG 形式) を指定してください。
[ボットアバターサイズ]

アバター画像のサイズを CSS の単位で指定します。

例: 32px

[ウェルカムメッセージ] ウィジェットを開いたときに表示される最初のメッセージです。挨拶や簡単な案内を記述します。
[背景色]

ボットの吹き出しの背景色を指定します。

例: #f8fafc

カラーコード (#000000 形式) を入力したり、カラーピッカーをクリックして色を選択したりできます。

[テキスト色]

ボットの吹き出し内のテキスト色を指定します。

例: #334155

カラーコード (#000000 形式) を入力したり、カラーピッカーをクリックして色を選択したりできます。

[フォントサイズ]

ボットのメッセージのフォントサイズを CSS の単位で指定します。

例: 14px

[リンク色]

メッセージ内に含まれる URL リンクのテキスト色を指定します。

例: #1d8091

カラーコード (#000000 形式) を入力したり、カラーピッカーをクリックして色を選択したりできます。

[透過度（%）] ボットの吹き出しの透明度を 0%から 100%の間で設定します。

[ユーザーメッセージ]

ユーザーが送信するメッセージ (吹き出し) のデザインを設定します。

項目説明
[背景色]

ユーザーの吹き出しの背景色を指定します。

例: #1d8091

カラーコード (#000000 形式) を入力したり、カラーピッカーをクリックして色を選択したりできます。

[テキスト色]

ユーザーの吹き出し内のテキスト色を指定します。

例: #ffffff

カラーコード (#000000 形式) を入力したり、カラーピッカーをクリックして色を選択したりできます。

[フォントサイズ]

ユーザーのメッセージのフォントサイズを CSS の単位で指定します。

例: 14px

[透過度（%）] ユーザーの吹き出しの透明度を 0%から 100%の間で設定します。

[入力エリア]

ユーザーがメッセージを入力するエリアのデザインを設定します。

項目説明
[Enterキーのデフォルト設定]

Enter キーで送信するか、改行するかのデフォルト動作を選択します。

  • Enter キーで送信、Shift + Enter で改行
  • Enter キーで改行

ウィジェット内のプルダウンで、エンドユーザーが動作を切り替えることもできます。

[プレースホルダー]

入力ボックス内に、入力例として薄く表示されるテキストです。

例: 質問を入力してください…

[入力エリア背景色]

入力ボックスを含む、入力エリア全体の背景色を指定します。

例: #ffffff

カラーコード (#000000 形式) を入力したり、カラーピッカーをクリックして色を選択したりできます。

[入力ボックス背景色]

ユーザーが文字を入力するテキストボックス自体の背景色を指定します。

例: #f5f5f5

カラーコード (#000000 形式) を入力したり、カラーピッカーをクリックして色を選択したりできます。

[テキスト色]

ユーザーが入力する文字の色を指定します。

例: #333333

カラーコード (#000000 形式) を入力したり、カラーピッカーをクリックして色を選択したりできます。

[フォントサイズ]

入力文字のフォントサイズを CSS の単位で指定します。

例: 16px

iPhone で自動ズームが発生することを防ぐため、16px 以上の設定を推奨します。

[送信ボタン色]

送信ボタンのアイコンの色を指定します。

例: #1d8091

カラーコード (#000000 形式) を入力したり、カラーピッカーをクリックして色を選択したりできます。

[ハンドオーバー]

ウィジェットを利用しているエンドユーザーが、チャットの途中で担当者への対応を依頼できるようにします。

項目説明
[ハンドオーバーリクエストボタンを表示する] チェックを入れると、ウィジェットの入力エリアの左端に [] が表示されます。
[ハンドオーバーリクエスト送信時の通知メッセージ] エンドユーザーが担当者への対応を依頼したときに表示されるメッセージを入力します。

エンドユーザーが担当者への対応を依頼すると

  • エンドユーザーが担当者への対応を依頼すると、設定した通知メッセージがチャットに表示されます。担当者が公開コメントを送信するまでは、ボットも引き続き回答します。
  • 担当者が チャットログ から公開コメントを送信すると、以降のメッセージにはボットが自動応答しません。

[その他の外観]

ウィジェット全体の細かな外観を設定します。

項目説明
[フォントファミリー]

ウィジェット全体で使用するフォントを指定します。

例: ‘Noto Sans JP’, ‘Hiragino Sans’, ‘Yu Gothic’, Meiryo, sans-serif

[角丸 (Border Radius)]

ウィジェットの角の丸みを CSS の単位で指定します。

例: 10px

[アイコンURL] 最小化時に表示されるアイコンの画像 URL を指定します。

[動作]

ウィジェットの動作に関する設定です。

項目説明
[開いているときにリサイズを有効にする] エンドユーザーがウィジェットのサイズを変更できるようにする場合にチェックを入れます。
[ドラッグを有効にする] エンドユーザーがウィジェットをドラッグして移動できるようにする場合にチェックを入れます。
[初期状態で開く] Web サイト読み込み時に、ウィジェットを最初から開いた状態にする場合にチェックを入れます。
[アイコン表示のときに閉じるボタン (x) を表示する] ウィジェットのアイコンに閉じるボタンを表示する場合にチェックを入れます。エンドユーザーが閉じるボタンをクリックすると、さらに小さな表示 (ドックバー表示) になります。

[ドックバー]

エンドユーザーがウィジェットのアイコンに表示されている閉じるボタンをクリックすると、さらに小さな表示に切り替わります。これをドックバーと呼びます。

項目説明
[通常時の幅] マウスカーソルがドックバーの上に載っていないときの幅を、ピクセル単位で指定します。
[ホバー時の幅] マウスカーソルがドックバーの上に乗ったときの幅を、ピクセル単位で指定します。
[イベント発生時の幅] イベント発生時 (新しいメッセージが届いたときなど) のドックバーの幅を、ピクセル単位で指定します。

[利用ドメイン]

ウィジェットの表示を許可するドメインを設定します。

項目説明
[利用ドメイン]

ウィジェットの表示を許可するドメイン (https:// などを含む。正確には、オリジンと呼ばれます) を 1 行 1 つずつ入力してください。

例:

  • https://example.com
  • https://*.example.com
  • http://*:8080
  • http://192.168.*.*

外部の Web サイトに埋め込む場合は指定してください

  • 外部の Web サイトに埋め込む場合は、表示元のオリジンを [利用ドメイン] に必ず指定してください。
  • [利用ドメイン] が空の場合、外部の Web サイトからはウィジェットを利用できません。

ワイルドカードの指定について

  • * をワイルドカードとして利用できます。「ワイルドカード」は「任意の文字列に一致させるための記号」のことです。たとえば https://*.example.com は https://help.example.com や https://docs.example.com などに一致します。
  • ワイルドカードを含まない場合は、入力したドメインと Web ページから送信される Origin が完全一致した場合のみ許可されます (スキーム、ホスト名、ポート番号まで一致が必要)。
  • たとえば、https://example.com と https://example.com:9443 は完全一致ではないため、ウィジェットは表示されません。
[不明なドメインを許可する（非推奨）]

ローカル HTML (file://) や一部 WebView など、ブラウザが Origin ヘッダーを送信しない環境でウィジェットを利用する場合にだけチェックを入れます。通常の Web サイトに埋め込む場合はオフのままにしてください。

[ディスクレーマー通知]

エンドユーザーに表示するディスクレーマー通知を設定します。通知はウィジェット内に表示され、× をクリックすると閉じられます。

項目説明
[ディスクレーマー通知を有効にする] チェックを入れると、ウィジェット内にディスクレーマー通知が表示されます。
[ディスクレーマー通知テキスト]

Markdown 形式で通知文を入力します。

ディスクレーマーページを作成するには

${disclaimerPageUrl} を含めると、ディスクレーマーページ へのリンクを表示できます。リンクを使う場合は、ディスクレーマーページを作成する で [ディスクレーマーページの公開] にチェックを入れて保存してください。チェックを入れて保存するとディスクレーマーページが作成されます。

例: [ディスクレーマーはこちら](${disclaimerPageUrl})

ボタン

  • [デフォルトに戻す] : すべてのタブの設定をデフォルトに戻します。
  • [保存] : すべてのタブの設定を保存します。

ウィジェットを Web サイトに埋め込む

  1. ウィジェット画面で、 [scriptタグ] の [コピー] をクリックします。

    script タグがクリップボードにコピーされます。

  2. コピーした script タグを、Web サイトの HTML の </body> タグ直前 (body の一番最後) に貼り付けます。

    script タグを埋め込んだ Web サイトにアクセスすると、ウィジェットが表示されます。

    script タグを <head> や <body> の途中に配置すると、ウィジェットが動作しないことがあります。

Web サイトに CSP ヘッダーを設定している場合

Web サイトで Content-Security-Policy ヘッダーを設定している場合は、ウィジェットの配信元と、ウィジェットが利用する外部リソースを許可してください。ウィジェットに対する最小限の Content-Security-Policy ヘッダーの設定例は以下のとおりです。

Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' https://<widget-host> https://cdnjs.cloudflare.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https://<widget-host>; connect-src 'self' https://<widget-host>;

なお、設定例内の https://<widget-host> は、ウィジェット画面でコピーした script タグの src 属性で確認できます。src 属性の URL から、スキーム (https://) とホスト名を抜き出して指定してください。たとえば、コピーした script タグの src 属性に https://ai-max.wisora.soracom.io/... と書かれている場合は、https://<widget-host> の代わりに https://ai-max.wisora.soracom.io を指定します。

[フォントファミリー] を設定する場合

[フォントファミリー] に OS 標準フォントなど、追加のダウンロードが発生しないフォントを指定する場合は、Google Fonts は利用されません。この場合の CSP ヘッダーの設定例は以下のとおりです。

Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' https://<widget-host> https://cdnjs.cloudflare.com; style-src 'self' 'unsafe-inline'; font-src 'self'; img-src 'self' data: https://<widget-host>; connect-src 'self' https://<widget-host>;

Web フォントなど、ブラウザがフォントファイルやスタイルシートをダウンロードするフォントを指定する場合は、配信元のドメインを追加してください。スタイルシートを読み込むドメインは style-src、フォントファイルを読み込むドメインは font-src に追加します。

  • Content-Security-Policy ヘッダーについて詳しくは、MDN の Content-Security-Policy (CSP) ヘッダー を参照してください。
  • worker-src の設定は不要です。
  • wasm-unsafe-eval に対応していない環境では、WebAssembly の読み込みのために unsafe-eval が必要になることがあります。
  • アイコン画像、ボットアバター画像、背景画像などをほかのドメインから読み込む場合は、そのドメインを img-src に追加してください。

エンドユーザーとしてチャットを試す

script タグを埋め込んだ Web サイトで、エンドユーザーとしてチャットを試せます。

  1. script タグを埋め込んだ Web サイトにアクセスします。

    ウィジェットが表示されます。ウィジェットが表示されないときは、 [利用ドメイン] を設定してください。

  2. メッセージ入力エリアに質問を入力します。

    入力エリアのプルダウンで「Enter キーで送信、Shift + Enter で改行」または「Enter キーで改行」を選択できます。設定に応じて改行操作が変わります。

    スマートフォンやタブレットで利用する場合

    スマートフォンやタブレットでは、このプルダウンは表示されません。Enter キーは改行として動作します。メッセージを送信するには、 [] をタップします。

  3. [] をクリックします。

    • ボットの回答が表示されます。回答が返ってくるまでに時間がかかることがあります。
    • 再質問する場合は、メッセージ入力エリアに質問を入力して [] をクリックします。

エンドユーザーとして担当者に対応を依頼するには

管理コンソールのウィジェット画面にある [ハンドオーバー] で [ハンドオーバーリクエストボタンを表示する] にチェックを入れている場合は、Web サイトに表示されたウィジェットの入力エリアの左端に [] が表示されます。ボットに何度か質問しても問題を解決できないときに、 [] をクリックして担当者に対応を依頼できます。

ウィジェットのチャットを再開する

同じブラウザでウィジェットを開き直すと、最後に利用したチャットを再開できます。最後の利用から 10 日を過ぎた場合は、新しいチャットが開始されます。

共有端末でウィジェットを利用する場合

共有端末でウィジェットを利用したあとは、必ず [このチャットを終了] をクリックしてください。ブラウザを閉じただけではチャットは終了せず、同じ端末を使うほかの利用者が最後のチャットを再開できる場合があります。

  • [このチャットを終了] をクリックすると、現在のチャットを終了できます。終了したチャットは再開できません。新しい質問をする場合は、 [新しいチャットを開始] をクリックしてください。
  • 管理者が チャットログ から公開コメントを送信した場合、そのコメントがウィジェットに表示されます。公開コメントが表示されたあとは、管理者が対応する会話として扱われ、ボットはその会話に自動応答しません。