> For the complete documentation index, see [llms.txt](https://docs.graspil.com/en/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.graspil.com/en/app/landings.md).

# Landings (tlin.cc redirect)

### 1. What it is and why you need it

When you run ads pointing to a Telegram bot or channel, a plain link like `t.me/your_bot` doesn't let you:

* count how many people actually clicked the ad before they tapped "Start" in Telegram;
* pass the ad campaign's UTM tags into analytics services (Google Analytics, Yandex.Metrica) — Telegram strips them;
* show the user anything in between: a logo, a choice of messenger, a warning that Telegram is blocked.

A **landing** solves these problems. It's a short link like `tlin.cc/your_alias` that you put in your ads instead of a direct link to the bot. When a user clicks it:

1. An intermediate page opens (or an instant redirect happens — depends on the settings).
2. The passed tags and parameters are saved and attached to the user once they enter the bot/channel.
3. If analytics services are connected, click data is sent to them.
4. The user is redirected to Telegram (or to any other messenger/site via a button).

{% hint style="info" %}
You can create **several landings for one resource** (a bot or a channel) — for example, a separate landing for each ad campaign or platform.
{% endhint %}

**What you can do with landings:**

* **Carry UTM tags** from the ad link into your bot or channel — the traffic source is never lost.
* **Connect end-to-end analytics** — Google Analytics, Yandex.Metrica, plus your own custom scripts.
* **Check whether Telegram is reachable** for the user, and offer an alternative (WhatsApp, a website, etc.) if it's blocked.
* **Customize the look** of the page: logo, texts, theme (light/dark), buttons.
* **Collect extra data** about the click: time zone, referrer, browser language, and your own custom fields.

{% hint style="warning" %}
Landings are a paid feature, available on a paid plan.
{% endhint %}

***

### 2. Key concepts

| Term                      | What it means                                                                                                   |
| ------------------------- | --------------------------------------------------------------------------------------------------------------- |
| **Landing**               | A single short link on `tlin.cc` with its own settings: address, design, buttons, etc.                          |
| **Address (slug, alias)** | The part of the link after `tlin.cc/` — what comes after the slash, e.g. `tlin.cc/`**`promo1`**                 |
| **Intermediate page**     | The page with a logo, text and (optionally) messenger-choice buttons that the user sees before being redirected |
| **Direct redirect**       | A mode with no intermediate page: the user goes straight to Telegram, with no analytics or design               |
| **Resource**              | The bot or channel the landing is attached to                                                                   |

***

### 3. Where to find it and how to create a landing

The section lives in your dashboard: **Landings** (in the settings menu).

1. Open the **Landings** section and click **"Create landing"**.
2. If you have several bots/channels, choose which **resource** the new landing belongs to.
3. Choose the **link address**:

   * **Confirmed username** — if the bot/channel has a confirmed public username, you can use it as the address (the link will match the username).
   * **Random** — the system generates a short random address for you.

   <div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p>The address can't be typed freely — this is intentional, to avoid confusion and link spoofing. Only the resource's confirmed username or a system-generated code are allowed.</p></div>
4. Toggle **"Show landing page"** on or off:
   * **On** — the user sees a styled intermediate page (with analytics, buttons, etc.).
   * **Off** — an instant redirect to Telegram, with no page and no analytics.
5. Configure the page's design and behavior (see below).
6. Click **"Create"**.

The finished link shows up as a card in the list — copy it with the **"Copy"** button and use it in your ads right away.

***

### 4. Configuring the intermediate page

If **"Show landing page"** is on, the following settings are available.

#### Logo

Upload an image (PNG/JPG/WEBP/GIF, up to 2 MB) to show at the top of the page. If no logo is uploaded, it simply isn't shown.

#### Behaviour

**Redirect** — how the transition to Telegram happens:

* **Automatic** — the user is redirected right after the page loads, with no extra action needed.
* **On button** — the page shows buttons (Telegram and, if added, other messengers/sites), and the user decides where to go.

**Theme** — the page's look: **dark**, **light**, or **auto** (follows the user's device setting).

**Telegram availability check** — before redirecting, the page silently checks whether Telegram is reachable for the user.

{% hint style="info" %}
**Why this matters:** in some countries and networks, Telegram is blocked. If the check shows it's unreachable, instead of a dead-end redirect the user sees a hint to enable a VPN, plus alternative buttons (e.g. WhatsApp). If Telegram is reachable, "Automatic" mode does the usual redirect, while "On button" mode still shows the button picker, just without the VPN hint.
{% endhint %}

#### Analytics and scripts

To send click data to analytics services, fill in:

* **Yandex.Metrika ID**
* **Google Analytics ID**

If counters are set, client identifiers (`ym_uid`/`ga_uid`) are also sent to the server — this is needed for end-to-end analytics, so an ad click can be linked to the user's later actions.

You can also insert **your own custom scripts** — arbitrary code for the page's `<head>` and `<body>`. Useful if you use a different analytics service or a tracking pixel.

#### Extra fields

You can enable collecting extra data about the click:

* The user's **time zone**;
* The **referrer** — where the user came from;
* The **browser language**.

You can also define **static fields** — key → value pairs added to every click on this landing (for example, to mark which platform or banner the traffic came from).

#### Messenger buttons

If **"On button"** mode is enabled (or you simply want extra contact options), you can add buttons:

* **Type** — Telegram, WhatsApp, Max, Viber, VK, a website, or "other" (a custom link).
* **Label** — the button's text.
* **Description** — a short note under the label.
* **Icon** — for the "other" type, you can pick an icon from a built-in catalog or upload your own image.

{% hint style="info" %}
The Telegram button is added automatically — no need to create it yourself; its URL comes from the redirect itself.
{% endhint %}

#### Preview

The editor has a live preview — it shows the page exactly as the user will see it, reflecting all current settings (logo, theme, buttons, texts). The actual redirect and analytics don't run in the preview.

#### Texts

Every label on the page (title, hints, button text) can be overridden per language — pick a language from the dropdown and type your text. Leaving a field empty falls back to the default translation.

{% hint style="info" %}
To override a specific button's text, save the button first (after the first save it gets its own id, and the "Texts" section lets you set a translation just for that button).
{% endhint %}

***

### 5. Embedding on your own site

#### What it's for

If you already have your own landing page (built with a website builder or by a developer) and want to keep your own design while still getting the same redirect logic as the `tlin.cc` page, you can embed it directly into your page. This is handy when:

* you already have a polished page design and don't want to rebuild it on `tlin.cc`;
* you need your own domain in the address bar (your own page instead of `tlin.cc/...`);
* the landing is just part of a bigger page (there's other content besides the Telegram redirect).

#### How it works

Technically, the redirect runs as a small widget — a piece of JavaScript code that does the same job as the `tlin.cc` page:

1. It loads the `tlin.js` script.
2. It starts the widget in the spot you placed on the page.
3. If enabled, it checks whether Telegram is reachable for the user.
4. It contacts the tlin server (at the address set in the code) to find out where exactly to redirect the user — this destination is built from your landing's settings (taking UTM tags and other parameters into account).
5. It redirects the user — automatically, or after they click a button, depending on the selected mode.

#### How to use it

1. Open the editor for the landing you need and go to the **"Embed on your site"** section.
2. Copy the ready-made code with the **"Copy"** button.
3. Paste this code into your page's HTML, at the spot where the redirect block should appear.

The code looks roughly like this:

{% code title="Example snippet to paste" overflow="wrap" %}

```html
<div id="tlin-root"></div>
<script src="https://tlin.cc/js/tlin.js"></script>
<script>
  Tlin.init({
    "username": "promo1",
    "apiBase": "https://tlin.cc",
    "mode": "auto",
    "theme": "dark"
  });
</script>
```

{% endcode %}

* `<div id="tlin-root"></div>` is the spot on the page where the widget renders its markup (for example, buttons, if "On button" mode is enabled). With "Automatic" mode and no buttons, this block can stay empty — it doesn't need to be visible.
* The `Tlin.init({...})` call carries the settings filled in automatically from your landing: the landing's address (`username`), the tlin server address (`apiBase`), the redirect mode (`mode`) and the theme (`theme`). If the Telegram availability check is enabled, `telegramCheck` is added to the code too.

{% hint style="info" %}
You need to copy the code again if you change the redirect mode, the theme, or turn the Telegram check on/off in the landing editor — the old code won't pick up those changes by itself.
{% endhint %}

#### What carries over into the code, and what doesn't

The ready-made code automatically includes: the **landing's address**, the **redirect mode** (auto/on button), the **theme**, and the **Telegram availability check**.

{% hint style="warning" %}
The logo, text overrides, analytics (Yandex.Metrica/Google Analytics, custom scripts) and messenger buttons configured in the editor **are not included in the generated code automatically** — they only apply on the `tlin.cc` page itself. This is intentional: on your own site you already have your own design and, most likely, your own analytics, so there's no need to carry over the `tlin.cc` page's styling.
{% endhint %}

If you need the logo, buttons, and overridden texts on the embedded widget too, they can be added manually to the `Tlin.init({...})` code (the same way they're stored in the landing's settings). This requires basic JavaScript/HTML knowledge — if that's not something you can do yourself, ask your developer or contact support.

***

### Frequently asked questions

**Can I make several different links for different ad campaigns?**\
Yes, you can create as many landings as you need for the same bot or channel — each with its own address and its own settings.

**What happens if I turn off the landing page display?**\
The link becomes an instant technical redirect — no design, no buttons, no analytics. Useful if you don't need an intermediate page and only care about the link itself.

**Can I use my own domain instead of tlin.cc?**\
Not at the moment, but you can embed the redirect widget on your own site using the ready-made code (the "Embed on your site" section).

**Are landings available for free?**\
No, this is a paid-plan feature.