Wisora
Web サイトに埋め込むフローティング型のウィジェットをカスタマイズします。各種設定後、プレビューを確認してから保存してください。
公開状態を変更する
ウィジェット画面右上の [ウィジェット公開状態] で現在の公開状態を確認できます。
- アクセス拒否: ウィジェットを無効にします。Web サイトでのウィジェット利用を停止します。
- パブリックアクセス: 緑色のインジケーターで表示。ウィジェットを有効にします。Web サイトでのウィジェット利用を許可します。
-
管理コンソールにログイン して、メニューの [設置設定] → [ウィジェット] の順にクリックします。
ウィジェット画面が表示されます。
-
[ウィジェット公開状態] の [変更] をクリックします。
「アクセス制御レベルの選択」画面が表示されます。
-
新しいアクセス制御レベルを選択します。
- アクセス拒否: ウィジェットを無効にします。Web サイトでのウィジェット利用を停止します。
- パブリックアクセス: ウィジェットを有効にします。Web サイトでのウィジェット利用を許可します。
-
[保存] → [変更する] の順にクリックします。
ウィジェットの公開状態が変更されます。
プレビューでウィジェットの外観を確認する
画面中央のプレビューエリアで、現在の設定によるウィジェットの外観をリアルタイムで確認できます。設定を変更すると、プレビューに即座に反映されます。
ウィジェットの外観をカスタマイズする
画面下部のタブを選択して、外観をカスタマイズします。
[位置とサイズ]
ウィジェットが 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%の間で設定します。 |
[入力エリア]
ユーザーがメッセージを入力するエリアのデザインを設定します。
| 項目 | 説明 |
|---|---|
| [プレースホルダー] | 入力ボックス内に、入力例として薄く表示されるテキストです。 例: 質問を入力してください… |
| [入力エリア背景色] | 入力ボックスを含む、入力エリア全体の背景色を指定します。 例: #ffffff カラーコード（#000000 形式）を入力したり、カラーピッカーをクリックして色を選択したりできます。 |
| [入力ボックス背景色] | ユーザーが文字を入力するテキストボックス自体の背景色を指定します。 例: #f5f5f5 カラーコード（#000000 形式）を入力したり、カラーピッカーをクリックして色を選択したりできます。 |
| [テキスト色] | ユーザーが入力する文字の色を指定します。 例: #333333 カラーコード（#000000 形式）を入力したり、カラーピッカーをクリックして色を選択したりできます。 |
| [フォントサイズ] | 入力文字のフォントサイズを CSS の単位で指定します。 例: 14px |
| [送信ボタン色] | 送信ボタンのアイコンの色を指定します。 例: #1d8091 カラーコード（#000000 形式）を入力したり、カラーピッカーをクリックして色を選択したりできます。 |
[その他の外観]
ウィジェット全体の細かな外観を設定します。
| 項目 | 説明 |
|---|---|
| [フォントファミリー] | ウィジェット全体で使用するフォントを指定します。 例: ‘Noto Sans JP’, ‘Hiragino Sans’, ‘Yu Gothic’, Meiryo, sans-serif |
| [角丸 (Border Radius)] | ウィジェットの角の丸みを CSS の単位で指定します。 例: 10px |
| [アイコンURL] | 最小化時に表示されるアイコンの画像 URL を指定します。 |
[動作]
ウィジェットの動作に関する設定です。
| 項目 | 説明 |
|---|---|
| [開いているときにリサイズを有効にする] | エンドユーザーがウィジェットのサイズを変更できるようにする場合にチェックを入れます。 |
| [ドラッグを有効にする] | エンドユーザーがウィジェットをドラッグして移動できるようにする場合にチェックを入れます。 |
| [初期状態で開く] | Web サイト読み込み時に、ウィジェットを最初から開いた状態にする場合にチェックを入れます。 |
| [アイコン表示のときに閉じるボタン (x) を表示する] | ウィジェットのアイコンに閉じるボタンを表示する場合にチェックを入れます。エンドユーザーが閉じるボタンをクリックすると、さらに小さな表示 (ドックバー表示) になります。 |
[ドックバー]
エンドユーザーがウィジェットのアイコンに表示されている閉じるボタンをクリックすると、さらに小さな表示に切り替わります。これをドックバーと呼びます。
| 項目 | 説明 |
|---|---|
| [通常時の幅] | マウスカーソルがドックバーの上に載っていないときの幅を、ピクセル単位で指定します。 |
| [ホバー時の幅] | マウスカーソルがドックバーの上に乗ったときの幅を、ピクセル単位で指定します。 |
| [イベント発生時の幅] | イベント発生時（新しいメッセージが届いたときなど）のドックバーの幅を、ピクセル単位で指定します。 |
ボタン
- [デフォルトに戻す] : すべてのタブの設定をデフォルトに戻します。
- [保存] : すべてのタブの設定を保存します。
ウィジェットを Web サイトに埋め込む
-
ウィジェット画面で、 [scriptタグ] の [コピー] をクリックします。
script タグがクリップボードにコピーされます。
-
コピーした script タグを、Web サイトに埋め込みます。
script タグを埋め込んだ Web サイトにアクセスすると、ウィジェットが表示されます。
「ご利用にあたっての同意」について
Wisora は生成 AI を活用するサービスです。エンドユーザーがウィジェットを利用する際、入力された情報の扱いについて、エンドユーザーの同意を取得してください。
以下は「ご利用にあたっての同意」の例です。必要に応じて内容を調整し、Web サイトに掲載してください。特に ${企業名/組織名} や ${製品名/サービス名/ブランド名}、${プライバシーポリシーURL} などは、実際の情報に置き換えてください。
ご利用にあたっての同意
${企業名/組織名} 「${製品名/サービス名/ブランド名}」をご利用いただきありがとうございます。
本サービスは、生成AIを活用し、皆様からのご質問にお答えするものです。
快適にご利用いただくため、また、より良いサービスを提供していくために、以下の事項についてご確認・ご同意をお願いいたします。
１．対話内容（ご質問・回答）の記録と利用目的について
本サービスでは、お客様が入力されたご質問の内容、およびAIによる回答の内容ならびにアクセス日時等、回答のメタデータを記録させていただいております。これは、以下の目的のために利用させていただきます。
- AIの応答精度向上、サービス改善のための分析
- お問い合わせ傾向の把握によるサポート品質向上
- 不正利用検知やセキュリティ確保のため
- 新しい機能やサービス開発の参考とするため
２．記録されたデータは、個人情報保護法および当社の [プライバシーポリシー](${プライバシーポリシーURL}) に従い、厳重に管理し、上記目的以外には利用いたしません。
３．AIによる回答の性質について
本サービスが提供する回答は、生成AIによって自動生成されたものであり、その完全性、正確性、最新性、有用性を保証するものではありません。本サービスの利用により生じる結果について、当社は一切の責任を負いません。
４．本サービスのご利用を開始された時点で、内容にご同意いただいたものとみなします。
もしご同意いただけない場合は、大変恐縮ですが、本サービスのご利用をお控えくださいますようお願い申し上げます。