# Chatbox settings

{% hint style="info" %}
**Who can use this feature?**

* This feature is available for all users
  {% endhint %}

Chatbox is popup on your website includes sections to track order, contact and question list. This is how a chatbox looks like on your website.

<figure><img src="https://263145331-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdHQiLAklXYfrIyImUrH0%2Fuploads%2FEFZXRI8OGX0DEklnTzsX%2Fchatbox%20on%20store.png?alt=media&#x26;token=53c02ce5-f09b-4666-bbf5-3548a440e50b" alt=""><figcaption></figcaption></figure>

### Customize chatbox

[**General**](#general)

In general settings, you can:

* Turn on/off chatbox
* Turn on chat focus mode
* Set header
* Set blocks

[**Appearance**](#appearance-setting)

In appearance settings, you can:

* Customize brand color
* Set chatbox button
* Set chatbox style
* Remove watermark

[**Advanced**](#advanced-settings)

In Advanced settings, you can:

* Set deep links
* Set display devices & pages
* Add custom code

### General settings

{% stepper %}
{% step %}

#### Turn on chatbox

{% endstep %}

{% step %}

#### Enable Chatty in theme editor

{% endstep %}

{% step %}

#### Set header

* Upload logo
* Customize your heading and description
  {% endstep %}

{% step %}

#### Turn on blocks you want to show in chatbox

There are 4 blocks in chatbox:

* Contact us: This helps you to set up all contact methods for your store. Turn it on and click **Edit** to add your contact methods.&#x20;
* Order tracking: Helps track orders (third party allowed). Learn more about [order tracking](https://help.chatty.net/others/order-tracking).
* FAQs: Pick some questions to show on first page of chatbox
* Categories: Pick some categories to show on first page of chatbox
  {% endstep %}

{% step %}

#### Add contact button

Learn how to [add contact button to your site](https://help.chatty.net/chatbox/contact-button).
{% endstep %}
{% endstepper %}

<details>

<summary>How many contact methods are supported in Chaty?</summary>

Now, Chatty support 11 contact methods:

1. Whatsapp
2. Messenger
3. Phone
4. Email
5. Instagram
6. Telegram
7. Skype
8. Line
9. Zalo
10. Tiktok
11. SMS

More methods are coming soon.

</details>

{% embed url="<https://app.arcade.software/share/96vC46oVP4qtZyducSty>" %}

### Appearance settings

{% stepper %}
{% step %}

#### Set brand colors

You can select colors from our preset or customize your own.

Or simply click **Surprise me** for inspiration.
{% endstep %}

{% step %}

#### Set chatbox button

* Select launcher
* Select or upload your own icon
* Select button size
* Select button alignment
  {% endstep %}

{% step %}

#### Set chatbox style

* Select: No navigation or Show navigation
* Set ratio of chatbox on mobile
  {% endstep %}
  {% endstepper %}

{% embed url="<https://app.arcade.software/share/zPbbOj4yZMY6ci2c83hi>" %}

### Advanced settings

{% stepper %}
{% step %}

#### Use deep links

Learn [how to use deep links](https://help.chatty.net/chatbox/deep-links).
{% endstep %}

{% step %}

#### Select which devices and pages you want to show chatbox on

* Devices: Desktop and mobile
* Pages: All pages or a specific page
  {% endstep %}

{% step %}

#### Continue as email

This helps customers keep their conversation going by email instead of live chat.

Click to **turn on.** In chatbox, customers can select **Continue on email** to keep the conversation going by their email.

<figure><img src="https://263145331-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdHQiLAklXYfrIyImUrH0%2Fuploads%2F1OwEjaJREpWPZDEpntmF%2Fcontinue%20as%20email.png?alt=media&#x26;token=0096b449-6e92-4bb9-819d-2dce49305a8a" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Add custom code

Custom CSS in advanced settings helps you to have a custom FAQs page. This required knowledge of coding. If you need any help, contact us through live chat in the app
{% endstep %}
{% endstepper %}

### Chat page settings

{% stepper %}
{% step %}

#### Welcome message

The welcome message is first displayed when visitors initiate the chat.
{% endstep %}

{% step %}

#### Conversation starter

List of questions shown in chat as suggestions for visitors.
{% endstep %}

{% step %}

#### Chat avatar

Set up which avatar will be shown in the chat
{% endstep %}

{% step %}

#### Set how customers start a chat

* Chat as guest: Need to submit a form to start chatting
* Chat as anonymous: Stay anonymous and don't need to submit a form
* Show both options

#### Pre-chat form

It helps you collect customer information if you set "chat as guest" as a way to start a chat.

You can collect: email, name and phone number.
{% endstep %}
{% endstepper %}

### Unread message counter

The message counter is a small red number that appears on your chat widget icon.&#x20;

It shows your visitors how many unread messages or welcome messages are waiting for your response.

<figure><img src="https://263145331-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdHQiLAklXYfrIyImUrH0%2Fuploads%2F1Lo45ztYi2kqiY0dgJJP%2Funread%20messages%20counter.png?alt=media&#x26;token=2aed5215-c8e5-4389-9b0e-36df9ad931a6" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
If you turning on Welcome teaser in [Automation](https://help.chatty.net/live-chat/proactive-chat), it will count welcome messages as unread messages.
{% endhint %}