Cloudflare Apps Platform Update: November Edition

Since our last newsletter, dozens of developers like you have reached out with ideas for new kinds of apps that weren’t yet possible. These are some of my favorite conversations because they help us find out which features should be prioritized. With your guidance, we’ve spent this month meticulously converting our supply of Halloween candy into those ideas. Let’s dive in and see what’s new!

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!

⚙ Other Platform Improvements

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 protected]'
  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) })()