Among many social media messenger services, Telegram has become a rapidly growing instant messaging service with over 700 million monthly users and 55.2+ million daily users worldwide.
According to a study by Statista, 69% of Telegram users choose Telegram because it is more convenient than other messengers such as Messenger and WhatsApp.
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 Similarweb, 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 have options to turn the widget on or off automatically, 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, useful widgets for your websites. It currently has over 85 widgets in its library, ranging from data collection (i.e., Contact Form, Elfsight’s AI Form Builder), displaying information (i.e., Restaurant Menu, Photo Gallery), web components (i.e., 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 — One of the most valuable features for many users. It allows you to schedule the Telegram widget’s display on your site.
- Chat opening triggers — Open Telegram Chat 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 certain time 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 a 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 in 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" data-use-service-core defer></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 $5 per month.
Click here to try Elfsight’s Telegram Chat widget.
CommonNinja’s Telegram Chat Button widget
CommonNinja is another site similar to Elfsight that lets you create embeddable widgets for websites. It includes well over one hundred widgets ranging from website components (ex: logo rotator, Before-After image slider, comparison tables, Count-up clock) and review widgets (ex: Google Reviews widget, Testimonials Slider).
CommonNinja’s Telegram Chat widget is free to use, and it lets you quickly create an embeddable, responsive, custom Telegram widget for your site.
Features:
- Create your Telegram Chat widget — All aspects of the Telegram widget are entirely customizable in CommonNinja. You can change the button, contact status, contact image, chat body, and chat footer.
- Change appearance — Edit the look & feel of the widget by changing colors & fonts, and adding background images, etc.,
- Integrations with Google Analytics, Mixpanel, custom CSS, 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 CommonNinja
Register your account on CommonNinja, search “Telegram Chat” in your CommonNinja widgets catalog, and start building your widget. Watch the following video to learn how:
HTML code
The HTML code of CommonNinja’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 CommonNinja widgets installed, such as Number counters and Audio Player.
Pricing
CommonNinja’s Telegram Chat is free to use. The free plan is limited to 1 project, one widget, and 300 monthly views. For more increased views and widgets and to remove CommonNinja branding from widgets, you have to subscribe to a paid plan starting from $10/mo.
Click here to try CommonNinja’s Telegram Chat.
Widg.io’s Telegram Chat Plugin
Widg.io is another service that you can use to create various website widgets for different circumstances. Some of its popular widgets are Instagram Feed, WhatsApp Chat, and Team Showcase.
Its Telegram widget builder is equipped with basic customization options, which is ideal if you are looking for a simple widget for your site.
Features:
- Edit Telegram Messenger widget — Change bubble text, icon, agent name, reply time, and start chat text.
- Style widget — Change the widget’s position and colors.
Pricing
The widget is free to use. However, the free plan is limited in views and several websites where you can embed your widget. Premium plans start from £5/month.
Click here to try Widg.io’s Telegram Chat.
WPS Telegram Chat [WordPress Plugin]
If you were looking for a plugin to add Telegram chat to your WordPress site, WPS Telegram chat by WPSolution might be the best free Telegram plugin for WordPress users.
Features:
- Auto respond to messages via Telegram chatbot
- Chat Schedule settings
- Show chat only on specific pages
- Receive emails from the site Admin into the Telegram App
- Bypass the ban on Telegram by making use of a proxy (Cloudflare Workers or Google Script)
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 to add 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.