doppelme logo

Integrating DoppelMe Avatars In Other Websites


You can integrate DoppelMe avatars within your own website or application. The benefits of using DoppelMe avatars include
  1. You retain control of how the avatars are presented on your site - this allows you to ensure the avatars remain in theme with your site.
  2. You don't need to moderate the content of users' avatars
Although there are no hard and fast rules for utilising DoppelMe avatars within your site, we present a couple of example methodologies below.

basic integration | advanced integration






Basic Integration

This is the easiest and fastest way to add DoppelMe avatars to your website.

Suggested Methodology

  1. Your users need to supply you with their DoppelMe Key (a DoppelMe Key looks something like DM123456ABC. It will never be longer than 20 characters) which you should save along with your users details.
  2. If a user does not already have a DoppelMe, then you need to instruct them to visit www.doppelme.com to create their own avatar and receive their Key. They should then supply this key to you which you should store for them.
  3. Wherever you wish to show their avatar you can do so in your website by programmatically creating the appropriate image link.
e.g.
<img src="http://www.doppelme.com/DM123456ABC/avatar.png" border="0">
You can show a cropped version of their avatar
<img src="http://www.doppelme.com/DM123456ABC/crop.png" border="0">
And resize as necessary
<img src="http://www.doppelme.com/80/DM123456ABC/crop.png" border="0">
(note that you should change the size within the URL rather than just setting the size as part of the img tag to avoid the image becoming distorted) You can also change the background of the avatar by either adding the 6 character RGB colour or TRANSPARENT as part of the image tag.
<img src="http://www.doppelme.com/FFFFFF/80/DM123456ABC/crop.png">
<img src="http://www.doppelme.com/TRANSPARENT/80/DM123456ABC/crop.png">
(this sets a background colour or makes it transparent. This will override any backgrounds that the users has saved with their avatar)

More

As with all user supplied information, please remember to strip out any HTML characters from keys supplied by your users before displaying it as part of an img tag above. More examples of how you can manipulate the avatar images can be found on the DoppelMe Website





Advanced Integration

DoppelMe also supplies a SOAP API which allows you to hook your website or application directly into DoppelMe. This requires a little more coding than the basic method above, but provides a more seamless integration within your own website.

API Overview

Using the API allows your website to talk directly to the DoppelMe avatar engine and so allows you to create and manipulate avatars without requiring your users to leave your site. To use the API, you will need to obtain a Partner ID and Key from us (please contact us to have this genernated for you).

The API
http://services.doppelme.com
Documentation supporting the API
API documentation

Suggested Roadmap

One suggested roadmap for integrating avatars within your site is to use the following steps
  1. Ask your users if they already have a doppelme account and if so, use the AssignPartnerID API call to link their existing DoppelMe account with your site. This allows users to use the same avatar around the web.
  2. (optional) If the user links in an existing account (it is possible that they may have more than 1 avatar associated with their account). You may wish to allow the user to choose which of their avatars they would like to use on your site.
  3. If they do not already have an account, allow them to create one by supplying a name to give their first avatar. You should use the CreateDoppelMeAccount API call to complete this
  4. Once you have obtained the doppelme key (usually of the format DM123456ABC) for a user you should store this information in your users account. Your user's avatar can then be shown anywhere on your site using the standard DoppelMe format as shown at the top of the document.
  5. You can let your user edit their avatar at any time by calling the doppelme site via an iframe. All formatting of doppelme site is stripped out, allowing you to place the doppelme system within your own site template. Further formatting of the content within the iframe can be made by uploading a partner specific style sheet to the server.

Example Code

Example ASP code which provides full illustration of integrating avatars following the above roadmap.
example code (ASP)
Example PHP code. This is an almost straight port of the above code but using PHPs SOAP library.
example code (PHP)