# Website Chat

## Introduction

The Website Chat app allows you to manage and automate responses to incoming chat messages on your website via the [Chatwidget](https://manuals.dialox.ai/studio/channels/chat-widget) and [WhatsApp](https://manuals.dialox.ai/studio/channels/whatsapp) channels. It supports automatic responses, escalation to human agents, and deflection to WhatsApp for continued engagement.

## Getting Started

### Channel Requirements

The Website Chat requires a Chat widget channel to be deployed on your own website. The WhatsApp channel is optional to handle chat conversations. 

* [**Chat widget**](https://manuals.dialox.ai/studio/channels/chat-widget)
* [**WhatsApp**](https://manuals.dialox.ai/studio/channels/whatsapp) \
  Optional but recommended for fallback options.

### Installation Process

{% stepper %}
{% step %}

### Define opening hours

The app uses your [opening hours](https://manuals.dialox.ai/settings/app-settings/opening-hours) to determine whether or not you are online. \
Via 'Settings - Opening hours' you can modify the availability of your bot.

<img src="https://3356808761-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEBQHGJABNTj5ISSOTRxM%2Fuploads%2FwdhcNBS1ti6iU2iqPgvZ%2Fimage.png?alt=media&#x26;token=74ea9db4-83d2-47be-8022-8946886d8e7b" alt="" data-size="original">
{% endstep %}

{% step %}

### Enable the chat channel

Go to 'Configure - Channels' and activate your [Chat widget](https://manuals.dialox.ai/studio/channels/chat-widget) channel.&#x20;
{% endstep %}
{% endstepper %}

## Using the Website Chat

### App Settings

The only required settings for this app are the opening hours.

### Roles

* **Agent**
* **Operator**
* **Content Manager**

### App Workflow

The app is preconfigured with three flows:

* **Playbook**: Configure initial greeting and prompts to understand user intent.
* **Auto reply Flow**: Set up automatic responses and escalation behavior.
* **WhatsApp redirect Flow**: Redirect users to WhatsApp if no agent is available on other channels.

#### Playbook

Any incoming chat messages will be handled by the default Playbook found in the Flows section.

<figure><img src="https://3356808761-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEBQHGJABNTj5ISSOTRxM%2Fuploads%2FTF9rVsyx5BKEjClkhqI8%2FScreenshot%202024-10-02%20at%2010.52.07.png?alt=media&#x26;token=c2646a9b-2a67-4892-bd64-5698eea518c8" alt=""><figcaption></figcaption></figure>

The playbook will open the conversation on Web using a [say node](https://manuals.dialox.ai/studio/flows/nodes/say) and a prompt in the form of an [iterate node](https://manuals.dialox.ai/studio/flows/nodes/iterate-iterate) in order to elicit the user intention. You can see this by inspecting the little badges at the [main](https://manuals.dialox.ai/studio/flows/triggers) entry point. The prompt will try to answer the question (in case no questions are trained, the unknown flow will trigger the auto\_reply flow).

However, on WhatsApp the conversation is never started by the bot (unless a template message is sent) but only by a Contact. Therefore, the auto\_reply will kick in directly when a message is sent that isn't automatically replied by a [dialog trigger](https://manuals.dialox.ai/studio/flows/nodes/flow-control-invoke-dialog). The auto\_reply flow is invoked by the node [Go to flow](https://manuals.dialox.ai/studio/flows/nodes/flow-control-go-to-flow).

<figure><img src="https://3356808761-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEBQHGJABNTj5ISSOTRxM%2Fuploads%2Fol7vcn3YxFP5CNsUTdu0%2Fimage.png?alt=media&#x26;token=67eb3daf-b7c4-46ce-b78c-a8c1a7dec4c4" alt=""><figcaption></figcaption></figure>

#### Auto reply

The Auto reply flow is configured to escalate to a human employee. You can also use this flow to ask some more preliminary or qualifying questions before escalating to a human. To change the behavior, go to Flows and open the Auto reply flow.

The default Auto reply flow will only explain the fact that the message is escalated to a human. When closed or when no agents are available, it can display another message. See the [Smart Escalate node](https://manuals.dialox.ai/studio/flows/nodes/escalate-smart) for explanation about the behavior of this node.

<figure><img src="https://3356808761-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEBQHGJABNTj5ISSOTRxM%2Fuploads%2FmH5KiZG9PMExG1cLLCT5%2Fimage.png?alt=media&#x26;token=5c6d5c67-c9f9-4bb1-bba3-9415488b2133" alt="" width="272"><figcaption></figcaption></figure>

When no agent is available, it will continue to the WhatsApp redirect flow.

#### WhatsApp redirect

It is not possible to re-engage users on the Chat widget or PWA channels, so the WhatsApp redirect flow will trigger on those channels. This is indicated by the little badges that are displayed next to the entry point.

We try to redirect the user to WhatsApp for easy re-engagement. The [Show WhatsApp link node](https://manuals.dialox.ai/studio/flows/nodes/show-whatsapp-link) needs to be properly configured in order for it to work.

## FAQ

<details>

<summary>Can the bot handle multiple channels?</summary>

Yes, the bot manages chats via both Web and WhatsApp channels.

</details>

<details>

<summary><strong>How can I customize responses?</strong></summary>

Adjust the [Say](https://manuals.dialox.ai/studio/flows/nodes/say) and [Prompt](https://manuals.dialox.ai/studio/flows/nodes/iterate-iterate) nodes in the Playbook flow.

</details>

### Languages

The app will determine the language of the user based on their phone number. The app falls back on the default language of the app in case the language cannot be determined (e.g. French or Dutch in Belgium).

It's possible to add an "Ask: Language" node to allow users to switch to their preferred language.

### Opening hours

The app will let the user know whether or not they are reaching out within office hours. This helps set the expectation on how long to wait for a reply.

## Resources

* [say](https://manuals.dialox.ai/studio/flows/nodes/say "mention")
* [iterate-iterate](https://manuals.dialox.ai/studio/flows/nodes/iterate-iterate "mention")
* [whatsapp](https://manuals.dialox.ai/studio/channels/whatsapp "mention")
* [chat-widget](https://manuals.dialox.ai/studio/channels/chat-widget "mention")
* [opening-hours](https://manuals.dialox.ai/settings/app-settings/opening-hours "mention")