Aviary Integration step by step


Aviary is a better photo editing solution for web & mobile apps.  Aviary simplifies your app’s workflow by letting your users edit their photos right where they belong: in your app. The Aviary editor is embeddable, and can be added to any website or mobile app with just a few lines of code.

How to use aviary editing tool?
1. Create an account on Aviary.
2. After registering go to the “Web” tab and click “Get Key”  http://www.aviary.com/web-key , it will give you Access key and secret number.
3. Click on “Code Generator” tab  http://www.aviary.com/code-generator  set your preferred settings (you better preview your widget), get the generated code.
4. Embed your code in HTML page.

Let’s talk a little on this code, if we start from top to bottom we will find an image tag

This is the holder of the image that will be edited.  After that you will find a script tag contains a source link to online aviary JavaScript library to load the feather code (feather is the JavaScript library name) and this must be at the beginning before calling the widget.

The next script tag contains the instance of feather, notice that there is some parameters which is the default, you can add some or remove, some of them are mandatory like ‘apiKey’ , and other are optional like ‘openType’ you can find all parameters in the documentation http://www.aviary.com/web-documentation#intro , the ‘onSave’ event will be called by clicking save button after finish editing your photo, it takes two parameters ‘imageID’ and ‘newURL’, imageID is the id of the image tag and newURL is URL of the new photo will be replaced by the old one.

‘launchEditor’ is the function that launch the aviary editor tool by calling ‘featherEditor.launch’ by passing two parameters (id , src), id parameter is id of the image tag and src parameter is the image source.

Notice: The src parameter is required if the image to be edited is on a different host than the enclosing HTML page, and it has to be on the form ‘http://example.com/abc.jpg’.

At last there is an input tag to launch the editor by calling ‘launchEditor’ function

5. Launch your page and try your widget

6. Click on Edit photo and enjoy.

7. After finish editing save your work, the new image will be replaced by the old one



         Code sample : AviarySample