├── .github
    └── ISSUE_TEMPLATE
    │   ├── bug_report.md
    │   └── feature_request.md
├── JSON_Creator_WhatsAppSticker_Pack.png
├── README.md
└── index.html


/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Describe the bug**
11 | A clear and concise description of what the bug is.
12 | 
13 | **To Reproduce**
14 | Steps to reproduce the behavior:
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 | 
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 | 
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 | 
26 | **Desktop (please complete the following information):**
27 |  - OS: [e.g. iOS]
28 |  - Browser [e.g. chrome, safari]
29 |  - Version [e.g. 22]
30 | 
31 | **Smartphone (please complete the following information):**
32 |  - Device: [e.g. iPhone6]
33 |  - OS: [e.g. iOS8.1]
34 |  - Browser [e.g. stock browser, safari]
35 |  - Version [e.g. 22]
36 | 
37 | **Additional context**
38 | Add any other context about the problem here.
39 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Is your feature request related to a problem? Please describe.**
11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12 | 
13 | **Describe the solution you'd like**
14 | A clear and concise description of what you want to happen.
15 | 
16 | **Describe alternatives you've considered**
17 | A clear and concise description of any alternative solutions or features you've considered.
18 | 
19 | **Additional context**
20 | Add any other context or screenshots about the feature request here.
21 | 


--------------------------------------------------------------------------------
/JSON_Creator_WhatsAppSticker_Pack.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pratikbutani/WAStickerApp-JSON-Generator/1f0e822fd9d7c29729c6ee184b56048c0516eadc/JSON_Creator_WhatsAppSticker_Pack.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # WAStickerApp-JSON-Generator
 2 | A JSON Generator for WhatsApp Sticker Pack Apps. Check it now : http://pratikbutani.com/wastickerapp/ 
 3 | 
 4 | ![WAStickerApp-JSON-Generator](https://raw.githubusercontent.com/pratikbutani/WAStickerApp-JSON-Generator/master/JSON_Creator_WhatsAppSticker_Pack.png)
 5 | 
 6 | We are creating many apps for WhatsApp Stickers after they have announced sticker features in Android and iOS App.
 7 | 
 8 | I have also created some apps for [WhatsApp Stickers](https://play.google.com/store/apps/developer?id=WAStickers+Collection+Apps) but got some difficulties to create JSON for `content.json` file. Every developer faced this problem, Believe Me.
 9 | 
10 | Here is the solution, I have created tool [Convert Image names to JSON Array (WAStickerApp)](http://pratikbutani.com/wastickerapp/) which can help you to get JSON by giving details of Sticker Pack.
11 | 
12 | You can upload following details:
13 | - Folder Name (Identifier)
14 | - Sticker Pack Name
15 | - Publisher
16 | - Tray Image (with .png)
17 | - Publisher Email
18 | - Publisher Website
19 | - Privacy Policy URL
20 | - Licence Agreement Website
21 | - Images (Only .webp)
22 | 
23 | It will give full array in JSON as below:
24 | 
25 | **Format:**
26 | ```
27 | {
28 |     "android_play_store_link": "",
29 |     "ios_app_store_link": "",
30 |     "sticker_packs": [
31 |         {
32 |             "identifier": "1",
33 |             "name": "My Sticker Pack",
34 |             "publisher": "Pratik Butani",
35 |             "tray_image_file": "placeholder.png",
36 |             "image_data_version","1",
37 |             "avoid_cache":false
38 |             "publisher_email": "pratik13butani@gmail.com",
39 |             "publisher_website": "pratikbutani.com",
40 |             "privacy_policy_website": "your-url.com/privacy_policy.php",
41 |             "license_agreement_website": "your-url.com/license.php",
42 |             "stickers": [
43 |                 {
44 |                     "image_file": "banner.webp",
45 |                     "emoji": [
46 |                         "",
47 |                         ""
48 |                     ]
49 |                 },
50 |                 {
51 |                     "image_file": "bg_img.webp",
52 |                     "emoji": [
53 |                         "",
54 |                         ""
55 |                     ]
56 |                 },
57 |                 {
58 |                     "image_file": "ic_chef.webp",
59 |                     "emoji": [
60 |                         "",
61 |                         ""
62 |                     ]
63 |                 }
64 |             ]
65 |         }
66 |     ]
67 | }
68 | ```
69 | 
70 | You can read full article here : [JSON Creator for WhatsApp Sticker Pack](https://medium.com/mindorks/json-creator-for-whatsapp-sticker-pack-1ffb2719f562)
71 | 
72 | I hope you will love it.
73 | 
74 | **No one has ever become poor by giving. <3 <3**
75 | 
76 | [![paypal](https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=46Q5USNZNGKML)
77 | 
78 | Thank you.
79 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 	<head>
  4 | 		<meta charset="utf-8" />
  5 | 		<meta name="description" content="WhatsApp Sticker Pack JSON Generator | Create JSON for WhatsApp Sticker Pack | Select Images and Get Your JSON for WhatsApp Sticker Pack READY!!" />
  6 | 		<title>WhatsApp Sticker JSON Creator (WAStickerApp)</title>
  7 | 		<!-- Compiled and minified CSS -->
  8 | 		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  9 | 		<link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">
 10 | 		<!-- Compiled and minified JavaScript -->
 11 | 		<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
 12 | 		<style>
 13 | 		body {
 14 | 			background-image: linear-gradient(#eb3349, #f45c43);
 15 | 			height: 100%;
 16 | 			background-size: cover;
 17 | 			font-family: 'Nunito', sans-serif;
 18 | 		}
 19 | 		.progress {
 20 | 			margin: 1.5rem 0;
 21 | 		}
 22 | 		pre {
 23 | 			padding: 25px;
 24 | 			background-color: #F1F3F4;
 25 | 			border: none;
 26 | 			border-radius: 22px;
 27 | 			box-shadow: none;
 28 | 			outline: none;
 29 | 			opacity: 1;
 30 | 			transition: background-color 300ms ease-in-out;
 31 | 			transition: opacity 200ms; 
 32 | 			}		.string { color: green; }
 33 | 					.number { color: darkorange; }
 34 | 					.boolean { color: blue; }
 35 | 					.null { color: magenta; }
 36 | 					.key { color: red; }
 37 | 					
 38 | 		textarea {
 39 | 			position: absolute;
 40 | 			left: -100%;
 41 | 		}
 42 | 		
 43 | 		</style>
 44 | 	</head>
 45 | 	<body>
 46 | 		<div class="container">
 47 | 			<div class="card-panel">
 48 | 				<div class="row">
 49 | 					<div class="col">
 50 | 						<a class="github-button" href="https://github.com/pratikbutani" data-show-count="true" aria-label="Follow @pratikbutani on GitHub">Follow @pratikbutani</a>
 51 | 						<a class="github-button" href="https://github.com/pratikbutani/WAStickerApp-JSON-Generator/fork" data-show-count="true" aria-label="Fork pratikbutani/WAStickerApp-JSON-Generator on GitHub">Fork</a>
 52 | 						<a class="github-button" href="https://github.com/pratikbutani/WAStickerApp-JSON-Generator" data-show-count="true" aria-label="Star pratikbutani/WAStickerApp-JSON-Generator on GitHub">Star</a>
 53 | 					</div>
 54 | 				</div>
 55 | 				<div class="row">
 56 | 					<div class="col">
 57 | 						<h4 class="font-bold"> <b>Enter details and Get your JSON Ready for WhatsApp Sticker Pack &#128515</b> </h4>
 58 | 					</div>
 59 | 				</div>
 60 | 				<div class="row">
 61 | 					<div class="col">
 62 | 						<h5>(Your JSON will be generated automatically when you type something.)</h5>
 63 | 					</div>
 64 | 				</div>
 65 | 				<div class="row">
 66 | 					<form class="col s12">
 67 | 						<div class="row">
 68 | 							<div class="input-field col s6">
 69 | 								<input type="text" id="identifier" onkeyup="makeJSON()" />
 70 | 								<label for="identifier">Folder Name (Identifier)</label>
 71 | 							</div>
 72 | 							<div class="input-field col s6">
 73 | 								<input type="text" id="name" onkeyup="makeJSON()" />
 74 | 								<label for="name">Sticker Pack Name</label>
 75 | 							</div>
 76 | 						</div>
 77 | 						<div class="row">
 78 | 							<div class="input-field col s6">
 79 | 								<input type="text" id="publisher" onkeyup="makeJSON()" />
 80 | 								<label for="name">Publisher</label>
 81 | 							</div>
 82 | 							<div class="input-field col s6">
 83 | 								<input type="text" id="tray_image_file" onkeyup="makeJSON()"/>
 84 | 								<label for="name">Tray Image File Name (with .png)</label>
 85 | 							</div>
 86 | 						</div>
 87 | 						<div class="row">
 88 | 							<div class="input-field col s6">
 89 | 								<input type="text" id="image_data_version" onkeyup="makeJSON()" />
 90 | 								<label for="image_data_version">Version</label>
 91 | 							</div>
 92 | 							<div class="input-field col s6">
 93 | 								<label for="avoid_cache">
 94 | 									<input type="checkbox" class="filled-in" id="avoid_cache" onclick="makeJSON()"/>
 95 | 									<span>Avoid cache</span>
 96 | 								</label>
 97 | 							</div>
 98 | 						</div>
 99 | 						<div class="row">
100 | 							<div class="input-field col s6">
101 | 								<input type="text" id="publisher_email" onkeyup="makeJSON()" />
102 | 								<label for="name">Publisher Email</label>
103 | 							</div>
104 | 							<div class="input-field col s6">
105 | 								<input type="text" id="publisher_website" onkeyup="makeJSON()" />
106 | 								<label for="name">Publisher Website</label>
107 | 							</div>
108 | 						</div>
109 | 						<div class="row">
110 | 							<div class="input-field col s6">
111 | 								<input type="text" id="privacy_policy_website" onkeyup="makeJSON()" />
112 | 								<label for="name">Privacy Policy URL</label>
113 | 							</div>
114 | 							<div class="input-field col s6">
115 | 								<input type="text" id="license_agreement_website" onkeyup="makeJSON()"/>
116 | 								<label for="name">Licence Agreement Website </label>
117 | 							</div>
118 | 						</div>
119 | 						<div class="row">
120 | 							<div class="file-field input-field col s6">
121 | 								<div class="btn">
122 | 									<span>Browse</span>
123 | 									<input type="file" id="files" multiple accept=".webp" onchange="makeJSON()" />
124 | 								</div>
125 | 								<div class="file-path-wrapper">
126 | 									<input class="file-path validate" type="text" placeholder="Upload file" />
127 | 								</div>
128 | 							</div>
129 | 						</div>
130 | 					</form>
131 | 				</div>
132 | 				<div class="progress">
133 | 					<div>
134 | 						<div class="determinate" style="width: 100%"></div>
135 | 					</div>
136 | 				</div>
137 | 				<div class="btn" id="copyButtonClick" onclick="copyJSON()">
138 | 					<span>Copy JSON</span>
139 | 				</div>
140 | 				&nbsp
141 | 				<div class="btn" id="copyButtonClick" onclick="clearJSON()">
142 | 					<span>Clear JSON</span>
143 | 				</div>
144 | 			<pre id='output'></pre>
145 | 			<div class="progress">
146 | 				<div>
147 | 					<div class="determinate" style="width: 100%"></div>
148 | 				</div>
149 | 			</div>
150 | 			<table>
151 | 				<tr>
152 | 					<td>
153 | 						<h4 class="center-align" style="margin-top: 0"><b> No one has ever become poor by giving.&hearts;&hearts;&hearts;</b></h4>
154 | 						<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" class="center-align">
155 | 							<input type="hidden" name="cmd" value="_s-xclick">
156 | 							<input type="hidden" name="hosted_button_id" value="46Q5USNZNGKML">
157 | 							<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online!">
158 | 							<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
159 | 						</form>
160 | 					</td>
161 | 				</tr>
162 | 			</table>
163 | 		</div>
164 | 	</div>
165 | 	<script>
166 | 
167 | 	function syntaxHighlight(json) {
168 | 		json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
169 | 		return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) {
170 | 			var cls = 'number';
171 | 			if (/^"/.test(match)) {
172 | 				if (/:$/.test(match)) {
173 | 					cls = 'key';
174 | 				} else {
175 | 					cls = 'string';
176 | 				}
177 | 			} else if (/true|false/.test(match)) {
178 | 				cls = 'boolean';
179 | 			} else if (/null/.test(match)) {
180 | 				cls = 'null';
181 | 			}
182 | 			return '<span class="' + cls + '">' + match + '</span>';
183 | 		});
184 | 	}
185 | 	
186 | 	function output(inp) {
187 | 		document.getElementById('output').innerHTML = inp;
188 | 	}
189 | 	
190 | 	function makeJSON() {
191 | 		jsonObj = [];
192 | 		mainArray = {};
193 | 		mainArray.android_play_store_link = "";
194 | 		mainArray.ios_app_store_link = "";
195 | 		var fileObj = document.getElementById('files');
196 | 		if (fileObj.files.length > 30) {
197 | 			alert("You can only upload a maximum of 30 files");
198 | 		} else {
199 | 			for (var i = 0; i < fileObj.files.length; i++) {
200 | 				item = {};
201 | 				item["image_file"] = fileObj.files[i].name;
202 | 				item["emojis"] = [];
203 | 				item["emojis"].push("");
204 | 				item["emojis"].push("");
205 | 				jsonObj.push(item);
206 | 			}
207 | 		}
208 | 		
209 | 		mainArray["sticker_packs"] = [];
210 | 		innerValue = {};
211 | 		innerValue["identifier"] = document.getElementById('identifier').value;
212 | 		innerValue["name"] = document.getElementById('name').value;
213 | 		innerValue["publisher"] = document.getElementById('publisher').value;
214 | 		innerValue["tray_image_file"] = document.getElementById('tray_image_file').value;
215 | 		innerValue["image_data_version"] = document.getElementById('image_data_version').value;
216 | 		innerValue["avoid_cache"] = document.getElementById('avoid_cache').checked;
217 | 		innerValue["publisher_email"] = document.getElementById('publisher_email').value;
218 | 		innerValue["publisher_website"] = document.getElementById('publisher_website').value;
219 | 		innerValue["privacy_policy_website"] = document.getElementById('privacy_policy_website').value;
220 | 		innerValue["license_agreement_website"] = document.getElementById('license_agreement_website').value;
221 | 		innerValue["stickers"] = [];
222 | 		innerValue["stickers"] = jsonObj;
223 | 		mainArray["sticker_packs"].push(innerValue);
224 | 		output(syntaxHighlight(JSON.stringify(mainArray, undefined, 4)));
225 | 	}
226 | 	
227 | 	function copyJSON() {
228 | 		const copyText = document.getElementById("output").textContent;
229 | 		if(copyText) {
230 | 			const textArea = document.createElement('textarea');
231 | 			textArea.textContent = copyText;
232 | 			document.body.append(textArea);
233 | 			textArea.select();
234 | 			document.execCommand("copy");
235 | 			M.toast({html: 'JSON Copied Successfully.'});
236 | 		} else {
237 | 			M.toast({html: 'You can not copy empty JSON'});
238 | 		}
239 | 	}
240 | 	
241 | 	function clearJSON() {
242 | 		document.getElementById("output").textContent = "";
243 | 	}
244 | </script>
245 | 
246 | <!-- Place this tag in your head or just before your close body tag. -->
247 | <script async defer src="https://buttons.github.io/buttons.js"></script>
248 | </body>
249 | </html>
250 | 


--------------------------------------------------------------------------------