> ## Documentation Index
> Fetch the complete documentation index at: https://docs.activeviam.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Share dashboards with URL filters

Atoti UI reads a `filters` parameter from the dashboard URL's hash.
When present, the URL filters are merged into the loaded dashboard's pinned filters and the dashboard opens marked as unsaved.
This is useful for sharing a dashboard with specific filter values applied, instead of saving a filtered copy.

## What happens when the link is opened

* Filters in the URL replace any existing pinned filter on the same `(dimensionName, hierarchyName)`.
  If the URL contains multiple filters for the same hierarchy, all are applied.
  The cube combines them at query time.
* The dashboard opens marked as unsaved.
  The recipient can save their own copy using **File > Save as**.
* If the `filters` parameter is missing or empty, the saved dashboard loads unchanged.
* If the `filters` parameter is malformed, the dashboard loads without URL filters.
  A red banner notifies the recipient: "The filters from this link could not be applied. The dashboard is shown without them."
  Diagnostic detail is written to `console.warn`.

## URL format

A `filters` URL parameter is added to the URL of a dashboard as follows:

```
https://example.com/#/dashboard/<id>?filters=<encoded>
```

The encoded value is produced from a [`Filter<"deserialized">[]`](./reference/types#filter) through the following pipeline:

1. Map [`serializeFilter`](./reference/functions#serializefilter) over the array to get a `Filter<"serialized">[]`.
2. Call `JSON.stringify` on the resulting array.
3. UTF-8 encode the JSON string with `TextEncoder`.
4. gzip-compress the bytes using `CompressionStream("gzip")` (or `fflate`'s `gzipSync` in environments without native stream support).
5. Base64-encode the compressed bytes using `btoa`, then convert to URL-safe form: replace `+` with `-`, `/` with `_`, and strip trailing `=` padding.

## How to construct the URL

The following TypeScript function, `encodeURLFilters`, implements the encoding pipeline.
It accepts deserialized filters and returns the encoded string ready to append to a dashboard URL.

<Note>
  The snippet uses the browser's native
  [`CompressionStream`](https://developer.mozilla.org/en-US/docs/Web/API/CompressionStream)
  (Chrome 80+, Firefox 113+, Safari 16.4+). In Node.js or older browsers, swap
  the compression block for [`fflate`](https://www.npmjs.com/package/fflate)'s
  `gzipSync`.
</Note>

```typescript theme={"languages":{"custom":["/engine/python-sdk/0.9/languages/pycon.tmLanguage.json"]}}
import { type Filter, serializeFilter } from "@activeviam/atoti-ui-sdk";

/**
 * Encodes an array of filters as a URL-safe string for the `filters` hash parameter.
 * The pipeline is: serialize → JSON → gzip → URL-safe Base64.
 */
async function encodeURLFilters(
  filters: Filter<"deserialized">[],
): Promise<string> {
  const json = JSON.stringify(filters.map(serializeFilter));
  const bytes = new TextEncoder().encode(json);

  const source = new ReadableStream({
    start(controller) {
      controller.enqueue(bytes);
      controller.close();
    },
  });
  const compressedBuffer = await new Response(
    source.pipeThrough(new CompressionStream("gzip")),
  ).arrayBuffer();
  const compressed = new Uint8Array(compressedBuffer);

  let binary = "";
  for (const byte of compressed) {
    binary += String.fromCharCode(byte);
  }
  // URL-safe Base64 replaces `+` with `-` and `/` with `_`, and strips `=` padding.
  return btoa(binary)
    .replaceAll("+", "-")
    .replaceAll("/", "_")
    .replaceAll("=", "");
}

// Build a shareable dashboard URL.
async function buildDashboardURL(
  baseURL: string,
  dashboardId: string,
  filters: Filter<"deserialized">[],
): Promise<string> {
  const encoded = await encodeURLFilters(filters);
  return `${baseURL}/#/dashboard/${dashboardId}?filters=${encoded}`;
}
```

See also [Share content](../user-guide/create-a-dashboard/share-content) for sharing a saved dashboard through the **Share** popup.