> For the complete documentation index, see [llms.txt](https://docs.suvvy.ai/en/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.suvvy.ai/en/channels/chaty-dlya-saita/suvvy-widget.md).

# Suvvy Widget

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

## Connection and Setup

The widget establishes a connection with an agent, which must be created and configured in advance, with the required information uploaded to its knowledge base.

{% hint style="info" %}
Please note that you must have access to the website where you are integrating the widget, as you will need to embed a script into the website’s code.
{% endhint %}

1. Go to the **“Channels”** tab and the **“Chats for the website”** section in the agent that needs to be connected to the widget, then select **“Suvvy Widget”**.

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

2. In the **“Connection”** tab, enter the domain of the website to which the integration will be made, then click **“Connect”**.

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

3. A connection code will be generated in the tab:

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

A separate field contains the script code that must be inserted into the website’s section; this is typically done in the index.html file.\
After completing all configuration steps, click **“Save”**.

If needed, you can temporarily disable bot responses using the **“Agent responses”** toggle without disabling the widget.

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

## Widget Customization

In the **"Widget Settings"** tab, you can change how the widget is displayed on the website and adjust the behavior of the chat window.

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

### Display name for agent messages

The name that will be displayed in the widget when an Agent responds to the customer.

For example: John, Suvvy.

### Display name for operator messages

The name that will be displayed when an employee responds in the dialogue.

For example: Operator, Administrator, Manager.

### Link to Telegram, WhatsApp, Max

Allows you to add a button in the widget that redirects to a messenger.

To display the button in the widget:

1. Enable the toggle for the required messenger.
2. Paste the messenger link.

How it looks on the website:

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

### Automatic widget expansion and Open the widget automatically only once

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

The **"Add automatic widget expansion"** setting opens the chat window automatically after the website loads.

If this setting is enabled, you can specify the delay after which the widget will expand.

If  **"Open the widget automaticall only once"** is enabled, the widget will automatically expand only once for the user. This helps avoid annoying visitors with the chat reopening every time they navigate through the website.

The **"Automatically reveal widget after (seconds)"** setting sets the delay before the widget automatically expands.

The value is specified in seconds.

For example, if you set it to 30 the widget will open 30 seconds after the user enters the website.

### Widget colors, Agent and Employee avatar

In the settings, you can customize:

* the header background color;
* the header text color;
* the icon color.

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

You can upload an image that will be displayed as the bot’s or the employee avatar in the widget.

To upload it, click **"Upload"** in the "**Upload agent's avatar image"** or **"Upload employee's avatar image"** section.

### Welcome messages

In the **"Welcome messages"** tab, you can configure the text that the user will see when opening the widget.

A welcome message helps immediately explain to the user where they are and how the bot can help them.

For example:

```
Hello! Please type your question, and I will help you figure it out.
```

or

{% code overflow="wrap" %}

```
Hello! I am a virtual assistant. I can help you with services, pricing, and terms of cooperation.
```

{% endcode %}

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

### Widget preview

In the **"Widget preview"** tab, you can see how the widget will look on the website.

The preview displays the current settings:

* agent and operator names;
* header, text, and icon colors;
* avatars;
* buttons for redirecting to Telegram, WhatsApp, or Max;
* welcome messages;
* the appearance of the chat window.

Use the preview before publishing changes to check how the widget will look for users on the website.

After making changes to the widget settings, click **Save**, then check the result in the **"Widget preview"** tab.

You can also **reset** the widget to its default settings.

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

## CRM Interaction

### AmoCRM

#### Perform actions by connecting the amoCRM integration

Connect amoCRM in the **“Integrations”** section. After that, you will be able to perform actions in the CRM.

#### Alternative method of working with amoCRM.

To create deals in amoCRM, you can use a Google Sheet.

1. Create a Google Sheet where the information required to create a deal will be entered.
2. Connect and configure the form filling in your bot. For more details on how to set up sheet filling, see the article **“Data recording/editing”**. Configure the sheet to store the data required for creating a deal.
3. The same sheet is then connected to amoCRM as a source of deals in the pipeline.

### Bitrix24

Creating a lead, deal, and other actions can be configured via API using the **“Webhook”** action. For details on how to use this action, see the article [“Webhooks”](/en/workflows/veb-khuki.md).