We’ve made it easier to upsell premium features with product specific options. Customers can try out exclusive features before making a purchase, on any site, even without Cloudflare account! Here’s an example of Lead Box using product specific radio buttons:

Previewing premium features in Lead Box

In this example, a customer can choose to see the newsletter option after choosing the "Pro" plan. Developers can now update the Live Preview in response to this choice. We’ve added new "_product" keyword for this event. Here’s a snippet on how Lead Box handles a customer changing products without refreshing the page:

{
  "preview": {
    "handlers": [
      {
        "options": ["_default"],
        "execute": "INSTALL_SCOPE.setOptions(INSTALL_OPTIONS)"
      },
      {
        "options": ["_product"],
        "execute": "INSTALL_SCOPE.setProduct(INSTALL_PRODUCT)"
      }
    ]
  }
}

let options = INSTALL_OPTIONS
let product = INSTALL_PRODUCT

function renderApp () {/*...*/}

window.INSTALL_SCOPE = {
  setOptions (nextOptions) {
    options = nextOptions
    renderApp()
  },
  setProduct (nextProduct) {
    product = nextProduct
    renderApp()
  }
}

Our previous newsletter included two of our most requested features: customer feedback, and install metrics. Together these features have helped developers reach out to their customers and track down issues. Customers can now share their feedback publically with comments and ratings:

Revealing older comments.

Comments for previous releases are initially hidden to emphasize the most recent feedback. As customers send in new feedback, previous ratings will have less of an impact on your app’s sentiment. Apps that score well with customers will gradually increase your visibility in the public listing as well!

We’ve saved the best for last! App developers can now manage a customer’s DNS records. The simplest way to define a DNS record is directly in your app’s install.json file. This for example, would allow a customer to create a CNAME to send traffic to your domain, and insert a A record on their root domain:

{
  "resources": [/*...*/],
  "hooks": [/*...*/],
  "options": {
    "properties": {
      "subdomain": {
        "type": "string"
      }
    }
  },
  "dns": [
    {
      "type": "CNAME",
      "name": "{{subdomain}}",
      "content": "shops.myservice.com"
    },
    {
      "type": "A",
      "content": "1.2.3.4",
      "ttl": 60,
      "proxied": true
    }
  ]
}

The customer can then confirm your changes after before completing their installation.

Requesting permission to access a customer’s email address and DNS entries.

DNS records make it possible to add new records to a customer’s account for your email services, blogging platforms, customer management systems, and much, much more!

We’ve made hundreds of changes since our last newsletter, some more visible than others. Here’s a quick recap of some our favorites:

• New Cloudflare customers are onboarded with apps after registration

• Updated docs on “item add” event

• Developers can now optionally link to their public GitHub repository

• A new input type: Numbers with units!

In the spirit of Thanksgiving, we raise a gravy boat to everyone who made this winter a little warmer. To the all the Cloudflarians and developers who sent in feedback, we say thank you!

Reach out at @CloudflareApps and let us know what you’d like to see next!!!

Until next time! ⛄️️

— Teffen

Powerful tools built by world-class developers, delivered by Cloudflare, easily added to your website.

Up to $100k in Cloud Credits

Cloudflare Apps makes it easy to get what you build installed, but building a great app also requires great infrastructure. We’ve partnered with Google to offer app developers like you up to $100,000 in free Google Cloud credits to support the apps you build.

Check it out ›

.content-box { margin: 1em auto; max-width: 100%; box-sizing: border-box; } .content-box img { padding: .5em; border: 1px solid #ddd; border-radius: 3px; max-height: 100%; box-sizing: border-box; } .content-box[data-image="1"] img { background-color: #f3f3f3; padding: 0; } .content-box[data-image="2"] img { background-color: #fff; padding: 0; } .content-box[data-image="3"] img { background-color: #eee; padding: 0; } @media (min-width: 768px) { .content-box[data-image="1"] img { height: 314px; } .content-box[data-image="2"] img { height: 449px; } .content-box[data-image="3"] img { height: 428px; } } .content-footer { display: flex; align-items: center; justify-content: center; flex-flow: column; padding: 1em .5em; background: #272727; color: #f1f1f1; line-height: 1.533; position: absolute; left: 0; right: 0; } .content-footer .email-pitch { text-align: center; } .content-footer #mc-embedded-subscribe-form { display: flex; align-items: center; } .content-footer #mce-responses { margin-left: .5em; } .content-footer #mce-EMAIL { flex: 0 1 auto !important; width: 245px; margin: 0; } .content-footer #mce-EMAIL, .content-footer #mc-embedded-subscribe { height: 2.4em; font-size: 1.2em; line-height: 1; } .content-footer #mc-embedded-subscribe { padding: .55em 1em; font-weight: 500; } .content-footer #mc-embedded-subscribe-form, .content-footer #mc-embedded-subscribe-form > * { flex: 0 0 auto; } .content-footer .email-container { display: flex; } .content-footer .playbook-container { display: flex; align-items: center; } .content-footer .content-accent { flex: 0 0 auto; } .content-footer .content-accent img { height: 145px; margin-right: 2em; } .content-footer .content-headline { font-size: 2.1em; font-weight: bold; } .content-footer .content-description { font-size: .9em; max-width: 600px; margin-bottom: 1em; } @media (max-width: 768px) { .content-footer .email-container { flex: 1 1 auto; width: 100%; } .content-footer .playbook-container { flex-flow: column; } } /* Floating Sidebar */ body.floating-sidebar .primary-content, body.floating-sidebar .post-content { width: 100% !important; } body.floating-sidebar aside.sidebar { float: right !important; margin-bottom: 0.5em; } .post-content, .post-header { max-width: 36em; } body.floating-sidebar .post-content, body.floating-sidebar .post-header { max-width: none; } body.floating-sidebar .footer-nav { width: 100% !important; } /* Social */ .social { display: flex; align-items: center; } /*.fb_iframe_widget { padding-top: 3px; padding-right: 1px; }*/ .social > * + * { margin-right: 0 !important; margin-left: 7px !important; } .social > .IN-widget { margin-bottom: -2px !important; margin-left: 9px !important; } /* Hide period after author */ .post-header .meta a { border-right: 5px solid white; margin-right: -5px; position: relative; } /* Post */ body { background-color: white; } .post-header, .post-content p, .post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content pre, .post-content ul, .post-content figcaption { display: block; margin-left: auto; margin-right: auto; width: 75%; } .post-content pre { width: 55%; font-size: .7em; margin-bottom: 1.9em; } .post-content figcaption { text-align: center; font-style: italic; opacity: .8; margin-top: 0.2em; margin-bottom: 1.9em; font-size: .9em; } pre, code { font-size: inherit; line-height: inherit; } section.primary-content { font-size: 16px; line-height: 1.6; color: black; } blockquote { padding-bottom: 1.5em; padding-top: 1em; font-style: italic; font-size: 1.2rem; } blockquote.pull-quote-centered { font-size: 1.2em; text-align: center; max-width: 100%; margin-left: auto; margin-right: auto; } blockquote blockquote { margin-left: 1em; padding-left: 1em; border-left: 5px solid rgba(0, 0, 0, 0.2); padding-bottom: 0.5em; padding-top: 0.5em; margin-bottom: 0.5em; margin-top: 0.5em; } p.attribution { color: #666; font-size: 0.8em; padding-bottom: 1em; } a code.year { text-decoration: underline; } .closing-cards #mc_embed_signup .mc-field-group { margin: 0.75em 0; } .closing-cards #mc_embed_signup input { font-size: 1.5em; height: auto; } .closing-cards #mc_embed_signup input[type="email"] { border: 1px solid #bcbcbc; border-radius: 2px; margin-bottom: 0; } .closing-cards #mc_embed_signup input[type="submit"] { background: #f38020; color: #fff; padding: .8em 1em .8em 1em; white-space: nowrap; line-height: 1.2; text-align: center; border-radius: 2px; border: 0; display: inline-block; text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: subpixel-antialiased; user-select: none; -webkit-appearance: none; appearance: none; letter-spacing: .04em; text-indent: .04em; cursor: pointer; } .closing-cards #mc_embed_signup div.mce_inline_error { background-color: transparent; color: #C33; padding: 0; display: inline-block; font-size: 0.9em; } .closing-cards #mc_embed_signup p:not(:empty) { line-height: 1.5; margin-bottom: 2em; } .closing-cards #mc_embed_signup input[type="email"] { font-size: 20px !important; width: 100% !important; padding: .6em 1em !important; } .closing-cards #mc_embed_signup .mc-field-group { margin: 0 !important; } .closing-cards #mc_embed_signup input[type="submit"] { font-size: 20px !important; margin-top: .5em !important; padding: .6em 1em !important; } .closing-cards #mc_embed_signup div.mce_inline_error { padding: 0; margin: 0; color: #F38020 !important; } aside.section.learn-more { display: none; } .closing-cards { background: #eee; width: 100%; list-style-type: none; margin-left: 0; } .closing-card { width: calc(50% - 10px) !important; font-size: 20px; padding: 1.5em; display: inline-block; box-sizing: border-box; vertical-align: top; } #mc_embed_signup { max-width: 400px; margin: 1em auto; } @media (min-width: 768px) { #mc_embed_signup { margin-left: 1em; } } @media (max-width: 788px){ .closing-card { width: 100% !important; } .closing-card + .closing-card { border-top: 10px solid white; } }

(function () { 'use strict'

document.body.style.visibility = 'hidden'

function fakeReady (fn) { if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', fn) } else { fn() } }

window.$ = window.jQuery = function fakejQuery () { return { ready: fakeReady, fitVids: function () { // if (window.$.fn.fitVids) { // window.$.fn.fitVids.apply(window.$.fn, arguments) // } } } }

window.$.fn = window.$.fn || {}

function restyleBlog () { 'use strict'

if (window.innerWidth >= 800) {
  var sidebar = document.querySelector('aside.sidebar')
  var header = document.querySelector('header.post-header')
  var post = document.querySelector('article.post')

  try {
    post.insertBefore(sidebar, header)
    document.body.className += ' floating-sidebar'
  } catch (e) { console.log('Style Error', e)}
}

try {
  document.querySelector('body > .wrapper .sidebar').style.display = 'none'
} catch (e) { console.log('Style Error', e)}

try {
  var tagFooter = document.querySelector('.post-content + footer')
  tagFooter.appendChild(document.querySelector('.post-header .social'))
} catch (e) { console.log('Style Error', e)}

function resizeFooter () {
  post.style.paddingBottom = footer.clientHeight + 'px'
}

try {
  var signup = document.querySelector('#mc\_embed\_signup')
  signup.querySelector('#mce-EMAIL').placeholder = 'email@example.com'
  signup.querySelector('#mc-embedded-subscribe').textContent = 'Get Updates'
  signup.querySelector('#mc-embedded-subscribe').className += ' btn-warning'

  var post = document.querySelector('.post-content')
  var footer = post.querySelector('.content-footer')
  footer.querySelector('.email-container').appendChild(signup)

  window.addEventListener('resize', resizeFooter)
  resizeFooter()
} catch (e) { console.log('Style Error', e)}

document.body.style.visibility = ''

}

fakeReady(restyleBlog) })()

Since launch, we’ve received hundreds of feature requests from developers and users alike. Feedback has been the source of some our most popular features. This month’s post is celebration of the innovation achieved when great ideas are shared.

Let’s dive in!

Continuing with the theme of feedback, App developers can now track their apps’ popularity and growth:

App usage by month.

The usage charts help identify which changes have a positive impact on your app.

If you’ve created a paid app you can also track its financial performance:

App revenue & churn.

Charts and graphs are great for tracking trends, but what do your users actually think of your app? Wonder no longer; users can now leave comments when adding and removing apps from their site. Each comment includes sentiment tags and an optional message from the user.

Comments left by users before and after installing an app.

Cloudflare users have always been able to select which routes their apps are active, though this was too coarse for apps with arrays of options. We've introduced Page Selectors to limit entries to specific pages:

Limiting YouTube videos to specific routes on a site.

Page selectors are great for apps that create multiple elements such as arrays in YouTube’s videos, or CSSGram’s image filters. Developers can also use them to target existing elements on specific pages. Apps like Shepherd can use Page Selectors to insert user guides on specific pages too!

We've included some updates — on App updates! Developers can now add release notes in their submissions:

Communicating your recent changes to users.

Your release notes will appear alongside other pending updates in the user’s Cloudflare Dashboard:

Users are notified of pending updates when visiting Cloudflare.

I want to give a huge shout-out to the developers who have sent us their feedback and suggestions. Thank you again for joining us on this amazing adventure. Reach out at @CloudflareApps and let us know what you’d like to see next!!!

Until next time! ?

— Teffen

Powerful tools built by world-class developers, delivered by Cloudflare, easily added to your website.

Just for you

The new App Developer Playbook features a step-by-step marketing guide showing you how to make money selling your Cloudflare Apps. It was written using all of the knowledge and experience we’ve gained releasing Apps to Cloudflare users.

Check it out ›

.content-box { margin: 1em auto; max-width: 100%; box-sizing: border-box; } .content-box img { padding: .5em; border: 1px solid #ddd; border-radius: 3px; max-height: 100%; box-sizing: border-box; } .content-box[data-image="1"] img { background-color: #fff; } .content-box[data-image="2"] img { background-color: #fff; } .content-box[data-image="3"] img { background-color: #eee; } .content-box[data-image="4"] img { background-color: #f3f3f3; } .content-box[data-image="5"] img { background-color: #f3f3f3; } .content-box[data-image="6"] img { background-color: #ebebeb; } @media (min-width: 768px) { .content-box[data-image="1"] img { height: 270px; } .content-box[data-image="2"] img { height: 270px; } .content-box[data-image="3"] img { height: 250px; } .content-box[data-image="4"] img { height: 460px; } .content-box[data-image="5"] img { height: 280px; } .content-box[data-image="6"] img { height: 250px; } } .content-footer { display: flex; align-items: center; justify-content: center; flex-flow: column; padding: 1em .5em; background: #272727; color: #f1f1f1; line-height: 1.533; position: absolute; left: 0; right: 0; } .content-footer .email-pitch { text-align: center; } .content-footer #mc-embedded-subscribe-form { display: flex; align-items: center; } .content-footer #mce-responses { margin-left: .5em; } .content-footer #mce-EMAIL { flex: 0 1 auto !important; width: 245px; margin: 0; } .content-footer #mce-EMAIL, .content-footer #mc-embedded-subscribe { height: 2.4em; font-size: 1.2em; line-height: 1; } .content-footer #mc-embedded-subscribe { padding: .55em 1em; font-weight: 500; } .content-footer #mc-embedded-subscribe-form, .content-footer #mc-embedded-subscribe-form > * { flex: 0 0 auto; } .content-footer .email-container { display: flex; } .content-footer .playbook-container { display: flex; align-items: center; } .content-footer .content-accent { flex: 0 0 auto; } .content-footer .content-accent img { height: 260px; margin-right: 2em; } .content-footer .content-headline { font-size: 2.1em; font-weight: bold; } .content-footer .content-description { font-size: .9em; max-width: 600px; margin-bottom: 1em; } @media (max-width: 768px) { .content-footer .email-container { flex: 1 1 auto; width: 100%; } .content-footer .playbook-container { flex-flow: column; } } /* Floating Sidebar */ body.floating-sidebar .primary-content, body.floating-sidebar .post-content { width: 100% !important; } body.floating-sidebar aside.sidebar { float: right !important; margin-bottom: 0.5em; } .post-content, .post-header { max-width: 36em; } body.floating-sidebar .post-content, body.floating-sidebar .post-header { max-width: none; } body.floating-sidebar .footer-nav { width: 100% !important; } /* Social */ .social { display: flex; align-items: center; } /*.fb_iframe_widget { padding-top: 3px; padding-right: 1px; }*/ .social > * + * { margin-right: 0 !important; margin-left: 7px !important; } .social > .IN-widget { margin-bottom: -2px !important; margin-left: 9px !important; } /* Hide period after author */ .post-header .meta a { border-right: 5px solid white; margin-right: -5px; position: relative; } /* Post */ body { background-color: white; } .post-header, .post-content p, .post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content figcaption { display: block; margin-left: auto; margin-right: auto; width: 75%; } .post-content figcaption { text-align: center; font-style: italic; opacity: .8; margin-top: 0.2em; margin-bottom: 1.9em; font-size: .9em; } pre, code { font-size: inherit; line-height: inherit; } section.primary-content { font-size: 16px; line-height: 1.6; color: black; } blockquote { padding-bottom: 1.5em; padding-top: 1em; font-style: italic; font-size: 1.2rem; } blockquote.pull-quote-centered { font-size: 1.2em; text-align: center; max-width: 100%; margin-left: auto; margin-right: auto; } blockquote blockquote { margin-left: 1em; padding-left: 1em; border-left: 5px solid rgba(0, 0, 0, 0.2); padding-bottom: 0.5em; padding-top: 0.5em; margin-bottom: 0.5em; margin-top: 0.5em; } p.attribution { color: #666; font-size: 0.8em; padding-bottom: 1em; } a code.year { text-decoration: underline; } .closing-cards #mc_embed_signup .mc-field-group { margin: 0.75em 0; } .closing-cards #mc_embed_signup input { font-size: 1.5em; height: auto; } .closing-cards #mc_embed_signup input[type="email"] { border: 1px solid #bcbcbc; border-radius: 2px; margin-bottom: 0; } .closing-cards #mc_embed_signup input[type="submit"] { background: #f38020; color: #fff; padding: .8em 1em .8em 1em; white-space: nowrap; line-height: 1.2; text-align: center; border-radius: 2px; border: 0; display: inline-block; text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: subpixel-antialiased; user-select: none; -webkit-appearance: none; appearance: none; letter-spacing: .04em; text-indent: .04em; cursor: pointer; } .closing-cards #mc_embed_signup div.mce_inline_error { background-color: transparent; color: #C33; padding: 0; display: inline-block; font-size: 0.9em; } .closing-cards #mc_embed_signup p:not(:empty) { line-height: 1.5; margin-bottom: 2em; } .closing-cards #mc_embed_signup input[type="email"] { font-size: 20px !important; width: 100% !important; padding: .6em 1em !important; } .closing-cards #mc_embed_signup .mc-field-group { margin: 0 !important; } .closing-cards #mc_embed_signup input[type="submit"] { font-size: 20px !important; margin-top: .5em !important; padding: .6em 1em !important; } .closing-cards #mc_embed_signup div.mce_inline_error { padding: 0; margin: 0; color: #F38020 !important; } aside.section.learn-more { display: none; } .closing-cards { background: #eee; width: 100%; list-style-type: none; margin-left: 0; } .closing-card { width: calc(50% - 10px) !important; font-size: 20px; padding: 1.5em; display: inline-block; box-sizing: border-box; vertical-align: top; } #mc_embed_signup { max-width: 400px; margin: 1em auto; } @media (min-width: 768px) { #mc_embed_signup { margin-left: 1em; } } @media (max-width: 788px){ .closing-card { width: 100% !important; } .closing-card + .closing-card { border-top: 10px solid white; } }

(function () { 'use strict'

document.body.style.visibility = 'hidden'

function fakeReady (fn) { if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', fn) } else { fn() } }

window.$ = window.jQuery = function fakejQuery () { return { ready: fakeReady, fitVids: function () { // if (window.$.fn.fitVids) { // window.$.fn.fitVids.apply(window.$.fn, arguments) // } } } }

window.$.fn = window.$.fn || {}

function restyleBlog () { 'use strict'

if (window.innerWidth >= 800) {
  var sidebar = document.querySelector('aside.sidebar')
  var header = document.querySelector('header.post-header')
  var post = document.querySelector('article.post')

  try {
    post.insertBefore(sidebar, header)
    document.body.className += ' floating-sidebar'
  } catch (e) { console.log('Style Error', e)}
}

try {
  document.querySelector('body > .wrapper .sidebar').style.display = 'none'
} catch (e) { console.log('Style Error', e)}

try {
  var tagFooter = document.querySelector('.post-content + footer')
  tagFooter.appendChild(document.querySelector('.post-header .social'))
} catch (e) { console.log('Style Error', e)}

function resizeFooter () {
  post.style.paddingBottom = footer.clientHeight + 'px'
}

try {
  var signup = document.querySelector('#mc\_embed\_signup')
  signup.querySelector('#mce-EMAIL').placeholder = 'email@example.com'
  signup.querySelector('#mc-embedded-subscribe').textContent = 'Get Updates'
  signup.querySelector('#mc-embedded-subscribe').className += ' btn-warning'

  var post = document.querySelector('.post-content')
  var footer = post.querySelector('.content-footer')
  footer.querySelector('.email-container').appendChild(signup)

  window.addEventListener('resize', resizeFooter)
  resizeFooter()
} catch (e) { console.log('Style Error', e)}

document.body.style.visibility = ''

}

fakeReady(restyleBlog) })()