Generate Your Own Factory Buttons


We provide a standard format for the look and feel of a Factory button and icon that can be used on Web sites. Buttons can be with or without a logo, with or without a counter, and different colors. The Codenvy icon provides a short animation when you hover over the gray area. Here is a table with all possible configurations provided as samples.

"White" 76x20Non-Encoded and Encoded
"Dark"76x20Non-Encoded and Encoded
"Horizontal,White"76x20, counter is variable widthEncoded Only
"Horizontal,Dark"76x20, counter is variable widthEncoded Only
"Vertical,White"76x60Encoded Only
"Vertical,Dark"76x60Encoded Only
"Advanced"104x104Encoded Only
"Advanced with Counter"104x104Encoded Only

Generating a Factory Icon

Within Codenvy

Inside of the IDE, we generate Factory URLs and the associated icons automatically. There is a dialogue box that let’s you test the various configurations and settings, and will give you a script tag to use within your HTML pages. Documentation on creating Factories using the IDE.

Using JavaScript Code

We provide a standard script tag that allows you to generate various forms of the Codenvy icon. Some configurations can be used with non-encoded Factories. Any icons that make use of a counter require encoded Factories. We store the counter state and your image on our servers and generate the appropriate HTML from those items on each Web page refresh.

To configure a button for a non-encoded factory (white) use:

<script type="text/javascript" language="javascript" src="" style="white" url=""></script>

To configure a button for a non-encoded factory (dark) use:

<script type="text/javascript" language="javascript" src="" style="dark" url=""></script>

To configure a button that uses a logo, use the same script tag with the added parameter:

<script type="text/javascript" language="javascript" src=""
style="advanced" logo=URL_TO_YOUR_LOGO url=""></script>

All encoded Factory icons have their configuration stored on the server side, this includes whether the counter is included, if there is an icon, or whether the layout is vertical. Take the hash code ID of an encoded factory that is returned from our REST API that generates the factory and insert it as a parameter on this JavaScript.

<script type="text/javascript" src="" language="javascript"></script>

Codenvy will generate the animated icon with your logo. The logo you provide must be 100×100 pixels in size. We will overlay the gray Codenvy animation on the bottom of your button using CSS. We then layer in a two pixel border around the edge of the combined assets to give it a nice feel.

When you create an encoded Factory, you can pass an image file as part of the multipart Form submission. This image must not have the gray overlay on it. If you would like to see what your logo will look like with the gray on it before submitting it to Codenvy’s service, you can download this PSD file.