> ## Documentation Index
> Fetch the complete documentation index at: https://docs.gbase.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# ウィジェット埋め込み

> ウェブサイトにボットを簡単に埋め込むことができます。

ボットの各種設定や、ウェブサイト埋め込み用のプラグインを確認できます。\
右画面のプレビューで確認しながら、設定を変更することができます。

<img src="https://mintlify.s3.us-west-1.amazonaws.com/sparticle-fcbbc7ab/user-manual/.gitbook/assets/image%20(41).png" alt="image (41)" />

### 1. チャットボット

* ウェルカムメッセージ
  * ボットが自動で表示する初期メッセージを設定できます。
  * 多言語（日本語、中国語、英語、韓国語）にも対応しています。
  * ボットのアイコンをクリックしなかった場合、初期メッセージを自動でアイコン上に表示します。\
    初期メッセージが表示されるまでの秒数を設定できます。

<img src="https://mintcdn.com/sparticle-fcbbc7ab/H_XdlkH4ZHntuhTU/user-manual/.gitbook/assets/bot-widget-3.png?fit=max&auto=format&n=H_XdlkH4ZHntuhTU&q=85&s=df1a4cc4738143091768c39e317bf1b1" alt="bot-widget-3" width="1861" height="390" data-path="user-manual/.gitbook/assets/bot-widget-3.png" />

<img src="https://mintlify.s3.us-west-1.amazonaws.com/sparticle-fcbbc7ab/user-manual/.gitbook/assets/image%20(43).png" alt="image (43)" />

* 推奨メッセージ（対話インターフェースで使用するコンテンツの設定）
  * 画面上に表示する「よくある質問」や「案内メッセージ」を事前に設定することができます。

    設定した質問は一覧で表示され、ユーザーがクリックするだけで、自動的に質問を送信します。
  * Q\&Aツリーとしてナレッジベースを参照し、質問内容を紐付けることもできます。

<img src="https://mintlify.s3.us-west-1.amazonaws.com/sparticle-fcbbc7ab/user-manual/.gitbook/assets/image%20(3)%20(1).png" alt="image (3) (1)" />

* 署名メッセージ
  * 署名として表示するメッセージを設定できます。
  * メッセージの他に、以下8項目の中から最大3項目を選択し、表示することができます。\
    「メール」　「連絡先」　「住所」　「FAX番号」　「リンク」　「日付」　「時間」　「テキスト」

<img src="https://mintcdn.com/sparticle-fcbbc7ab/H_XdlkH4ZHntuhTU/user-manual/.gitbook/assets/bot-widget-5.png?fit=max&auto=format&n=H_XdlkH4ZHntuhTU&q=85&s=012d376b65f9686f338a4dd2e4860998" alt="bot-widget-5" width="1426" height="673" data-path="user-manual/.gitbook/assets/bot-widget-5.png" />

* 各種設定
  * ヘッダーとフッターを設定できます。
  * クエリ入力ボックスに表示するプレースホルダーのテキストを設定できます。
  * ボット上部のカラーと、送信ボタンのカラーを設定できます。

<img src="https://mintcdn.com/sparticle-fcbbc7ab/H_XdlkH4ZHntuhTU/user-manual/.gitbook/assets/bot-widget-6.png?fit=max&auto=format&n=H_XdlkH4ZHntuhTU&q=85&s=72a9d095745f5921d4d84c41e0d36775" alt="bot-widget-6" width="1717" height="885" data-path="user-manual/.gitbook/assets/bot-widget-6.png" />

### 2. チャットボットのアイコン

* ウェブサイトに表示するボットアイコンをカスタマイズできます。
  * アイコンに表示するイラストを設定できます。画像をアップロードして使用することもできます。
  * アイコンを表示する位置を設定できます。　※初期設定：右下
  * アイコンのカラーと表示テキストを設定できます。
  * アイコンの大きさを設定できます。　※初期設定：小

<img src="https://mintcdn.com/sparticle-fcbbc7ab/H_XdlkH4ZHntuhTU/user-manual/.gitbook/assets/bot-widget-7.png?fit=max&auto=format&n=H_XdlkH4ZHntuhTU&q=85&s=7c66c09108e8041676f872d99a29db8b" alt="bot-widget-7" width="1331" height="479" data-path="user-manual/.gitbook/assets/bot-widget-7.png" />

### 3. チャットボットのアバター

* ボット側のアイコンをカスタマイズできます。
  * アイコンに表示するイラストを設定できます。画像をアップロードして使用することもできます。

<img src="https://mintcdn.com/sparticle-fcbbc7ab/H_XdlkH4ZHntuhTU/user-manual/.gitbook/assets/bot-widget-8.png?fit=max&auto=format&n=H_XdlkH4ZHntuhTU&q=85&s=01e732422339d9cda7feb46c67f10e31" alt="bot-widget-8" width="1472" height="332" data-path="user-manual/.gitbook/assets/bot-widget-8.png" />

### 4. ウェブサイトに埋め込む

* JavaScriptプラグインが表示されます。
  * HTMLに追加することで、ウェブサイト上にボットを埋め込むことができます。

<img src="https://mintcdn.com/sparticle-fcbbc7ab/H_XdlkH4ZHntuhTU/user-manual/.gitbook/assets/bot-widget-2.png?fit=max&auto=format&n=H_XdlkH4ZHntuhTU&q=85&s=34c9fc193d8f7a4a45a68f1dde26034d" alt="bot-widget-2" width="781" height="410" data-path="user-manual/.gitbook/assets/bot-widget-2.png" />

### 5. プレビュー

* ウェブサイト上にボットを埋め込んだ状態を確認することができます。

<img src="https://mintlify.s3.us-west-1.amazonaws.com/sparticle-fcbbc7ab/user-manual/.gitbook/assets/image%20(44).png" alt="image (44)" />
