update

.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*

.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
+

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+    "cSpell.words": [
+        "CERTBOT",
+        "idoco",
+        "Loadmill",
+        "preact",
+        "Sergey",
+        "unactive"
+    ]
+}

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

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.
+  <p align="center"> <img src="docs/BotProfile.png"/> </p>
 
-### 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
+<script> window.intergramId = "Your unique chat id" </script>
+<script id="intergram" type="text/javascript" src="https://telegram-chat-widget-t3ez.onrender.com/js/widget.js"></script>
+```
 
-  <p align="center"> <img src="docs/bot-start.gif"/> </p>
+*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). 
+<!-- **Important Notice:** I plan to keep the hosted chat service 100% free (no ads also!), but there are some hosting expenses (servers, domain, cdn, etc), so I will soon start to bundle a [Loadmill](https://www.loadmill.com) component with the Intergram script. Loadmill is a new concept and still in Beta - **If you don't feel comfortable with this, please use your own self hosted version.** -->
+
+### 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 ......
+```
+
+<p align="center"> <img src="docs/CustomDataExample.png"/> </p>
+
+
+## Use Case in mikrotik hotspot portal
+<details>
+  <summary>View mikrotik code sample</summary>
+
+# Mikrotik installation
+
+### 1.) Adding the bot to Walled Ip's
+
+Goto **ip** > **hotspot** > **Walled Garden Ip List**
+
+add a new entry to **accept** Dst. Host as `https://telegram-chat-widget-t3ez.onrender.com`
 
+### 2.) Add your chat Id in window.intergramId
+
+`window.intergramId = "Your unique chat id";`
+
+
+
+### 2.) Add the scripts
 ```html
-<script> window.intergramId = "Your unique chat id" </script>
-<script id="intergram" type="text/javascript" src="https://www.intergram.xyz/js/widget.js"></script>
+<script> 
+// ex. inside login.html
+window.intergramId = "Your unique chat id" 
+window.CustomData = {
+    'username': '$(username)',
+    'ip address': '$(ip)',
+    'Mac address': '$(mac)',
+    'trial': '$(trial)',
+    'interface' : '$(interface-name)',
+    'vlan' : '$(vlan-id)'
+};
+</script>
+<script id="intergram" type="text/javascript" src="https://telegram-chat-widget-t3ez.onrender.com/js/widget.js"></script>
 ```
+  for more mikrotik variables please refer to the [Mikrotik hs portal documentation's](https://help.mikrotik.com/docs/display/ROS/Hotspot+customisation)
+
+### 3.) Done!
+
+## Examples in mikrotik
+*login.html*
+<p align="center"> <img src="docs/HsDataExample2.png"/> </p>
+
+*admins telegram*
+<p align="center"> <img src="docs/HsDataExample.png"/> </p>
 
-*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
+</details>
 
-**Important Notice:** I plan to keep the hosted chat service 100% free (no ads also!), but there are some hosting expenses (servers, domain, cdn, etc), so I will soon start bundeling a [Loadmill](https://www.loadmill.com) component with the Intergram script. Loadmill is a new concept and still in Beta - **If you don't feel comfortable with this, please use your own self hosted version.**
+---
 
-### Customization - [Try It](https://jsfiddle.net/z9ffzr9n/6/)
-Currently you can customize all visible texts and the main widget color by setting an optional `intergramCustomizations` object in the injection script tag. (All its properties are also optional and will fallback to their original values)
+## Using an external button
+```html
+<!-- Make sure to use the id toggleChatButton-->
+<div>
+  <button type="button" id="toggleChatButton">Toggle chat</button>
+</div>
+
+<!-- Add this script above the intergram script -->
+<script>
+  document.getElementById("toggleChatButton").addEventListener("click", () => {
+    document.dispatchEvent(new CustomEvent("chatToggled", { detail: true }))
+  });
+// set to the useExternalButton to true to hide the overlay widget
+window.intergramCustomizations = {
+  useExternalButton: true
+  // rest of the customizations...
+}
+</script>
+```
+
+
+### Customization
+Currently you can customize all visible texts and the main widget color by setting an optional `intergramCustomizations` object in the injection script tag. (**All its properties are also optional and will fallback to their original values**)
 ```html
 <script> 
-    window.intergramId = "Your unique chat id";
-    window.intergramCustomizations = {
-        titleClosed: 'Closed chat title',
-        titleOpen: 'Opened chat title',
-        introMessage: 'First message when the user opens the chat for the first time',
-        autoResponse: 'A message that is sent immediately after the user sends its first message',
-        autoNoResponse: 'A message that is sent one minute after the user sends its first message ' +
-                        'and no response was received',
-        mainColor: "#E91E63", // Can be any css supported color 'red', 'rgb(255,87,34)', etc
-        alwaysUseFloatingButton: false // Use the mobile floating button also on large screens
-    };
+  window.intergramId = "Your unique chat id";
+  window.intergramCustomizations = {
+    // Use an external button to toggle the chat box
+    useExternalButton: false,
+    // Title displayed when the chat is closed
+    titleClosed: 'Click to chat!',
+    // Title displayed when the chat is open
+    titleOpen: 'Let\'s chat!',
+    // Style when the chat is closed, options: 'button' or 'chat'
+    closedStyle: 'chat',
+    // Avatar URL to be displayed in the closed chat (only used if closedStyle is set to 'chat')
+    closedChatAvatarUrl: '',
+    // Expiration time for the chat cookie in days. Once opened, the closed chat title will be shown as a button.
+    // This is relevant when closedStyle is set to 'chat'.
+    cookieExpiration: 1,
+    // Introductory message displayed to the user upon opening the chat
+    introMessage: 'Hello! How can we help you?',
+    // Automatic help massage response
+    helpMessage: 'The admin did not setup a /help response, so please wait',
+    // Automatic response message displayed to the user when connecting to an admin
+    autoResponse: 'Looking for the first available admin (It might take a minute)',
+    // Automatic response message displayed to the user when no admin is available
+    autoNoResponse: 'It seems that no one is available to answer right now. Please tell us how we can contact you, and we will get back to you as soon as we can.',
+    // Placeholder text shown in the input field where the user can type their message
+    placeholderText: 'Send a message...',
+    // Whether to display the timestamp for each chat message
+    displayMessageTime: true,
+    // Whether to display a banner at the top of the chat window
+    displayBanner: true,
+    // Main color used for the chat widget (e.g., buttons, UI elements)
+    mainColor: '#1f8ceb',
+    // Whether to always use a floating button for the chat, even when it's open
+    alwaysUseFloatingButton: false,
+    // Height of the chat window on desktop devices
+    desktopHeight: 500,
+    // Width of the chat window on desktop devices
+    desktopWidth: 370,
+    // Whether to enable human-readable IDs, e.g., "Guest:uh7k2z"
+    humanReadableIds: false
+}
 </script>
-<script id="intergram" type="text/javascript" src="https://www.intergram.xyz/js/widget.js"></script>
+<script id="intergram" type="text/javascript" src="https://telegram-chat-widget-t3ez.onrender.com/js/widget.js"></script>
 ```
 
-<p align="center"> <img src="docs/hello.jpg"/> </p>
-
-### 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<TOKEN>/setWebhook?url=<Server url>/hook`
-  (Don't forget to replace with your token and server url)
-
-4. Open a chat with your bot and hit `/start` to get your unique chat ID
-
-5. Embed this code snippet in your website
-  ```html
-  <script> 
-      window.intergramId = "Your unique chat ID"
-      window.intergramServer = "Server url"
-  </script>
-  <script id="intergram" type="text/javascript" src="<Server url>/js/widget.js"></script>
-  ```
-6. :tada:
+<p align="center"> <img src="docs/cat-call-center.gif"/> </p>
+
+
+> # Donations would be appreciated
+> **Gcash/Paymaya**: Kent R. `09760009422`  <br>
+> **Paypal** [paypalme/Kintoyyyy](https://www.paypal.com/paypalme/Kintoyyyy)
+
+---
+
+## Deployment an additional information available at [idoco/intergram](https://github.com/idoco/intergram) and [yamaha252/intergram](https://github.com/yamaha252/intergram)