> For the complete documentation index, see [llms.txt](https://en.docs.airdesk.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://en.docs.airdesk.ai/interface/administracao/espaco/widget-para-site.md).

# Widget for website

In this section, you can configure the support widget that will appear on your website.&#x20;

This widget, when filled in by a client will automatically create a case with the message and data entered. &#x20;

The configuration consists of 4 steps: Widget, Form, Blocks and Settings.&#x20;

We will cover each step individually.&#x20;

### Widget

![](/files/-MUOo_TrWaae-_Ym-Iks)

Name - The internal name of the created widget.&#x20;

Company - The company that the widget will be associated with.&#x20;

{% hint style="info" %}
To complete this step, you must have configured the [**companies**](https://en.docs.airdesk.ai/interface/administracao/espaco/empresas-filiais).&#x20;
{% endhint %}

Languages - Languages in which the support is available.&#x20;

Selected language - Main language to display.&#x20;

Avatar - Image to appear on the widget's top left corner.&#x20;

Title - Title of the widget.&#x20;

Description - Description to appear on the widget.&#x20;

Social media - Social media to appear in the widget.&#x20;

{% hint style="info" %}
To display social media, you must configure the [**company**](https://en.docs.airdesk.ai/interface/administracao/espaco/empresas-filiais).&#x20;
{% endhint %}

![](/files/-MUOott1fGFwPnj_m8Pm)

Theme - You can customize the colors of the widget to match the colors of your company on the site.&#x20;

{% hint style="info" %}
All colors inserted must be in HEX form (e.g. #000000 is equivalent to black).&#x20;
{% endhint %}

#### Configure button&#x20;

Name - Name to be displayed on the button.&#x20;

Background - Button background color in HEX format.&#x20;

Footer - Text to appear in the footer.&#x20;

###

### Form&#x20;

![](/files/-MUOp7C28oP1hZTdIgxJ)

Language selected - Language in which the form should be displayed.&#x20;

Title - Title of the form.&#x20;

Scope - Fields that may appear on the form. &#x20;

{% hint style="info" %}
Name and email are required by default.&#x20;
{% endhint %}

Active - Make the field appear on the form when active and not appear when deactivated.&#x20;

Optional - Obliges the client to fill in when on and is optional when off.&#x20;

![](/files/-MUOqkIGNC6e31naxRyh)

### Configure Subjects - Case Assignment.&#x20;

{% hint style="info" %}
In this section, you will configure who will be assigned the cases sent by the customers.&#x20;
{% endhint %}

Category - Category of the case that will be sent.&#x20;

Subject - Subject to appear in the email.&#x20;

Department - You must select the department that will receive the case.&#x20;

Responsible - Employee responsible for the case.&#x20;

{% hint style="info" %}
You must have configured the [**departments**](https://en.docs.airdesk.ai/interface/administracao/espaco/departamentos).&#x20;
{% endhint %}

Pipeline - Pipeline in which the case will be inserted.&#x20;

{% hint style="info" %}
You must have [**configured the pipelines**](https://en.docs.airdesk.ai/interface/servicos/pipelines).&#x20;
{% endhint %}

Pipeline Status - State in which the case is inserted into the pipeline.&#x20;

{% hint style="info" %}
You can add more subjects and more departments.&#x20;
{% endhint %}

![](/files/-MUOqz2bGQtiBb-U9B0n)

### Blocks&#x20;

Selected Language - Language in which the block will be presented.&#x20;

Title - Title of the block.&#x20;

Description - Block description.&#x20;

Avatar - Image to appear in the block.&#x20;

Link text - Text that will appear in the clickable link&#x20;

Link URL - Link to where the customer will be redirected when they click (ex: [www.airdesk.ai)\&#x20](http://www.airdesk.ai\)\&#x20);

Note - Note to appear near the link.&#x20;

{% hint style="info" %}
You can add more than one block.&#x20;
{% endhint %}

![](/files/-MUOrOUQPSSjpiP0gfgA)

### Settings&#x20;

Timetable - It displays in the widget the company's working hours.&#x20;

Contacts - It displays in the widget the main contacts of the company.&#x20;

{% hint style="info" %}
You must have configured the [**company**](https://en.docs.airdesk.ai/interface/administracao/espaco/empresas-filiais).&#x20;
{% endhint %}

Domains allowed - In this field, you must add your company's domain(s) (e.g. [www.airdesk.ai).\&#x20](http://www.airdesk.ai\).\&#x20);

![](/files/-MUOrWNhbJAGVCWaZRm5)

When you finish editing the form, you should save it.&#x20;

In the panel, you should see the form you just created. It's now time to add it to your website or platform.&#x20;

{% hint style="danger" %}
Advanced difficulty step. If you don't know how to do this step, send this link to your website developer.&#x20;
{% endhint %}

You can now copy the snippet, which will look like the one below and add it just before the \</head>.&#x20;

![](/files/-MUOreKrGYA0zArR_h-i)
