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.
Copy and paste the component into your Framer project.
Add it to the Template page (the page that contains your Navigation and Footer) so it appears across all pages.
Set the position to Fixed and adjust it to sit on the left or right side of the screen.
The Telegram chat widget includes two variants:
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.
When users click the Chat on Telegram button:
They are redirected to Telegram Web on desktop.
Or directly to the Telegram app on mobile
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.”
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.
Once you’ve finished customizing the component, set the component to the Closed variant and publish your site.
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.
Framer Essentials
