[Intum Help](https://intum.com/help.md) / [Helpdesk](https://intum.com/help/helpdesk.md)

# [Support Widget](https://intum.com/help/helpdesk/support-widget.md)

## Widget for Clients

The Support Widget is a JavaScript component that you embed on your website. It allows clients to submit [tickets](obsluga-zgloszen) and track their status without leaving your application.

## How It Works

1. You create a [desk](desk) in the Helpdesk module
2. You copy the widget code from the desk settings
3. You paste it on your website
4. Clients can submit tickets directly from your site

## Embedding the Widget on a Page

To add the widget to your site, paste the following code before the closing `</body>` tag:

```html
<div id="intum-helpdesk-widget"></div>
<script>
  var IntumHelpdeskWidget = {
    account_url: "https://youraccount.intum.pl",
    desk_token: "DESK_TOKEN",
    locale: "en"
  };
</script>
<script src="WIDGET_URL"></script>
```

You'll find `account_url` and `desk_token` in the [desk](desk) settings, in the Widget tab.

### Client Data

If your application knows the logged-in user's data, pass it in the configuration - the widget will automatically fill in the form and link the ticket to the client:

```html
<script>
  var IntumHelpdeskWidget = {
    account_url: "https://youraccount.intum.pl",
    desk_token: "DESK_TOKEN",
    locale: "en",
    client_external_id: "CRM-123",
    client_email: "john@company.com",
    client_name: "John Smith",
    client_url: "https://client.fakturownia.pl",
    client_plan: "Premium",
    user_external_id: "USR-456",
    user_email: "user@company.com",
    user_name: "User",
    user_phone: "+48123456789",
    signature: "HMAC_SIGNATURE"
  };
</script>
```

The `client_external_id` field is key - without it, the client won't see a list of their previous tickets.

## URL Parameters

The widget responds to parameters in the page URL. This lets you create links that immediately open the widget with a pre-filled form or a specific ticket.

### Opening a Specific Ticket

The `n` parameter opens the ticket with the given number:

```
https://your-site.com/help?n=2616-2
```

The widget will load and immediately show the details of ticket #2616-2 (if it belongs to the given client). Useful, e.g., in email notifications - the link leads straight to the ticket.

### Pre-filling the Form

Parameters `title`, `content`, `priority`, and `c` let you open the widget with a ready-made new ticket form:

| Parameter | Description |
|-----------|-------------|
| `title` | Ticket title |
| `content` | Ticket content |
| `priority` | Priority: `low`, `normal`, `high`, `urgent` |
| `c` | Category code - sets the ticket category |

If any of these parameters is provided, the widget immediately opens the new ticket form (instead of the list).

Example - a link to report a bug with a pre-filled title and category:

```
https://your-site.com/help?title=Login+problem&c=bugs&priority=high
```

Parameters can be combined freely. E.g., just `c=billing` opens the form with the billing category set, and `title=Question` opens the form with the title filled in.

## Widget Capabilities

- **Ticket form** - the client provides a title, content, priority, and optionally a category
- **Ticket list** - the client sees their previous tickets and their statuses
- **Ticket details** - the client can view team responses
- **Comments** - the client can reply to a ticket
- **Attachments** - ability to add files (up to 10 MB)

## Client Identification

The widget can automatically identify clients based on data passed in the embed code:

- **Email and name** - pre-filling the form
- **Client ID** - linking to a client in CRM
- **Plan** - information about the client's plan

If client data is not provided, the widget will display an identification form.

## Security

The widget supports HMAC-SHA256 verification - when a desk has the security level set to "signature", each request must contain a valid signature computed from the desk's secret key. This prevents impersonation of clients.

## Controlling Widget Visibility

In the [desk](desk) settings (Widget tab) you can control which pages the widget appears on. This way you don't need to modify the code on the page - everything is configured from the Intum panel.

### Show Rules (URL Show Rules)

A list of URL patterns where the widget **should appear**. If specified, the widget will appear **only** on pages matching the patterns. Each pattern on a separate line.

Example:
```
https://example.com/dashboard*
*/app/*
```

The widget will appear only on pages starting with `/dashboard` or containing `/app/` in the path.

### Hide Rules (URL Hide Rules)

A list of URL patterns where the widget **will not appear**. Each pattern on a separate line.

Example:
```
*/admin/*
*/settings*
*/login
```

The widget will be hidden on admin pages, in settings, and on the login page.

### How Patterns Work

- `*` replaces any string of characters
- Patterns are matched against the full page URL
- Hide rules take priority over show rules
- If you don't specify any rules, the widget appears on all pages

## Customization

- **Color** - customize the widget color to match your brand (set in the [desk](desk))
- **Help text** - add informational text displayed above the form
- **Categories** - the client can choose a ticket category (each can have its own help text)
- **Language** - the widget supports: Polish, English, Ukrainian, German, French, Spanish, Czech, Slovak

## Public Ticket Link

Each ticket has a unique token and public URL - you can send it to a client via email. The client can use it to view the ticket and add comments without logging in.