Home > Uncategorized > #Cloudflare App development using Avatar #API

#Cloudflare App development using Avatar #API


Cloudflare, one of the largest CDN / DDOS protection networks in the world launched a $100M developer fund, so I thought I should take the time to learn a bit about it.

Cloudflare apps, are effectively HTML widgets that you can embed in your webpages, I guess to try and make it easier for developers to drag and drop code that was developed by third parties.

The demo video showed how to use Cloudflare apps to embed a Youtube video into a webpage. Obviously a contrived example, since it would be just as easy to embed the youtube video, than to embed a cloudflare app pointing to a youtube video, but it gets you started.

I wanted to create a cloudflare app that implements the functionality of Avatar API (http://www.avatarapi.com) – a service that returns profile pictures from email addresses.

Effectively, the app has two component parts, an install.json file that defines the properties of the app, and app.js a javascript file that implements the app.

Here’s my install.json

“resources”: {
“body”: [
“type”: “script”,
“src”: “./app.js”
“options”: {
“properties”: {
“location”: {
“type”: “object”,
“format”: “element”,
“title”: “location”
“email”: {
“type”: “string”,
“title”: “Email Address”

And here’s my app.js

(function() {
if (INSTALL_OPTIONS.email.indexOf(“@”) == -1) {
INSTALL_OPTIONS.email = “peter.smith@gmail.com”;
var el = CloudflareApps.createElement(INSTALL_OPTIONS.location);
el.innerHTML = “https://www.avatarapi.com/iframe.aspx?email=%20+%20INSTALL_OPTIONS.email%20+%20&size=128“;

Categories: Uncategorized
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: