---
title: "Telegram chat widget — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Kai Studio · Interactive. Start for free A fully customizable Telegram chat widget for Framer that enables instant communication with your visitors."
canonical: "https://framer.elliotli.dev/component/telegram-chat-widget"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Telegram chat widget

# Telegram chat widget

Add Telegram Chat to Framer sites

[View on Framer](https://framer.com/marketplace/components/telegram-chat-widget/?via=elliot-li)

![Telegram chat widget preview image 1](https://framer.elliotli.dev/og/component/telegram-chat-widget/562ef410252960a9/1600x1200.jpg)

## Summary

Start for free A fully customizable Telegram chat widget for Framer that enables instant communication with your visitors.

## Description

**This component is Part of the  Essential Components plugin.** Browse and insert 30+ components directly in Framer. [Start for free](https://www.framer.com/marketplace/plugins/essential-components/preview/)

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-m3g3oofb-w725jfXoyAuaBxHPG6Md1ZogksYocz)](https://www.framer.com/marketplace/plugins/essential-components/)

A fully customizable **Telegram chat widget for Framer** that enables instant communication with your visitors. Ideal for businesses and creators who want to offer fast support, answer questions, and boost engagement through Telegram messaging.

**This component is Part of the  Essential Components plugin.** Browse and insert 25+ ready-to-use components directly in Framer. [Get the Plugin](https://www.framer.com/marketplace/plugins/essential-components/preview/)

### How to Use in Framer

1.  Copy and paste the component into your Framer project.
    
2.  Add it to the **Template page** (the page that contains your Navigation and Footer) so it appears across all pages.
    
3.  Set the position to **Fixed** and adjust it to sit on the left or right side of the screen.
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-yctqk993-nFtvWw7Yzi2pmTy99eIwcnJnhdzlfa)

## Component Variants

The Telegram chat widget includes **two variants:**

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-yctqk993-OQhQY25bgFzQvbfNL4pP8wvXuEQdml)

**Closed Variant:** Displays a floating Telegram button.

**Open Variant:** Reveals the full chat widget and shows a customizable welcome message, such as “Hey there 👋 How can I help you?”. This text can be fully edited to match your tone or use case.

## Chat Behavior

When users click the **Chat on Telegram** button:

-   They are redirected to **Telegram Web** on desktop.
    
-   Or directly to the **Telegram app** on mobile
    

### Customization

**Telegram Username**: Enter your Telegram username without the @ symbol. Example: yourusername.

**Button Text:** Customize the call-to-action text, such as “Chat on Telegram”, “Contact Us”, or “Get Support”.

**Pre-filled Message:** Set the default message that appears when the chat opens. Example: “Hello! I’d like to know more about your services.”

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-yctqk993-aqMsefGA3746Yu6wSPTCLd7s556Ax8)

**Button Styling:** Customize the button’s background color (default Telegram blue #3B82F6), text color, font, border radius, and icon color.

**Alignment:** Controls where the floating button is positioned on the page. Choose **Start** when the widget is placed on the left side, or **End** when it’s placed on the right side.

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-yctqk993-5HmctIVELul7WYBXylb6zGjrrII0a2)

### Final Step

Once you’ve finished customizing the component, set the component to the **Closed variant** and publish your site.

## Use Cases

-   **E-commerce stores** can add the widget to product pages, carts, or checkout pages for instant support.
    
-   **Service businesses** can use it on landing pages for inquiries, consultations, or customer support.
    
-   **Restaurants and cafés** can handle reservations, menu questions, and order inquiries.
    
-   **Real estate businesses** can collect property inquiries and viewing requests.
    
-   **Professional services** can use it for consultations, project inquiries, and client communication.
    

Preview: [https://telegramchatwidget.framer.website/](https://telegramchatwidget.framer.website/)

## Rank history [How rankings work →](/terms#rankings)

-   All · #2967

## Details

- **Author**: Kai Studio
- **Price**: $10.00
- **Published**: 2026-01-07
- **Updated**: 2026-04-05
- **Added**: 2025-12-17
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step