# Widget Window

{% embed url="<https://player.vimeo.com/video/697439794>" %}

#### **Edit Widget Window** <a href="#edit-widget-window" id="edit-widget-window"></a>

Now let's move on to the actual chat widget window and what the visitor will see if they click to chat.

<figure><img src="https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz59Vqr25L1jt6xe60FDS%2Fuploads%2Fgit-blob-ffaa7386eb344dc6b126e87d5b57b463d8617b34%2FChat%20widget%20-Edit%20Widget%20Window%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

#### **Preview Window** <a href="#preview-window" id="preview-window"></a>

This is a preview of what your website chat widget window will look like. As you customize your chat widget, you can see the changes happening in real-time here as a preview.

<figure><img src="https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz59Vqr25L1jt6xe60FDS%2Fuploads%2Fgit-blob-9b637659efb34cc7cd0c266f04d8b74d1bfaf6a6%2FChat%20widget%20-%20Chat%20Widget%20Window%20Preview%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

#### **Header Text** <a href="#header-text" id="header-text"></a>

Here you can customize the text shown in the top section of the chat widget. This is usually a prompt of some kind or your company name.

<figure><img src="https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz59Vqr25L1jt6xe60FDS%2Fuploads%2Fgit-blob-8a9a9b256a57ba808a0c5b219a59171c3eb3dd60%2FChat%20widget%20-%20Header%20Text.png?alt=media" alt=""><figcaption></figcaption></figure>

#### **Intro Message** <a href="#intro-message" id="intro-message"></a>

This piece of text is the message shown at the top of the chat window like it were your representative speaking. We recommend asking a question or telling the visitor to leave their contact information.

<figure><img src="https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz59Vqr25L1jt6xe60FDS%2Fuploads%2Fgit-blob-005e6b7f78a7d68f2c5a50d68c0d60d9518c6c19%2FChat%20widget%20-%20Intro%20Message%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

#### **Email Field** <a href="#email-field" id="email-field"></a>

If you'd like to collect an email from the visitor looking to chat, you can enable the email field here.

#### **Legal Message** <a href="#legal-message" id="legal-message"></a>

All communication coming from this chat widget is either text or email, so you will need to add a legal disclaimer so your website visitors know they will be contacted with the information they share.

<figure><img src="https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz59Vqr25L1jt6xe60FDS%2Fuploads%2Fgit-blob-f48f9583d70cfaf1590e96d08405e510d6ee5565%2FChat%20widget%20-%20Legal%20Message.png?alt=media" alt=""><figcaption></figcaption></figure>

#### **Custom Color** <a href="#custom-color" id="custom-color"></a>

Here you can change the color of your chat widget to better match your website or brand colors.

<figure><img src="https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz59Vqr25L1jt6xe60FDS%2Fuploads%2Fgit-blob-4444b96ae5417a6c896973fd86827239c0ceea00%2FChat%20widget%20-Custom%20Color%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

#### **Company/Agency Branding** <a href="#agency-branding" id="agency-branding"></a>

Choose whether or not to show your branding in the footer of the chat widget.

<figure><img src="https://953459931-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2RjsAyiXnDibDuY7JKcM%2Fuploads%2Fem3er7stro7v6HBcijA1%2Fspaces_z59Vqr25L1jt6xe60FDS_uploads_git-blob-6f462cc2f68eba386c93ef19feb26e4df828d101_Chat%20widget%20-%20Agency%20Branding.png?alt=media&#x26;token=ead84df7-5021-4815-8df9-2bd5bc7d832a" alt=""><figcaption></figcaption></figure>