Back to Blog

How to Set Up a Telegram Live Chat Widget on Your Website in 3 Minutes Using BirdyChat

Adding a Telegram live chat widget to your website with BirdyChat allows you to connect with visitors instantly and seamlessly. By handling all responses directly in Telegram, without any extra software, you can manage customer inquiries effortlessly, keep conversations organized, and provide real-time support that improves engagement and conversions.

When multiple visitors message at the same time, BirdyChat keeps conversations organized with unique client IDs, so you can reply individually without creating separate group chats. This ensures efficient, contextual, and stress-free communication.

Follow this simple 3-minute guide to set up your BirdyChat widget and start engaging visitors immediately, whether you are running a SaaS platform, e-commerce site, or personal project.

What You’ll Need

• A Telegram account

• A BirdyChat account

• Access to your website platform (WordPress, Wix, Shopify, Squarespace, HTML)

💡 Tip: Make sure you have login credentials and website access before starting.

Step 1 – Create Your BirdyChat Live Chat Widget

Access the Dashboard

Log in to the BirdyChat Dashboard, where you can create as many live chat widgets as your websites require.

Fill in Required Information

Complete the following fields: My Website – Enter your website name (e.g., BirdyChat)

Your Telegram User ID – How to retrieve:

1. Open Telegram

2. Search for @userinfobot

3. Press Start to get your User ID

Your Telegram Bot Token – How to retrieve:

1. Open Telegram

2. Search for @BotFather (✔️ verified blue checkmark)

3. Start conversation → /newbot → name your bot → get token

4. You will see a message like:

Done! Congratulations on your new bot.

You will find it at t.me/YourBotName_bot

Use this token to access the HTTP API: 123456789:ABC-123xyzYourTokenHere

Copy the bot token and paste it into the Your Telegram Bot Token field in BirdyChat.

Verify if Bot is Started

1. Open the bot link from the @BotFather message (e.g., t.me/YourBotName_bot) in Telegram

2. Press Start in Telegram to activate your bot

1. Return to BirdyChat Dashboard → click Verify if Bot is started

Step 2 – Customize Your Chat

Choose the Position

1. Place your chat widget on the bottom-right or bottom-left of the page.

Page-Specific Widgets

1. To control visibility on specific pages, embed separate widgets on different pages of your website.

   Why it’s useful: Page-specific widgets let a solopreneur know exactly where the visitor is. For example, if a visitor is on the SaaS widget creation page, the message they send will go to a dedicated Telegram chat for that page. This ensures:

   • Each conversation is contextual to the page.

   • You immediately know where the visitor is in the workflow.

Messages from different pages don’t mix, keeping communication organized.

Welcome Message & Auto-Reply

1. BirdyChat provides a simple setup, so you don’t need to overthink autoresponses. By default:

   • When a visitor sends a message, they immediately receive:

   "Please give me a moment to respond to your request." (with a 3-minute timer)

   • If the solopreneur does not respond within that time, the visitor receives:

   "Sorry, I am not able to respond right now. Please leave your email or phone number and I will contact you."

Customize Language & Response Time

You can translate these messages or adjust the auto-response delay using the responseTimeout parameter:

<script src="https://birdychat.com/js/chat-widget.js">
</script>
<script>
document.addEventListener('DOMContentLoaded', 
    function() {
        AdminChatWidget.init({
            widgetId: '1234-567-890', 
            chatTitle: 'Chat with me',
            primaryColor: '#2196f3',
            position: 'right', 
            responseTimeout: 300, // 5 minutes = 300s
        });
    }
);
</script>

Why it’s useful:

• firstAutoResponse & lastAutoResponse allow full language customization.

• responseTimeout sets a clear window for the solopreneur to reply, managing visitor expectations.

Combined, these settings save time and make communication consistent and professional.

Note: After customizing, click Create Widget. A pop-up will appear with the integration code ready for embedding.

Step 3 – Embed the Widget on Your Website

Copy Generated Code

After creating the widget, copy the integration code from the pop-up.

Embed on Your Platform

Paste the code according to your platform:

• WordPress Step-by-Step Guide

• Shopify Step-by-Step Guide

• Squarespace Step-by-Step Guide

• Wix Step-by-Step Guide

• HTML Websites Step-by-Step Guide

💡 Tip: If embedding BirdyChat widgets on multiple websites, create a separate Telegram bot for each. Messages from each website will be delivered to the corresponding Telegram bot chat you named, keeping visitor conversations organized. Learn how to manage BirdyChat widget notifications in Telegram for real-time alerts and efficient visitor communication.

Step 4 – Test and Go Live

1. Open your website, type a message into the chat, and send it.

2. Verify your Telegram bot receives the message.

3. If using page-specific widgets, send test messages from different pages to ensure each widget directs messages to its dedicated Telegram chat.

Step 5 – Conclusion

By following this guide, you can set up a Telegram live chat widget on your website in under 3 minutes using BirdyChat. Your visitors can start conversations immediately, and you can respond directly from Telegram for real-time support.

✅ Try BirdyChat today and enhance your website communication!

Link to full documentation: BirdyChat Docs