> 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 Code to activate support widget on your website In this section, you can configure the support widget that will appear on your website. This widget, when filled in by a client will automatically create a case with the message and data entered. The configuration consists of 4 steps: Widget, Form, Blocks and Settings. We will cover each step individually. ### Widget ![](https://4075187781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MMGy7hswNWyyiXACRWv%2F-MUOlrKZwdEDPjJ2G__J%2F-MUOo_TrWaae-_Ym-Iks%2Fimage.png?alt=media\&token=3e508fcd-09be-43b8-b466-562d11936a37) Name - The internal name of the created widget. Company - The company that the widget will be associated with. {% hint style="info" %} To complete this step, you must have configured the [**companies**](https://en.docs.airdesk.ai/interface/administracao/espaco/empresas-filiais). {% endhint %} Languages - Languages in which the support is available. Selected language - Main language to display. Avatar - Image to appear on the widget's top left corner. Title - Title of the widget. Description - Description to appear on the widget. Social media - Social media to appear in the widget. {% hint style="info" %} To display social media, you must configure the [**company**](https://en.docs.airdesk.ai/interface/administracao/espaco/empresas-filiais). {% endhint %} ![](https://4075187781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MMGy7hswNWyyiXACRWv%2F-MUOlrKZwdEDPjJ2G__J%2F-MUOott1fGFwPnj_m8Pm%2Fimage.png?alt=media\&token=3693aa35-0c11-4825-984e-8132a900c70b) Theme - You can customize the colors of the widget to match the colors of your company on the site. {% hint style="info" %} All colors inserted must be in HEX form (e.g. #000000 is equivalent to black). {% endhint %} #### Configure button Name - Name to be displayed on the button. Background - Button background color in HEX format. Footer - Text to appear in the footer. ### ### Form ![](https://4075187781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MMGy7hswNWyyiXACRWv%2F-MUOlrKZwdEDPjJ2G__J%2F-MUOp7C28oP1hZTdIgxJ%2Fimage.png?alt=media\&token=b9afeb20-f77f-41c7-99b6-ec230e891e12) Language selected - Language in which the form should be displayed. Title - Title of the form. Scope - Fields that may appear on the form. {% hint style="info" %} Name and email are required by default. {% endhint %} Active - Make the field appear on the form when active and not appear when deactivated. Optional - Obliges the client to fill in when on and is optional when off. ![](https://4075187781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MMGy7hswNWyyiXACRWv%2F-MUOlrKZwdEDPjJ2G__J%2F-MUOqkIGNC6e31naxRyh%2Fimage.png?alt=media\&token=154dd936-a9f0-4928-9b6c-a8de5eb4fdd7) ### Configure Subjects - Case Assignment. {% hint style="info" %} In this section, you will configure who will be assigned the cases sent by the customers. {% endhint %} Category - Category of the case that will be sent. Subject - Subject to appear in the email. Department - You must select the department that will receive the case. Responsible - Employee responsible for the case. {% hint style="info" %} You must have configured the [**departments**](https://en.docs.airdesk.ai/interface/administracao/espaco/departamentos). {% endhint %} Pipeline - Pipeline in which the case will be inserted. {% hint style="info" %} You must have [**configured the pipelines**](https://en.docs.airdesk.ai/interface/servicos/pipelines). {% endhint %} Pipeline Status - State in which the case is inserted into the pipeline. {% hint style="info" %} You can add more subjects and more departments. {% endhint %} ![](https://4075187781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MMGy7hswNWyyiXACRWv%2F-MUOlrKZwdEDPjJ2G__J%2F-MUOqz2bGQtiBb-U9B0n%2Fimage.png?alt=media\&token=03b41e86-b6de-4d8a-8a03-77a37a70346a) ### Blocks Selected Language - Language in which the block will be presented. Title - Title of the block. Description - Block description. Avatar - Image to appear in the block. Link text - Text that will appear in the clickable link Link URL - Link to where the customer will be redirected when they click (ex: [www.airdesk.ai)\ ](http://www.airdesk.ai\)\ ); Note - Note to appear near the link. {% hint style="info" %} You can add more than one block. {% endhint %} ![](https://4075187781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MMGy7hswNWyyiXACRWv%2F-MUOlrKZwdEDPjJ2G__J%2F-MUOrOUQPSSjpiP0gfgA%2Fimage.png?alt=media\&token=cba3db9b-0117-4530-8b49-3c6d8c702d13) ### Settings Timetable - It displays in the widget the company's working hours. Contacts - It displays in the widget the main contacts of the company. {% hint style="info" %} You must have configured the [**company**](https://en.docs.airdesk.ai/interface/administracao/espaco/empresas-filiais). {% endhint %} Domains allowed - In this field, you must add your company's domain(s) (e.g. [www.airdesk.ai).\ ](http://www.airdesk.ai\).\ ); ![](https://4075187781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MMGy7hswNWyyiXACRWv%2F-MUOlrKZwdEDPjJ2G__J%2F-MUOrWNhbJAGVCWaZRm5%2Fimage.png?alt=media\&token=681b5a3c-0a63-4e42-a272-690871582197) When you finish editing the form, you should save it. In the panel, you should see the form you just created. It's now time to add it to your website or platform. {% hint style="danger" %} Advanced difficulty step. If you don't know how to do this step, send this link to your website developer. {% endhint %} You can now copy the snippet, which will look like the one below and add it just before the \. ![](https://4075187781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MMGy7hswNWyyiXACRWv%2F-MUOlrKZwdEDPjJ2G__J%2F-MUOreKrGYA0zArR_h-i%2Fimage.png?alt=media\&token=1de72f5b-654d-485f-b00f-cc679e959cd5)