Skip to content

Commit

Permalink
[iOS] Update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
@amrit-1901
amrit-1901 committed Dec 7, 2018
1 parent 57d97b1 commit 1352faa
Showing 1 changed file with 23 additions and 38 deletions.
61 changes: 23 additions & 38 deletions iOS/README.md
View file
@@ -1,13 +1,15 @@
# iOS Stickers Apps for WhatsApp

### IMPORTANT NOTICE ABOUT iOS APPS
Apple will reject or remove your sticker app from the App Store if it uses the UI template that WhatsApp provides. When creating an iOS sticker app, please make sure to develop a unique user interface with your own styling to comply with Apple's App Store guidelines. Do *not* use our sample app's UI as is, please significantly modify the UI before submitting. We are still working on updating our full set of documentation and our FAQ to reflect this.

Apple will reject or remove your sticker app from the App Store if it uses the UI sample that WhatsApp provides. When creating an iOS sticker app, please make sure to develop a unique user interface with your own styling to comply with Apple's App Store guidelines. Do *not* use our sample app's UI as is, please significantly modify the UI before submitting. You should also consider adding additional functionality to your app (sharing stickers to other apps, to iMessage, etc) or any other features that you deem suitable. This will assist you in passing Apple's App Store review.
We are still working on updating our full set of documentation and our FAQ to reflect this.

## Overview
If you would like to design your own stickers for WhatsApp, you can package them in an iOS app. You will need to distribute your app via the App Store. Users who download and install your sticker app will be able to add your stickers to their WhatsApp sticker picker/tray, and start sending those stickers from within WhatsApp. A separate app is necessary and it will reside on your phone's home screen just like any other app. Once you add the stickers from the app to WhatsApp, you can remove or uninstall the app from your phone and continue to send those stickers. Stickers on WhatsApp must be legal, authorized, and acceptable. Learn more about acceptable use of our services at <https://www.whatsapp.com/legal/#terms-of-service>.

The sample code provides a simple way for you to drop in your sticker art and build an iOS app with minimal development or coding experience needed. Importantly, while you may use most of the underlying code in our sample app, you *must* make sure to develop a unique user interface with your own styling to comply with Apple's App Store guidelines. Do not use our sample app's UI as is. You must significantly modify the UI before submitting your app to Apple. For advanced developers looking to make richer sticker apps, refer to the section [Advanced Development](#advanced-development) below.
The sample code provides a way for you to understand how the API works. You can also drop in your assets to test if they work correctly with WhatsApp. Importantly, you *must* make sure to develop a unique user interface with your own styling to comply with Apple's App Store guidelines. Do not use our sample app's UI as is. You must significantly modify the UI before submitting your app to Apple.

For a description of how the API works, refer to the [API documentation](#API-documentation) section below.

We recommend you create a version of your sticker app for Android as well to give users of WhatsApp on Android an opportunity to download your sticker app as well.

Expand All @@ -16,13 +18,8 @@ We recommend you refer to the FAQ at https://faq.whatsapp.com/general/26000226 f

* A sticker is an image that has a transparent background and can be sent in a
WhatsApp chat
* Stickers are organized into "packs". Your app can contain anywhere from 1 to
10 packs. Users must explicitly add each pack to WhatsApp one-by-one, so your
app should list each pack separately and each pack must have its own
affordance to add it to WhatsApp (do not try to create "add all packs"
operations).
* Each sticker pack must have a minimum of 3 stickers and a maximum of 30
stickers
* Stickers are organized into "packs". Users must explicitly add each pack to WhatsApp one-by-one, so your app should list each pack separately and each pack must have its own affordance to add it to WhatsApp (do not try to create "add all packs" operations).
* Each sticker pack must have a minimum of 3 stickers and a maximum of 30 stickers
* Stickers must be exactly 512 x 512 pixels
* Stickers will render on a variety of backgrounds, white, black, colored, patterned, etc. Test your sticker art on a variety of backgrounds. For this reason, we recommend you add a 8px #FFFFFF stroke to the outside of each sticker. See the sample PSD referenced at https://faq.whatsapp.com/general/26000226 for more details.
* Stickers must be either in PNG or the [WebP format](https://developers.google.com/speed/webp). Currently, animated WebP, animated PNG, or animated stickers of any kind are not supported. See the section [Converting to WebP](#converting-to-webp) below for information on how to create WebP files.
Expand All @@ -46,19 +43,19 @@ Your sticker art must be in the WebP format. We recommend using the tools you're
* You can install a [plugin](https://github.com/fnordware/AdobeWebM#download) for Photoshop that converts to WebP. Make sure to uncheck the "Save Metadata" checkbox.
* Use [cwebp](https://developers.google.com/speed/webp/), a command line tool

## How to create a sticker app
### Important note about using PNG images
Xcode does some optimizations to every PNG image that is imported. This can lead to files becoming bigger in size and not passing our image size requirement. To prevent this, select the PNG file from the left sidebar and go to the right sidebar and select the first tab (to the left of the question mark button). On the "Type" drop down menu, select "Data". Do this for all of your PNG images (WebP images don't need this treatment).

## How to use the sample app

### Overview
If you would like to create a sticker app using the sample app, you only have to minimally modify the sample app to get up and running quickly.
Follow these steps if you want to test your sticker assets with the sample app.

* After downloading this repo, open the `WAStickersThirdParty.xcodeproj` file with [Xcode](https://itunes.apple.com/us/app/xcode/id497799835).
* Remove the current sample stickers from the `SampleStickers` folder in Xcode
* Drag your sticker images inside the `SampleStickers` folder in Xcode
* A window appears every time you drag an image into Xcode. Make sure that "Copy items if needed" and the `WAStickersThirdParty` target are checked.

### Important note about using PNG images
Xcode does some optimizations to every PNG image that is imported. This can lead to files becoming bigger in size and not passing our image size requirement. To prevent this, select the PNG file from the left sidebar and go to the right sidebar and select the first tab (to the left of the question mark button). On the "Type" drop down menu, select "Data". Do this for all of your PNG images (WebP images don't need this treatment).

### Modifying the sticker_packs.wasticker file
In Xcode, you must also modify the 'sticker_packs.wasticker' file. Replace the values of the metadata with your own. A few notes:

Expand All @@ -72,18 +69,18 @@ The following fields are optional: `ios_app_store_link`, `android_app_store_link

If your app has more than 1 sticker pack, you will need to reference it in `sticker_packs.wasticker`. Simply create a second array within the "sticker_packs" section of the file and include all the metadata (name, identifier, etc) along with all the references to the sticker files.

### Modify the user interface and layout
While the iOS sample app provides a template UI, this template is strictly intended as an example. Apple has strict App Store guidelines that advise against using templates in apps, so you *must* make sure to develop a unique user interface with your own styling to comply with Apple's App Store guidelines. Do not use our sample app's UI as is (note: if developing an Android version of your app, you may use our sample app's template and UI as is without much modification needed).
### Build the sample app
Make sure to run and test your sticker app. You can use the simulator to run the app, but you need to install your app on an actual iPhone to test and see if it works with WhatsApp.

A couple tips:
* You may continue to use the underlying code of the sample app but make sure to modify the user interface
* The UI folder in the sample app containst most of the user interface code in the sample app.
* Do not simply reskin the sample app. In other words, changing the background color, button color, or other minor elements of the user interface will not be sufficient.
* Xcode provides some tools to make building layouts and UI a bit simpler. See https://developer.apple.com/xcode/interface-builder/ for more information.
* You should also consider adding additional functionality to your app (sharing stickers to other apps, to iMessage, etc) or any other features that you deem suitable. This will assist you in passing Apple's App Store review.
## Submit your app
To submit your app to the App Store, you'll need to enroll as an Apple Developer at [https://developer.apple.com/programs/enroll/](https://developer.apple.com/programs/enroll/).

Then, follow the instructions for publishing your app to the App Store: [https://help.apple.com/xcode/mac/current/#/dev442d7f2ca](https://help.apple.com/xcode/mac/current/#/dev442d7f2ca).

When preparing your app for submission in iTunes Connect, you'll have the option to add keywords associated with your app. WhatsApp can launch the App Store and perform a search for other sticker pack apps. To make sure that your app is shown in this list, add the keyword `WAStickers` when setting up your app in App Store connect. You can use additional keywords, but make sure you at least use this one.

### Required before you publish your app
You must change the bundle identifier from the one provided. You cannot use anything that includes `WA.WAStickersThirdParty`. This is the only restriction on what you put as a bundle ID.
Your bundle identifier cannot use anything that includes `WA.WAStickersThirdParty`. This is the only restriction on what you put as a bundle ID.

To change the bundle identifier:

Expand All @@ -101,20 +98,8 @@ To change your app's icon:
* You'll see a lot of sections. The sections of our interest are "iPhone App" and "App Store" (required for publishing to the App Store).
* The 2x icon is 120x120 pixels and the 3x icon is 180x180. Just drag your images into the corresponding 2x or 3x bucket. If you have a 1024x1024 image for the App Store, drag it into the "App Store" bucket.

### Build the sample app
Make sure to run and test your sticker app. You can use the simulator to run the app, but you need to install your app on an actual iPhone to test and see if it works with WhatsApp.

To prepare your app for submission to the App Store, you will to build an archive of your app. For more information, visit [https://help.apple.com/xcode/mac/current/#/devf37a1db04](https://help.apple.com/xcode/mac/current/#/devf37a1db04).

## Submit your app
To submit your app to the App Store, you'll need to enroll as an Apple Developer at [https://developer.apple.com/programs/enroll/](https://developer.apple.com/programs/enroll/).

Then, follow the instructions for publishing your app to the App Store: [https://help.apple.com/xcode/mac/current/#/dev442d7f2ca](https://help.apple.com/xcode/mac/current/#/dev442d7f2ca).

When preparing your app for submission in iTunes Connect, you'll have the option to add keywords associated with your app. WhatsApp can launch the App Store and perform a search for other sticker pack apps. To make sure that your app is shown in this list, add the keyword `WAStickers` when setting up your app in App Store connect. You can use additional keywords, but make sure you at least use this one.

## Advanced development
For advanced developers looking to make a more custom integration and fully control the UI of their sticker apps, follow the instructions below. We provide built-in helper classes and methods to easily create objects to represent your stickers and sticker pack, and to send them to the WhatsApp app.
## API documentation
We provide built-in helper classes and methods to easily create objects to represent your stickers and sticker packs, and to send them to the WhatsApp app.

### Files to use
Copy the following files from the sample app into your Xcode project:
Expand Down

0 comments on commit 1352faa

Please sign in to comment.