Cloudflare Quick-Start Guide

Start using Confection with Cloudflare in a few simple steps.

Issues? Questions? Feedback? Leave a comment. Already have a Confection account? Skip to step three. New to Confection? Learn more here.

Get Started

Step One

If you haven’t already, create a Confection account. If you already have a Confection account, log in.

Continue to Step 2

Step Two

Click “My Account” (or “Set Up My Account” if you’re accessing your account for the first time). Enter your contact information, the domain(s) on which you want to use Confection, and select one of our two data storage options. Then, click “Save Changes.”

Continue to Step 3

Step Three

Click "API Keys" (or "Get My Keys" if you're accessing your account for the first time). Copy your account ID.

Continue to Step 4

Step Four

If you need to create a Cloudflare account and/or add your domain, see this help document. Otherwise, log in to your Cloudflare account, and click "Workers."

If this is the first time you've accessed the "Workers" screen, you'll be asked to choose a subdomain and a plan. In most cases, unless your site gets more than 100,000 pageviews per day, the free plan should be sufficient. If you need a paid plan, set that up. Once that's done, proceed as follows.

a. Create Worker and Generate Write Key

From your account homepage, click "Workers" > "Overview" > "Create a Service." Change the default service name if you wish, select "HTTP handler," and click "Create a Service." On the next screen, click "Quick Edit." Paste this code in the code editor (left column):

Next, in your Confection dashboard, visit Install Confection >API Keys. Generate and copy your write key. This key will ensure no domain you haven't added to your dashboard can write data to your Confection account.

Replace PASTE-YOUR-KEY-HERE in the worker script with your key (line 12). Then, click "Save and Deploy," and click the service name (cold-poetry-426b in the video) to return to the service management page.

Copy the complete Worker URL. (That's https://cold-poetry-426b.confection--staging-testing-8236.workers.dev in the video.) You'll need this in the "Add Confection to Your Site" step.

b. Add Route

At this point you have two options:

Option 1: "I want to use the default Cloudflare worker URL." (Recommended)
Click "Websites," and select the site on which you want to install Confection. Then, in the sidebar nav, click "Workers." On the Workers screen, click the "Add route" button. If you want to run Confection sitewide, your route will be *.domain.com/*. Just replace domain with your actual domain name. For more complex routing, see this help document.

Next, select the service you just created and then your preferred environment. (For most users, this will be "production.") Click "Save," and proceed to the "Add Confection to Your Site" section of this guide.


Option 2: "I'm using my own custom worker URL."

If you haven't already added the custom domain to your DNS record, click "Websites" to return to your Cloudflare account homepage. Select the site on which you want to run the Confection worker script and then "DNS." Add an A record for the route URL. Point to 192.0.2.1, and make sure "Proxy" is active. Then, click "Save."

Return to the worker service you created earlier in this step. Click "Workers" > you service's name > "Triggers" > "Add Route." Enter your custom URL here, and click "Add Route." If you don't have a lot of experience working with Cloudflare routes, see this help document.

A few notes for those new to Cloudflare workers and worker routes, especially those with more complex use cases.

  • Whether you're using a custom top-level domain (example.com) or a custom subdomain (sub.example.com), you'll want to make sure the URL you used in step two exists in your Cloudflare DNS record.
  • If you're using IPv6 and a corresponding AAAA record, the record's IPv6 address field should read 100:: vs. your actual IPv6 address.
  • By default, the worker will run on all subdomains and TLDs defined in your Cloudflare DNS record. If you want to run the worker and app on a subdomain and/or limit it to certain pages, you can use asterisk (*) wildcards and paths. There's more information about this in the help document linked above, but here's an example:

    If you want to run your script at sub.example.com but not example.com, you'd enter *sub.example.com/path* in the route input field. (This is the field that reads example.com in the previous screenshot.) Note /path is arbitrary. It could be anything (/xyz, /randompath, &c).

c. Add Confection to Your Site

First, use our code-builder tool to set your privacy options, choose your banner position, and even upload your own logo. Click the button below to get started.

Get Your Custom Code

Make sure you add your complete, secure (ie., https:// included) route URL or custom domain/subdomain you created earlier in this step to the "Cable URL" field. (In the option one video, this is https://cold-poetry-426b.confection--staging-testing-8236.workers.dev/) To avoid mixed contenet errors, make sure you load the route URL over https:// vs. http://

Once that's done, paste the custom code above your site's </head> tag.

Then, paste the following code anywhere between your site's <body> </body> tags.

If character or line limits prevent this, host the script yourself. Copy this script, save it as a JS file (eg., confection.js), and upload it to a server you control. Then, add this above your site’s </body> tag:

<script src="https://domain.com/confection.js"></script>

Just replace https://domain.com/confection.js with the link to the file you just uploaded.

Lastly, add the route URL or custom domain/subdomain you created earlier in the "Create Worker" step to your account's list of authorized domains. (In the video, this is cold-poetry-426b.confection--staging-testing-8236.workers.dev/) To find this list, click "My Account" inside your Confection account.

That's it. You're done.


“I have some questions.”

Step Five: Send Confection Data Anywhere

After installing Confection, start sending data to any number of different endpoints.

"I'd like some help with this."

Next Steps

Install & Integrate Elsewhere

Find Other Quick-Start Guides

"I have some questions."

Contact Us

"I want to see this."

Share It

Discussion

Questions or comments about using Confection with Cloudflare? Leave them below.

"Please contact me. I have some questions."

You can also use the chat app in the lower right corner.