Among many social media messenger services, Telegram has become a rapidly growing instant messaging service with over one billion monthly users.
In a previous article, we shared a few tools to create embeddable live chat widgets for websites that support multiple channels, such as WhatsApp, Instagram, Viber, WeChat, and Telegram Chat.
If you are interested in using Telegram Messenger only, you will find a few dedicated HTML Telegram widget generators to add Telegram Chat to your website in this article. They function perfectly on whichever platform you use, such as WordPress, Blogger, Wix, Shopify, Weebly, and Squarespace.
Four tips to consider when using a Telegram Chat widget on a website
- Make sure your users use Telegram: According to Statista, Telegram is the 3rd most popular social media messenger app. Even though Telegram is a popular instant messaging service, it is not widely used in many countries, especially given that It is blocked in China, Iran, and Pakistan.
- Customize your Telegram chat plugin: Many Telegram Chat widget generators let you customize the widget by changing fonts (e.g., localizing front-end messages if your business serves a local audience), colors, business icons, and the welcome message, and by setting widget positions. Also, several [Telegram widget] builders can automatically turn the widget on or off, depending on your business’s opening hours.
- Concern about the user experience: These third-party Telegram Chat widgets for websites dynamically load scripts and styles. So, it can impact the overall site loading time and user experience. For a start, you can load these HTML codes for Telegram Chat asynchronously (or use Google Tag Manager) and load the Chat widget after clicking a button or link on your site (i.e., onclick event). In addition, you can set the widget position on your site to avoid conflicts with other tools, such as click-to-call widgets and back-to-top buttons.
- Use Telegram automation: Utilizing a Telegram Chatbot will help you qualify leads and improve customer assistance. Furthermore, since these Telegram widgets do not have native in-built statistics modules, use a Telegram Chat Analytics tool such as @Combot.
Best Telegram Chat Widget Creators to Use Today
Elfsight’s Telegram Chat widget
Elfsight is an online service that allows you to create responsive, valuable website widgets. It currently has over 90 widgets in its library, ranging from data collection (e.g., Contact Form, Elfsight’s Form Builder) to information display (e.g., Restaurant Menu, Photo Gallery), web components (e.g., Search Bar, Weather Forecast), and Chat widgets such as Telegram Chat, WhatsApp Chat, and Instagram Chat.
Elfsight’s Telegram Chat widget lets you create a responsive Telegram live chat widget using its templates and visual editor, without coding.
Features:
- Telegram widget Templates: Nine pre-made templates are ready to use, whichever use-case or angle you want. Each template is fully customizable and responsive, working on your users’ devices.
- Chat positioning options: You can set the Telegram widget’s position on a page in three ways:
- Floating Bubble – Follows visitors as they scroll the page, stays in sight, and can be aligned to the center, left, or right.
- Bubble – Enables embedding the Telegram Chat window in the content area as an inline widget.
- Chat Window – Embed the chat window without the button.
- Customization options: Elfsight’s Telegram Chat widget builder has many customization options. Here are some options:
- Chat Bubble – changing the Telegram Chat button icon & text
- Header – Edit the picture of the assistant, name, and caption. The caption may be the reply time text (Ex, typically replies in a few hours) or custom text.
- Welcome message – the first chat message you send to the reader. It can include bullet points and links.
- Catch the eye with notifications: There are two ways on the Telegram widget builder to get visitors’ attention via notifications: 1) Notification badge (an unread text) and 2) Browser tab title (a notice about an unread message)
- Target audience: Display the Telegram widget to new visitors, returning audiences, or all users.
- Target pages: Show or hide the Telegram Live Chat widget on specific pages.
- Set when to display Telegram chat on the website: This is one of the most valuable features for many users. It allows you to schedule when the Telegram widget is displayed on your site.
- Chat opening triggers: Open the Telegram Chatbox based on page load, time on page and site (measured in seconds), scroll position (measured as a percentage), and exit intent (i.e., the user tries to leave the current page). Also, you can specify Elfsight to remind the visitor not to open the chat window again for a specific period if the visitor closed it.
- Change appearance: Change colors, animation, and button border.
- Custom CSS and JavaScript, and more features,
How to make a Telegram chat widget for your website using Elfsight
Use the widget builder below to create your Telegram widget.
Also, you can sign up on the Elfsight website from here, search for “Telegram Chat” on the Apps Catalog, and start customizing your widget. Watch the video below to find out how:
How to embed Telegram Chat on your website
The HTML code for the Telegram Chat widget can be copied from your dashboard.
It will contain two parts: 1) A code to load an external JavaScript file (is bolded below) and 2) HTML code with a div class to identify the created Telegram Chat widget.
<script src="https://elfsightcdn.com/platform.js" async></script>
<div class="elfsight-app-915ee90b-4102-4740-bbcf-b88b336d3bdd" data-elfsight-app-lazy></div>Copy and paste the embed code before the closing body tag (</body>) in your website theme, template editor, and site’s header and footer script management section. If your site already has other Elfsight apps, such as the Facebook Reviews widget and the Cookie Consent banner, you do not need to add the JavaScript code again.
Pricing
Elfsight’s Telegram Chat widget app is free for all Elfsight users. However, the free plan is limited to one Telegram widget and 200 views. To create and use more Telegram chat widgets on high-traffic sites, you have to upgrade to a paid plan starting from $6 per month.
Click here to try Elfsight’s Telegram Chat widget.
Common Ninja’s Telegram Chat widget
Common Ninja is another site similar to Elfsight that lets you create embeddable widgets for websites. It includes well over 200 widgets, ranging from website components to review aggregators. Unlike Elfsight, Common Ninja offers many more features, including localization, AI tools, and device-specific editing.
Common Ninja’s Telegram Chat widget is free to use. It lets you quickly create an embeddable, responsive, custom Telegram widget for your site.
Features:
- Templates: Six templates, based on industries (healthcare, tech support, etc.), will help you get started quickly.
- Create your Telegram Chat widget: Common Ninja lets you customize every aspect of the Telegram widget. You can change the button, contact status, contact image, chat body, and chat footer. You can also add “quick links” to your chatbox to help users find solutions without contacting you.
- Change appearance: Common Ninja offers one of the best Telegram Chat widgets for customization. Upon selection, the widget’s color scheme changes entirely. You can also change the widget’s look and feel by adjusting colors and fonts, adding background images, and using advanced customizations, including custom CSS.
- Chat widget functionalities: You can define whether the chat widget opens automatically, only once, or after a certain amount of time, and where on the webpage it should appear.
- Localization: Another handy feature of Common Ninja is that you can localize widgets based on the user’s browser settings. For example, you can translate the Telegram Chat widget’s content (welcome message, etc.) from English to Russian and Spanish and serve the suitable variation to the right audience based on their browser language settings.
- Display rules: You can define display conditions to prevent widgets from appearing on specific pages or devices, such as desktops.
- Integrations with Google Analytics, Mixpanel, and widget analytics. Plus, you can add collaborators and share a link to your widget with your co-workers.
Creating a Telegram Chat widget using Common Ninja
Register your account on Common Ninja, search “Telegram Chat” in your Common Ninja widgets catalog, and start building your widget. Watch the following video to learn how:
HTML code
The HTML code of Common Ninja’s Telegram Chat widget will be similar to the following:
<script src="https://cdn.commoninja.com/sdk/latest/commonninja.js" defer></script>
<div class="commonninja_component pid-159218f5-99d8-4a44-8b77-1b741a5d04df"></div>Copy and paste your HTML code before the closing body tag (</body>) to display it on your site. Like Elfsight, you only need to load the JavaScript file once if your site has other Common Ninja widgets installed.
Pricing
Common Ninja’s Telegram Chat is free to use. However, the free plan is limited to one project, one widget, and 300 monthly views. To increase views and widgets and remove Common Ninja branding from widgets, you must subscribe to a paid plan starting from $10/mo.
Click here to try Common Ninja’s Telegram Chat.
Chat Support for Telegram [WordPress Plugin]
If you are looking for a WordPress plugin to add live chat, ThemeAtelier‘s Telegram Chat plugin is among the smoothest.
Features:
- Different call-to-action buttons: The Plugin provides a set of buttons you can use anywhere on your website. Each button can also set all functionalities.
- Availability time: Set customer support hours and days.
- Set timezone: You can set your timezone so your time is based on your time; otherwise, it will use the user’s computer’s time.
- Let your audience know you’re offline: Based on your available time, it will show you as offline when you’re unavailable.
Final words on Telegram Chat widgets
If your target audience uses Telegram, you can support Telegram messaging on your site to assist users. In this article, you found a few services for adding a Telegram Chat widget to your site. Also, there are other solutions on platforms like GitHub, such as this one, which involves custom coding.
Also, you can use an All-in-One Chat widget, such as this one from Elfsight, to support an all-inclusive instant messaging experience for your website users.