The official way to bring visitors to your Cloudflare Apps listing.

Overview

The Cloudflare Install Button can be embedded to your website or Github page to encourage customers to install your Cloudflare App.

Iframe Button

The official way to use the button is to paste the following code to your website or marketing page.

Just replace [ appTitle ] and [ appId or appAlias ] with the appropriate details for your app. These can be found on the Configure page of your app. 

<iframe
  src="https://install.cloudflareapps.com/cta/?appTitle=[ appTitle ]&appId=[ appId or appAlias ]"
  allowTransparency="true"
  scroll="no"
  frameBorder="0"
  style="width: 292px; height: 194px">
</iframe>

Here’s the Iframe Button for the Google Analytics app and the HTML embed code to produce it.

<iframe
  src="https://install.cloudflareapps.com/cta/?appTitle=Google%20Analytics&appId=google-analytics"
  allowTransparency="true"
  scroll="no"
  frameBorder="0"
  style="width: 292px; height: 194px">
</iframe>

The appId can be found on the Configure page of your app. 

<iframe
  src="https://install.cloudflareapps.com?appId=[ appId ]"
  allowTransparency="true"
  scroll="no"
  frameBorder="0"
  style="height: 48px; width: 180px">
</iframe>

You can specify any options you would like to preselect for your visitor when they open the preview page. To do this, provide the JSON and URL encoded options as an additional GET parameter to the install.cloudflareapps.com URL.

Sizes

All dimensions below are listed as width × height.

The larger CTA-style button is designed to be displayed at exactly 292px × 194px.

The inline button supports a wide range of sizes:

Any dimensions between those are acceptable, however we have a few recommended sizes.

Here’s an example button in the “Normal” size:

<iframe
  src="https://install.cloudflareapps.com?appId=[ appId ]"
  allowTransparency="true"
  scroll="no"
  frameBorder="0"
  style="height: 36px; width: 150px">
</iframe>

Image Button

In situations where an <iframe> embed is not an option (e.g. a GitHub README file), you can use the following image button instead.

Install [ appTitle ] with Cloudflare 
<a href="https://cloudflareapps.com/apps/[ appId ]/install?source=button">
  <img
    src="https://install.cloudflareapps.com/install-button.png"
    alt="Install [ appTitle ] with Cloudflare"
    border="0"
    width="150">
</a>