WPS Telegram Chat

Inside your Telegram App, you need to search BotFather username and start a conversation with him. ★ Official Telegram bots have a blue checkmark beside their name.

Click “Start” to activate BotFather bot or Give the start command to BotFather by typing /start You’ll see a list of commands that help you create, edit, and manage your bots.

Since it’s your first time, you’ll want /newbot. Choose or type the /newbot command and send it. After giving the /newbot command, you get to pick a name and username for your bot.

The username has to be unique, and memorable like your website address, for example “mySiteNameCom”. After you choose a suitable name the bot will be created.

To connect a bot to your website you need a token. Every bot has its own API token, and you shouldn’t share it with anyone. Copy your token value and go to the Step 3.

Inside your Telegram App, you need to search GetMyID username and start a conversation with him.

Click “Start” to activate GetMyID bot or Give the start command to GetMyID by typing /start

The next message the bot will send the ID identifier. The bot can be used an infinite number of times if the dialog is lost.

Go to your WordPress admin dashboard, then find the Plugins menu. Click on Add New and search for “wpSolution Telegram Chat“. Install and Activate the plugin through the Plugins menu in WordPress.

Click the Telegram Chat menu on the left.
Set the checkbox to Enabled.
· Enter your API token from BotFather, Step#2
· Enter your chat ID from GetMyID bot, Step#3

Click Check webHook button. If the settings are correct, you will see the info box with a green frame labeled GOOD.

Check the rest of the settings, title and welcome text of the chat form, etc… Save your settings.

Inside your Telegram App, you need to search your Bot by the name you created in Step#2 and start a conversation with him.

Go to your webSite with connected and configured WPS Telegram Chat plugin, Step#4. Send a test message from your webSite.

To answer to a received Telegram message, you need to call the context menu and click the Reply item. Otherwise, the message will not reach.

Your response from Telegram App to the webSite user should look something like this…

Check if the message has arrived on the webSite. Attention, messages on the webSite are updated only when the webSite tab is active. All Done!

1. body #wps-telegram-chat
2. body #wps-telegram-chat-update
3. body #wps-telegram-chat-header h5
4. body #wps-telegram-chat-app a
5. body #wps-telegram-chat-close
6. body #wps-telegram-chat-welcome p
7. body #wps-telegram-chat-content
8. body #wps-telegram-chat-content .outgoingMessage
9. body #wps-telegram-chat-content .incomingMessage
10. body #wps-telegram-chat-content .info
11. body #wps-telegram-chat-content .error
12. body #wps-telegram-chat-input
13. body #wps-telegram-chat-textarea textarea
14. body #wps-telegram-chat-send i

Additionally, let’s change the background color of the offline message. This is point 10 from our list.

body #wps-telegram-chat-content .info{
   background: yellow; /* change background color */
}

Insert the created css styles into the custom CSS of the chat settings and save.

Select Workers & Pages
Click on Create application
or Edit if you have already created one

Click on Create Worker to proceed

Change script name
Click on Deploy

Click on Edit code

Copy and replace the code given in the code editor with the code below:

addEventListener('fetch', (e) => {
	e.respondWith( doInit(e.request) );
});

async function doInit(e) {
	let url = new URL(e.url);
	let params = url.searchParams;
	let query = params.get('query');
	
	let newRequest = new Request(query, e);

	if( query ) return await fetch(newRequest);
	
	return new Response(JSON.stringify({ ok: true }), {
		status: 200, statusText: 'Silence Is Golden!',
		headers: { 'content-type': 'application/json' }
	});
}

Copy the final URL click on Save and deploy, script has been updated and you are ready to use script for WPS Telegram Chat

Last, we need to link your final URL in the Proxy options

function doGet(e){
  if(typeof e !== 'undefined') return doInit(e);
}

function doPost(e){
  if(typeof e !== 'undefined') return doInit(e); 
}

function doInit(e){
  return ContentService.createTextOutput( doJob(e) );
}

function doJob(e){
  if(typeof e.parameter.query === 'undefined'){
    return 'Error! Missing query!';
  }
  let data = { method: 'post', muteHttpExceptions: true }
  if(typeof e.parameter.args !== 'undefined'){
    data.payload = JSON.parse( e.parameter.args );
  }
  let res = UrlFetchApp.fetch(e.parameter.query, data);
  return res.getContentText();
}

Inside the popup, click on Select type ⚙️ and choose Web app

– In Execute as, select Me (<your email>) IMPORTANT!
– In Who has access, select Anyone IMPORTANT!

Click on Deploy

Click on Authorize access to open the Authorization box

In the popup window select your Google Account

If you see a warning “Google hasn’t verified this app”, it is fine to click on Advanced

Click on Go to <app name> (unsafe)

Click on Allow

After redirect, you should see Deployment successfully updated

Click on Copy and you are ready to use script for WPS Telegram Chat

*
Last, we need to link your final URL in the Proxy options