React Quick-Start Guide
Start using Confection on your React site with 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 "Install Confection" (If you're accessing your account for the first time, this will be the default screen.) Next, select "React" to download the relevant scripts.
Click "Downloads" to save the necessary React files to your desktop. Unzip them, and upload the files to your project.
Next, register the dependency to your package.json file using the following command:
@confection/cable: "file:./confectionCable"
Then, run npm install/update
Make sure to define a route for your client page. For example, if your client page is example.com/my-cable-url, you could define a GET route with app.get('/my-cable-url', (req, res) => confectionCable(req, res)) or a POST route with app.post('/my-cable-url', (req, res) => confectionCable(req, res))
Next, 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 CodeIf your site's domain is example.com and you defined your Confection Cable URL as example.com/my-cable-url, add https://example.com/my-cable-url -- https:// included -- to the "Cable URL" field. To avoid mixed content errors, make sure you load example.com/my-cable-url over https:// vs. http://
Once that's done, paste the code above your site's </head> tag.
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 React? Leave them below.
You can also use the chat app in the lower right corner.