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.
If you haven’t already, create a Confection account. If you already have a Confection account, log in.
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.”
Click "API Keys" (or "Get My Keys" if you're accessing your account for the first time). Copy your account ID.
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" > "Plans." 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.
Next, click "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):
Then, click "Save and Deploy."
Click the service name (fancy-firefly-49c1
in the above) to return to the service management page.
At this point you have two options:
Option 1: "I'm using the default Cloudflare worker URL."
Copy the route URL, and skip to the "Add Confection to Your Site" section of this guide. (It's at the very end.)
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.
100::
vs. your actual IPv6 address.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).Now, continue to the last step:
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.
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 example, this is https://fancy-firefly-49c1.sh7172.workers.dev
) To avoid mixed contenet errors, make sure you load the route URL over https://
vs. http://
Once that's done, paste the 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 or add this single line instead:
<script src="https://cdn.jsdelivr.net/gh/studiohyperset/[email protected]/body.js"></script>
Lastly, add the route URL or custom domain/subdomain you created earlier in this step to your account's list of authorized domains. To find this list, click "My Account" inside your Confection account.
That's it. You're done.
After installing Confection, start sending data to any number of different endpoints.
Questions or comments about using Confection with Cloudflare? Leave them below.
You can also use the chat app in the lower right corner.