# Link Web Chat to a Flow

When a Web Chat widget is connected to a Chat Flow node, it opens up the power of a workflow for a web-based experience. 

**How to link Web Chat to a Flow**

1. In Chat Flow, select the production environment.
2. Click on the ‘Routing’ keyword under ‘Configuration’, and then select the Web Chat icon. If the icon is not visible it will need to be added via an admin interface – reach out to the Web Chat product manager for assistance. 

<figure><img src="/files/c05cidHik6UJecGmgr63" alt=""><figcaption></figcaption></figure>

3. In the first column, titled “API ID, paste the widget id (received as part of the setup), and select the flow node, and starting position.&#x20;
4. Save the details and confirm using the Web Chat widget that the flow is returning content as expected.

**How to add a keyword**&#x20;

Using a keyword is a convenient way to target a specific workflow for a web-based experience.&#x20;

1. In Chat Flow, select the production environment.
2. Click on the ‘Keywords’ option under ‘Configuration’, and then select the Web Chat icon.  If the icon is not visible it will need to be added via an admin interface – reach out to the Web Chat product manager for assistance.&#x20;

<figure><img src="/files/6JSOJss2JsYJ633MVYnz" alt=""><figcaption></figcaption></figure>

3. Click the “New Keyword Group”, and type the relevant keyword into the text box. Next, select the flow node and starting position.&#x20;
4. Save the details and confirm using the Web Chat widget that the flow is returning content as expected when using the keyword.

**How to display a menu node as list buttons**&#x20;

There are some settings (e.g. for menus) for the Web Chat channel to make it display more appropriately:

* Reply Buttons (less than 5 options)
* List buttons (less than 10 options)
* Numbered lists (10 or more)&#x20;

<figure><img src="/files/bQQDf9NX3kMPmVILyTfA" alt=""><figcaption></figcaption></figure>

**Adding Chat Desk**&#x20;

Adding a [Chat Desk node](/chat-flow/user-facing-nodes/product-nodes/chat-desk-node.md) to the relevant flow will automatically enable the powerful agent desk features to be available via Web Chat.  When doing this, be sure  to select the correct sandbox and production keys.

**Adding Clickatell AI**

Adding a [Clickatell AI node](/chat-flow/user-facing-nodes/product-nodes/clickatell-ai-node.md) to the relevant flow will make the AI assistant available on Web Chat.  Ensure that the correct assistant's details are selected when doing this.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.clickatell.com/chat-flow/channel-capabilities/use-web-chat-with-chat-flow/link-web-chat-to-a-flow.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.