Documentation
Sign up for an account
Sign up for an account to use this service.
Subscribe your device to receive Push Notifications
- Using the device that you want to receive notifications on, visit the Devices page and click on the "Subscribe" button.
- Your browser will ask you for permissions to allow this website to send you Push Notifications. Click "Accept" or "Allow".If your browser doesn't ask you, your browser may be configured to disable all notifications. Please consult your browser settings to re-enable notifications.
- Repeat this step if you want to receive notifications on multiple different devices.
Create a record for your Website
- Visit the Websites page and click on the "+ Website" button.
- Give your record a friendly display name. This name is used on the notification sent to your devices which you can use to differentiate between different websites.
- Optionally set a limit for how many messages can be sent by this website on an hourly/daily/weekly/monthly basis.
- Click "Save".
- Keep note of the "Public ID" generated for your website. You will need to use it on your websites to associate customer submissions with a website.
- If you want to create multiple Public IDs for different areas within the same website, you can create multiple records.
Setup the Feedback Widget (optional)
- If you choose to use the floating Feedback icon () on your website, open any page of your website in a text editor and locate the
<head>
section and insert the below code beneath it, replacing thePUBLIC_ID
with the code you received above.<head> <script async defer src="https://www.ctnr.net/chatbox.min.js" data-ctnr='{"id":"PUBLIC_ID"}'> </script> </head>
- You can also customize the text elements of the widget by adding additional properties like below:It should make a widget box that looks like this:Our widget is just 4.3KB in download size and enough for a lightweight experience. For a more tailored experience, see the next section on how to call our API directly.
<script async defer src="https://www.ctnr.net/chatbox.min.js" data-ctnr='{ "title":"Contact Us", "body":"How can we help you?", "name":"Full Name", "tel":"Email Address", "send":"Submit", "sending":"Wait...", "sent":"Thanks for your feedback!", "img":"https://ctnr.net/jesse.webp", "id":"aBcDe_FgHiJkLmNoPqRsT" }' </script>
Calling the API directly in your code (advanced)
- If you want to call the API directly in your code, you can make a
fetch
call with the Public ID as a parameter:The maximum length oflet job = fetch("https://api.ctnr.net/api/websites/alert", { method: "POST", headers: { "x-requested-with": "XMLHttpRequest", "content-type": "application/json", }, body: JSON.stringify({ id: PUBLIC_ID, msg: "Motion detected at Sector 7G", }), ); job = job.then(function(resp) {return resp.json()}) job = job.then(function(json) { if (json.error) { alert(json.error); } else { alert("Sent!"); } });
msg
is 220 characters. Push Notification providers usually have a smaller limit ranging anywhere between 50 to 220 characters depending on your browser. Please truncate your strings to 220 characters or an error will be returned! - You will need to design and create your own HTML form and hook into the
onsubmit
event to call our API.