Among many social media messenger services, Telegram has become a rapidly growing instant messaging service with over 950 million 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 popular in many countries, especially considering Telegram is blocked in China, Iran, and Pakistan.
- Customize your Telegram chat plugin: Many Telegram Chat widget generators allow you to customize the widget by changing font (i.e., localize front-end messages if your business serves a local audience), colors, business icons, and editing the welcome message and 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 have scripts and styles that will load dynamically. 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 in your site to a place where it does not conflict 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 with its templates and visual editor without needing any coding knowledge.
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 – it works on your users’ devices.
- Chat positioning options: You can set the Telegram widget’s position on a page in three ways:
- Floating Bubble – Follows when visitors scroll the page and stay in sight, and can be aligned center, left, or right.
- Bubble – Enables embedding Telegram Chat window on 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 from you 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 you want.
- 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 the display of the Telegram widget on your site.
- Chat opening triggers: Open Telegram Chatbox based on page load, time on page and site (measured in seconds), scroll position (measured in percentage), and exit intent (i.e., 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 code) and 2) HTML code with a div class to identify the created Telegram Chat widget.
<script src="https://static.elfsight.com/platform/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 Facebook Reviews widget and 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 two hundred widgets ranging from website components to review aggregators. Unlike Elfsight, Common Ninja is equipped with many more features like localization, AI tools, and device-specific editing tools.
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 allows you to customize all aspects 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 provides one of the best Telegram Chat widgets in terms of customization options. Upon selection, there are color schemes, and the outlook of the widget changes entirely. You can also change the look and feel of the widget by changing colors and fonts, adding background images, etc., through advanced and custom customizations, including custom CSS.
- Chat widget functionalities: You can define whether you want the chat widget to open only once, automatically, 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 must only 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 plugin for your WordPress website to add a live chat, ThemeAtelier‘s plugin for Telegram Chat is one of the most smooth.
Features:
- Different call-to-action buttons: The Plugin provides a set of buttons that can be used 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 will work based on your time; otherwise, it will work from the user’s computer’s time.
- Let your audience know you’re offline: Based on your available time, it will show you offline when you are not available.
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.