Mini Woo is a project that allows you to create a mini app for Telegram, the messaging app with over 500 million active users, that connects to your WooCommerce website, the most popular e-commerce platform on the web. It uses Next.js, a React framework for building fast and scalable web applications, and the Telegram Bot API and the WooCommerce REST API to provide a seamless shopping experience for your customers on Telegram.
You can use this project as a template to customize your mini app with your own branding, products, and features, or modify the API to connect any other online store that supports RESTful web services. This project is open source and free to use. You can find the source code, documentation, and installation instructions here on GitHub.
- Telegram Bot
- WooCommerce Website
- NodeJs (Latest LTS version recommended)
- Prepare Environment Variables
- Deploy
- Init Telegram Bot API Webhook
To use this project, you need to set the following environment variables:
-
NEXT_PUBLIC_BASE_PATH
This is the base URL of your deployment. For example, if you are deploying on Vercel, it can be something likehttps://mini-woo-<your-username>.vercel.app
. -
TELEGRAM_BOT_TOKEN
This is the access token that you get from @BotFather when you create your Telegram bot. -
TELEGRAM_BOT_SECRET
This is a password that you set to secure your APIs. It can be any string, such asmy-pass
or a randomly generated hash. Please make sure to keep it secret. -
TELEGRAM_PAYMENT_PROVIDER_TOKEN
This is telegram payment provider token. You can connect payment methods from BotFather. Payment Providers, Supported Currencies -
WOOCOMMERCE_URL
This is the URL of your WooCommerce website. For example,https://<your-super-cool-store>.com
. -
WOOCOMMERCE_CONSUMER_KEY
WOOCOMMERCE_CONSUMER_SECRET
These are the authentication key and secret that you obtain from WooCommerce settings. You can follow this instruction to generate them.
You need to deploy your app on a platform or a server of your choice.
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js. You need to fork this repository first.
Check out Next.js deployment documentation for more details.
If you prefer to deploy your app on your own server, you need to copy example.env
to .env
in the root of the project and fill the variables. Then, you need to run the following commands:
npm run build
npm run start
This will build and start your app on the port specified by the PORT
variable in .env
.
Set environment variables then run:
npm run dev
you can use https://ngrok.com/
This is the last step! You need to set up a webhook for your Telegram bot to receive updates from Telegram. To do this, you just need to make a POST request to the following URL:
curl -X POST https://<your-deployment-url>/api/telegram-hook/init?secret_hash=<the-secret-password-from-env-var>
Replace <your-deployment-url>
with the base URL of your deployment and <the-secret-password-from-env-var>
with the value of TELEGRAM_BOT_SECRET
in your environment variables or .env
.
Now your mini app is ready! You can test it by sending commands or messages to your Telegram bot. Enjoy! ๐
- Show products list
- Filter by category
- Register Order
- Pay with telegram payment
- Support variable items
- Support search items
- Support shipping methods
- Support other payment methods
- more...
To learn more, take a look at the following resources:
- Telegram Mini App - Starting point to learn about telegram web apps.
- Telegram Bot API - Telegram Bot API full documentation.
- Telegraf.js - Modern Telegram Bot API framework for Node.js (documents).
- WooCommerce API - WooCommerce REST api documentation.
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
Your feedback and contributions are welcome!