Kudo Auto Responder
The App has all the features of this app and some additional features https://gtgo.me/kudobot
The look and feel of the app will be like this one https://gtgo.me/keywordwa
The person who has the app installed will be referred to as the “user”.
A person who sends text messages to the User’s phone will be referred to as a “client”.
Note: Please disregard the different colours on the screen shots.
The logo is green – so the colour scheme should probably be shades of green.
I am open to suggestions on the layout and appearance.
Overview
- The app will be available on Play Store
- An administration panel is required to manage Prices, Users etc.
- The app will have a 14 day trial period.
- Pricing for licenses will be much the same as https://gtgo.me/kudobot
- The admin can adjust prices and subscriptions.
- The layout needs to be responsive to display portrait or landscape on a mobile phone or tablet.
Features
- The user sends a keyword to the mobile number of the phone hosting the app. The app reads incoming text messages.
- The user can add a sequence of multiple messages that are sent to the client.
- When the client sends a keyword he is added to a campaign that has sequenced messages that will be sent to the client at preset times.
- to recognize keywords the app will ignore accents, upper and lower case, and punctuation special characters if they are appended to the keyword. e.g. If a client sends in a keyword capitalized or all upper case the app will convert to lower case to recognize.
- These sequenced messages can be set to go out to the client. A set number of seconds, minutes, days, weeks, or months after the previous message in the sequence.
- The User can set an alert message that will be sent to specified mobile numbers when a client joins the sequence. The alert message can be set to be sent to multiple mobile numbers.
Start Screen
Setting up a new message sequence
The user chooses a new keyword and sets up messages to be sent to the clients.
Clone an Auto Responder
The user can click the duplicate icon to clone a sequence.
The user can modify or add a different keyword and save the sequence as a new sequence.
Autoresponder List
Subscriptions
Subscriptions will be much the same app as https://gtgo.me/kudobot
Creating an Alert Message
The user clicks the Bell Icon and a modal window opens where the user can set an alert message.
The User can set an alert message to be sent to multiple mobile numbers
Message Sequence timing
These sequenced messages can be set to go out to the client a set number of seconds, minutes,
days, weeks or months after the previous message in the sequence.
List of Auto Responders.
The user clicks on a message sequence to edit it.
The user flicks a message sequence to the right to delete it.
The button to the right of each sequence turns the sequence on or off.
Bugs n Fixes
101 Please make ti SMS icon as the default channel that is turned on for a new autoresponder. When the tick icon is clicked the autoresponder can be saved with NO channels selected. We must have an alert message that will not allow an autoresponder to be saved unless it has at least one channel selected. The alert message should say “Please select at least one channel for this autoresponder to reply to.”
110 When the user clicks on an autoresponder in a list to open it for editing or viewing. The hot spot for click needs to be the entire area of the autoresponder but excluding the trash, clone and on/off icons. (It is current confusing when you click on the text fields you expect the autoresponder to open, and it doesn’t). And the trash, clone and on/off icons need to be moved a bit lower in the block so they are a little further from the hot spot area and are not accidentally clicked. I have indicated the hot spot area and the lower positioning of the trash, clone and on/off icons in the 3rd autoresponder in the screenshot below.
120 The list of autoresponders should always automatically scroll to the bottom when the user returns to the list so that the latest added autoresponder is visible.
130 The plus button should be the same colour as the other icons. The tick icon should be the same size as the plus button and it should be aligned with the row of channel icons.
130 The shape of the rectangular buttons should be like this one with the same radius on the corners.
140 Please use the trash can icon from https://fontawesome.com/ The trash can looks a lot better with fontawesome. The radius of the corners for the plus button is the same as indicated above. Also make the plus icon button the same colour as the other icons.
160 Please place the same plus icon on the start page so it matches the rest of the app. Move the kudo autoresponder logo down and position the plus icon in the position indicated on the screen mockup and please delete the blue swirl.
170 The user needs to be able to add multiple images and multiple google map locations to a message (Not just one).
180 The alert message needs the following fix-ups.
185 Please note the mobile icon needs to insert a merge [mobile] into the alert message. It should insert this merge code from where the user has the cursor positioned and it should have a space after the merge code and the cursor should be positioned there ready for the user to continue typing.
190 The user needs to able to send alerts to more than one mobile number. The best way to do this is to have it work like adding multiple numbers already works on an android phone. Below is how the layout looks before alert numbers are added. Note: We are using the same plus icon but it is smaller than the plus icon for new autoresponder or new message plus icons.
200 when the alert numbers are added they are displayed in standard android method with a – so the user can delete one or more of them. Note the user can send alerts to multiple mobile numbers 1,2,3 or more.
210 When the user clicks to add a new recipient for the alert message the modal window should open and the country code should default to the country code where the user is located. The user does NOT enter the alert message in this modal window. This modal window is only for entering mobile numbers to send the alert message to.
PLEASE ALSO NOTE THE INTERNATIONAL NUMBER SELECTOR NEEDS TO DEFAULT TO THE PERSONS COUNTY. E.G. If I am in Australia it should show +61 as the default.
215 The Alert Message is not required. The user should be able to save an autoresponder with the alert message section empty.
220 The user should add the alert message in the front layout, NOT in the modal window.
230 Please Note: Clicking on this icon inserts a merge [mobile] into the alert message. This merge field should be inserted where the users has the text cursor placed and a space should be added after the mobile merge field with the cursor there ready for the user to continue typing the message. When the alert message is sent the mobile number of the person who has sent the keyword to this autoresponder will be inserted into the message. This is an essential feature so the recipients of the alert message can contact the person who has just been subscribed to the autoresponder.
250 The google map icon allows the user to add a google location map. The user adds a google map the same way they add one to a message on an android phone. The user can add multiple google location maps. Note the user can delete maps or images that are added to a message.
260 Please note the first message is sent immediately. The user can NOT change this for the first message.
The text below the first message should say “Send Immediately” there should be no clock icon for the first message.
270 All other messages should have the send after previous message options with the clock icon . The default should be “Send 30 Seconds after previous message” then the clock icon. It should say previous message NOT last message.
If the send is already set to e.g. “Send 2 Weeks after previous message” and the user clicks to edit the send time. The modal window should open up with the “Send 2 Weeks after previous message” or whatever was previously set. Currently you have it changing to Send Message 30 seconds. this is incorrect.
280 The user should not be able to deselect all channels. One of these channels should be selected at all times. The default for a new autoresponder should be SMS.
290 The Instagram icon should be an orange shade. You can download it here https://commons.wikimedia.org/wiki/File:Instagram_icon.png
310 Please add more space between the icons so they are easier to select. Also please indicate what number autoresonder the user is currently viewing or editing. See screen shot below.
330 Please note the autoresponder name and keyword fields must be unique. You need to set these fields as unique like in a normal form.
If the user clicks out of the autoresponder name field without entering a unique name an alert message appears saying. “You must enter a unique name”.
If the user clicks out of the keyword field without entering a unique keyword an alert message appears saying. “You must enter a unique keyword”.
The keyword field should have a filter that will only accept letters and numbers. Uppercase letters should be converted to lowercase and spaces and special characters should not be accepted.
360 Bugs with the message order after cloning.
370 The OK text is not aligned vertically on the button. Please add the information I have put on the site for the info windows.
380 Please reduce width of number field so that the full words are visisble e.g. seconds (Not secon..)
390 Multiple images need to be able to be attached to a message. PLEASE NOTE: The photo should be cropped on the center of the photo to form the thumbnail image. It should NOT be stretched out of proportion to fit. You are currently stretching it out of proportion.
400 Please include all information sections in the info ?’s see paragraph 350.
410 Change the logo to the kudo head already supplied. No text in the logo the Name of the app is Kudo Autoresponder.
420 Please note paragraph 380 seconds minutes are cut off. Please widen and make sure no time period words are cut off in the display. There is plenty of room to do this. The number field can be reduced in horizontal width.
430 The alert message is NOT required
500 We will refer to the number sending the keyword as the subscriber’s number.
510 When the user clicks the mobile icon the code [mobile] is inserted into the alert message.
520 This [mobile] is inserted where the cursor is in the alert message.
A space is also added after the [mobile] and the cursor is active after this space so the user can continue editing the alert message.
520 If the user clicks the mobile icon and the cursor is NOT in the alert message field an alert message says “Place your cursor in the alert message field then click the mobile icon to insert [mobile] tag into the alert message”
530 When a person is subscribed to the autoresponder and the alert message button is ON:
- If [mobile] is in the alert message, the variable $num = subscribers number, the characters [mobile] in the alert message is replaced with the $num value.
- Then the alert message is sent to the numbers set in the “Send Alert message to…:” field. (Only those numbers)
- If [mobile] is not in the alert message, the alert message is sent to the numbers set in the “Send Alert message to…:” field. (Only those numbers) without running the routine in 530 (1.)
540 If the alert message button is OFF then no alert message is sent.
550 The alert message is NOT required. The user can create and save an autoresponder without adding an alert message.
560 If the user clicks to save an autoresponder and the alert button is clicked ON but there is no content in the alert message field or NO numbers to send the alert to – the alert button is automatically set to off and the autoresponder is saved. A message says “Saving this autoresponder without an Alert Message.”
570 The user can turn the alert button OFF. Any numbers in the alert send alert to section and content in the alert message is still saved with the autoresponder but the alert message will not be sent if the alert button is clicked to OFF.
580 The alert message section needs to expand vertically to display all lines of text in the alert message field. The same way the other messages expand.
590 When the user clicks the mobile icon it places [mobile] into the alert message field. This seems to work. But when the alert message has been sent out and I open the autoresponder to check you have set it to sae the subecribers mobile in the field. THIS IS NOT CORRECT. The [mobile] should be replaced with the subscribers mobile only before sending the alert message. it SHOULD NOT BE SAVED INTO THE FIELD. Please fix this.
600 The user should be able to attach multiple images to a message. Please fix this it only allows the attaching of one image.
610 The thumbnail of a placed image is NOT set up properly. It Needs to crop an image in the center and NOT distort it. And It should not flip sn imgage sideways. Please fix this.
620 Images and location maps should be displayed side by side. NOt below each other until they fill the line.
630 The place google maps is NOT working properly. It should allow the user to choose any map address from google maps and then attach that map above the image.
650 The Licence Plans are to be Laid out the price for the Months or Years and the monthly itemization in brackets like the Keyword Auto Responder app originally referred to.
I want our Plan Prices to have no decimal places. But the monthly itemization will have 2 decimal places.
e.g. $66 for 3 Months ($22.00/month)
$141 for 3 Years ($47.00/month)
it is e.g. 3 Months – Not Month
660 I want all the Channels listed in the details panels. In this order:
Text (SMS) Replies
Whatsapp Replies
Whatsapp Business Replies
Facebook Messenger Replies
Indesign Replies
Telegram Replies
Linked In Replies
670 The submit button should say Sign Up (Not Payment)
680 The vertical spaces between the sections should be closer together – see screenshot below
690 The drop shadows around the section boxes should be darker. See how the drop shadow in the blue one above is darker (more defined)
700 The G for google voice is too big
800 Information details for open autoresponders Help (?) icons.
Info – Autoresponder Name
____________________________________________________________
- The autoresponder name must be unique.
- Choose a name that will make it easy to find an autoresponder.
- To add a new autoresponder click the Plus button at the bottom of the list of autoresponders.
- To clone a new autoresponder click the clone button on a previously saved autoresponder.
- Click the clone tool on an autoresponder in the list display or below the last message in an opened autoresponder.
- You will need to rename the autoresponder and choose a new keyword before you can save it.
- You can leave the same messages or edit or delete some of them.
- You can delete an autoresponder from the autoresponder list by clicking the trash can in its display or by flicking it off either side of the screen
Info – Keyword
____________________________________________________________
- A Keyword must be unique.
- You can only use numbers and lower case letters (spaces & special characters are not accepted).
- Do not use just common words. e.g. You should NOT use pizza but pizzat is ok.
Info – Alert
____________________________________________________________
- The alert message can be sent to multiple mobile, numbers and is used to advise the recipients that a person has joined the autoresponder.
- Click the mobile icon to insert a merge [mobile] into your alert message.
This will display the mobile number of the person joining the autoresponder in the alert message when the alert message is sent. - Click the on/off icon to enable or disable the alert message.
Info – Message
____________________________________________________________
- To add a new message to your autoresponder click the Plus Button below the last message.
- You can add images and google maps to send with your message.
- A message can contain links to any url. e.g. Facebook Messenger, Instagram,
Whatsapp, Telegram, Youtube or other videos, Webforms, or Web pages. etc. - PLEASE NOTE: You can only send one message to Facebook Messenger and LinkedIn
Messenger and Linked Channels can only be selected for an autoresponder that sends only 1 message. - The first message will be sent immediately when a client is subscribed to an autoresponder.
- Unlimited additional messages can be added to an autoresponder. You can set each additional message
to be sent a number of seconds, minutes, hours, weeks, or years after a previous message. - Click the trash to delete a message from an autoresponder.
Looking forward to hearing from you.
Regards, Graham
1020 List Autoresponder Layout for Web App
- The layout with the autoresponders should resize to fit the entire window and is responsive for all screen sizes.
- There are 2 displays for the autoresponder list. List view and card view.
- The footer moves up just beneath the list display if the number of autoresponder rows is less in height than the height of the window see example:
https://examples.bootstrap-table.com/index.html#extensions/custom-view.html
Click to see list layout https://kudoprint.com.au/wp-content/uploads/2021/04/autoresponder-list-vnu.jpg
Click to see the card layout: https://kudoprint.com.au/wp-content/uploads/2021/04/Autoresponder-list-cards.jpg
The width and height of the list display for autoresponders increases to fit the size of the window.
The number of autoresponder cards displayed per row increases as the user widens the window size.
1030 Autoresponder List – Select Records
- The list display for the autoresponders has checkboxes in the first field.
- The user can select multiple autoresponders to delete. https://examples.bootstrap-table.com/index.html#options/click-to-select.html
Click to see list layout with rows selected https://kudoprint.com.au/wp-content/uploads/2021/04/autoresponder-list-selected.jpg
1040 Search field
There is a search box that searches all fields of an autoresponder. And there is an advanced search that allows the user to search in specific fields.
See: https://examples.bootstrap-table.com/index.html#extensions/toolbar.html
Click to see the multi-search mock up: https://kudoprint.com.au/wp-content/uploads/2021/04/autoresponder-multi-search.jpg
1050 Multi Sort
In the list view, the user can sort by clicking the arrows beside the headers.
The user can also do sorts on multiple fields.
The columns that are set to be visible or hidden by the user, will remain the default view until the user changes the setting again.
The user can also select which columns are visible or hidden. See: https://examples.bootstrap-table.com/index.html#extensions/multiple-sort.html
To see a screenshot of the multi sort: https://kudoprint.com.au/wp-content/uploads/2021/04/autoresponder-multi-sort.jpg
1060 Edit Autoresponder
- When the user clicks on an autoresponder in the list or the card display.
- The input window opens in a modal window and the autoresponder list is greyed out behind it.
- The user can navigate or scroll through autoresponders in the input layout by clicking the number or forward or back arrows on the nav bar at the bottom of the screen.
- The input layout for autoresponders allows the user to scroll through the messages of the autoresponder vertically by using the scroll bar on the right of the input window.
- The name and keyword section of the autoresponder stay static in a header.
- The channel selector add, clone and trash icons and the navbar stay static in the footer of the input window.
- The input window stretches vertically to the full height of the window and resizes as the user changes the window size.
- The search box in the autoresponder input will search all fields in messages for that autoresponder.
- The user can click the eye button on the top left to change the width of the display. The display alternates between the wide display in the image and the narrower display will change to the width on the current mobile display.
- The scroll bar on the right allows the user to scroll through the messages.
- The header containing the name and keyword remains static and the footer containing the channel selectors and the navbar remains static.
To see a mock-up of the edit autoresponder layout click: https://kudoprint.com.au/wp-content/uploads/2021/04/Kudo-Autoresponder-edit-layout.jpg
1080 Create Qr Code

The user can create a QR code by clicking the QRcode button on the top of the autoresponder edit window:
A modal window opens with the QR code and a save or cancel button and when the user clicks to save the QR code.
- The user enters a new name for it and it is saved into a folder on the users photo gallery on their mobile.
- On a desktop computer, the user is prompted to save as and the user can create or select a new folder to save into.
- If the user clicks to save more QR codes they are directed to save into the folder the user has already created or used to save into.
Scan the QR code below to see how it works.



Below is a screenshot of how the opt-out appears on the bottom of the message and the response to confirm the opt-out.

1010 Attach a Giphy
- The user clicks the giphy icon (With the G) to attach a giphy image)
- Giphy Developers API info is on the following link https://developers.giphy.com/docs/api#quick-start-guide
1090 Import – Export – Download – Print
The user can:
- import and export his autoresponders to or from a csv file
- print a full autoresponder with all its messages.
- The import and export links, print, and download are on the side menu bar as well as on top of the display.
- The download button downloads the autoresponder with all its messages as a pdf.
1005 – Opt-out Procedure
- If the user clicks the opt-out icon the opt-out message will be added to the bottom of the text in the message field.
The message is “To opt-out reply: stop” - If the user deselects the opt-out button the opt-out message will be deleted from the bottom of the message.
If the user has clicked the opt-out button to on for the previous message and then adds a new message – the default of the opt-out button will be set to on for new messages. - If the user has clicked the opt-out button to off for the previous message and then adds a new message – the default of the opt-out button will be set to off for new messages.
1100 The Aler Message On/Off Button
PLEASE NOTE: The alert message on/off button should be set to OFF when the user creates a new autoresponder.
1070 Add New Message
If the user clicks the add button to add a new message button:
- a modal window opens with two radio buttons.
- button 1 – Add a new message after the last message
- button 2 – Add a new message before a message (if the user clicks button 2, a number field becomes visible at the end of line 2 and the cursor is activated in the field where the user types in the message number they want to insert the new message before.
- The default button that is selected is always button 1 when the modal window is opened.
1110 The Aler Message Specifications
How to set up an alert message using Telegram.
- The user creates a telegram group and creates an activation link to the group which he sends to recipients for the alert message.
- When the user sets up an alert message he clicks on the + icon. The user then types in the telegram group he wants to send alerts to.
- If the user can set up one or more telegram groups that will receive alerts for any particular autoresponder.