Intergram Demo Page
-Free live chat widget linked to your Telegram messenger.
- - -diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 0000000..295898e --- /dev/null +++ b/.dockerignore @@ -0,0 +1,18 @@ +/dist +/docs +/node_modules +/.env +/.eslintrc +/.git +/.gitignore +/demo.html +/devServer.js +/Dockerfile +/Procfile +/README.md + +# jetbrains folder: +/.idea + +# npm log: +/npm-debug.log* \ No newline at end of file diff --git a/.gitignore b/.gitignore index b637658..9bec688 100644 --- a/.gitignore +++ b/.gitignore @@ -1,9 +1,6 @@ # dependencies: node_modules/ -# compiled files: -dist/ - # environment variables: .env @@ -12,3 +9,9 @@ dist/ # npm log: npm-debug.log* + +# vscode folder +.vscode/ + +test.html + diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..913dcda --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,10 @@ +{ + "cSpell.words": [ + "CERTBOT", + "idoco", + "Loadmill", + "preact", + "Sergey", + "unactive" + ] +} \ No newline at end of file diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..fc57bb8 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,12 @@ +FROM node:alpine + +ENV HOME=/opt/intergram +RUN mkdir -p $HOME +WORKDIR $HOME + +COPY . . + +RUN npm ci +RUN npm run build +CMD npm run start +EXPOSE 3000 \ No newline at end of file diff --git a/README.md b/README.md index 0347994..bccd92f 100644 --- a/README.md +++ b/README.md @@ -1,83 +1,187 @@ -# Intergram - [Demo](https://www.intergram.xyz/) +# Telegram Chat Widget - [Demo](https://kintoyyy.github.io/Telegram-Chat-Widget/) -A **Free** live chat widget that you can easily add to your website. It will let you chat with your website visitors using your Telegram messenger. +The **Telegram Chat Widget** is a free and customizable tool forked from idoco/intergram that lets website owners add a chat feature to their sites. Visitors can use it to talk to the website owners through Telegram. It's an easy way for websites to have real-time conversations with their users. -#### :tada: Main Contributors :tada: -- [aslauris](https://github.com/aslauris) - Who redesgined the new UI! Check out his website - [wedofe.com](https://www.wedofe.com/) -![](https://user-images.githubusercontent.com/5776439/40442974-c107cb4a-5e79-11e8-8af1-4d2c8be14f48.gif) +### Adding Telegram Chat Widget in your website with these 2 simple steps -##### How? -You initiate a chat with my Telegram bot and add 2 lines of script to your website to embed the widget. Visitors' messages are sent from the chat widget to my bot server, which sends them to your Telegram messenger where you can answer them. You can also self-host the bot server to get more control of this process. +1. Open [Telegram](https://web.telegram.org/), search for **`@MikrotikHsSupportBot`** and hit `/start` to get your unique chat ID. -##### Why use a Telegram bot to implement a chat widget? -By using a Telegram bot, I delegate all the message routing work and chat state management to Telegram. I don't have to build fancy mobile and desktop apps for several platforms because Telegram already has a great multiplatform chat client. And, I can easily handle a huge amount of load, because my app runs completely stateless (No database) and just serves as a pipe between Telegram and the chat widget users. +
-### Embed Intergram in your website with these 2 simple steps +1. Paste this code snippet right before the closing body tag of every page where you want the chat to appear +(Don't forget to add your actual chat ID). -1. Open [Telegram messenger](https://web.telegram.org/), search for `@Intergram` and hit `/start` to get your unique chat ID. ([direct link](https://web.telegram.org/#/im?p=@IntergramBot)) +```html + + +``` -
+*Note: `replying to a specific message should be used to respond to that specific visitor`. Feel free to send a standard message they won't be send to any dialog. You can talk with your colleague if the bot attached to a telegram group. Use `/all [any_text]` command to broadcast to all connected chat clients -2. Paste this code snippet right before the closing body tag of every page where you want the chat to appear -(Don't forget to add your actual chat ID). + + +### Bot commands +- `/start` - Link between the embedded chat and this telegram chat +- `/all [any_text]` - Send message to all online users +- `/who` - Get users list who are online now +- `/online` - Set online status for the chat. Widget is shown for users +- `/offline` - Set offline status for the chat. Widget is hidden for users +- `/ban [name]` - Ban user +- `/unban [name]` - Unban user +- `/user [name]` - To view the users data +- `/info` - more information about the bot +- `/help` - instructions on how to setup + +## Passing custom values and access it using `/user [name]` + +```js +let number = 300; +let timeLeft = '3hrs'; + +window.CustomData = { + 'username': 'test', + 'location': 'PH', + 'Time left': timeLeft, + 'Number': number +}; + +window.CustomData.text = 'Hello World!'; +window.CustomData.pet = '🐈'; + +window.intergramId = "Your unique chat id"; +//rest of the code ...... +``` + +
+ + +## Use Case in mikrotik hotspot portal +
+ +*admins telegram* +
-*Note: replying to a specific message should be used to respond to that specific visitor. Sending a standard message will broadcast to all connected chat clients (You might find it easier to use if you have only one active conversation)* +> the admin can see the users details +
- -### Initial Footprint - - Using [Preact](https://github.com/developit/preact) helped creating a pretty minimal `js` bundle. - - The widget injection script is about 5KB gziped and executes only after the host page finished loading ('onload' event). - - The chat iframe will only be loaded if the user interacts with the chat widget (currently about 40KB gziped). - -![](docs/footprint.png) - -### Deploy your own Intergram instance (Self Hosting) -1. Talk to Telegram [@BotFather](https://telegram.me/botfather), create a new bot and get its API Token. - -2. Deploy this repo to your own chat server. - - Clone it locally and install or if you use Heroku, fork this repository and point the new app to it. - - Set an .env variable named `TELEGRAM_TOKEN` with the value you got from @BotFather - -3. Point the bot webhook to your bot server by making a `GET` request to the following url - `https://api.telegram.org/bot
+ + +> # Donations would be appreciated +> **Gcash/Paymaya**: Kent R. `09760009422`
Free live chat widget linked to your Telegram messenger.
- - -+ The Telegram Chat Widget is a free and customizable tool made by idoco/intergram that + lets website owners add a chat feature to their sites. Visitors can use it to talk to + the website owners through Telegram. It's an easy way for websites to have real-time + conversations with their users. +
++