Documentation

  1. Subscribe your device to receive Push Notifications
  2. Create a record for your Website
  3. Setup the Feedback Widget (optional)
  4. Calling the API directly in your code (advanced)
  5. Example API Call in JSFiddle

Sign up for an account

Sign up for an account to use this service.

Subscribe your device to receive Push Notifications

  1. Using the device that you want to receive notifications on, visit the Devices page and click on the "Subscribe" button.
  2. 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.
  3. Repeat this step if you want to receive notifications on multiple different devices.

Create a record for your Website

  1. Visit the Websites page and click on the "+ Website" button.
  2. 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.
  3. Optionally set a limit for how many messages can be sent by this website on an hourly/daily/weekly/monthly basis.
  4. Click "Save".
  5. 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.
  6. 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)

  1. If you choose to use the floating Feedback icon (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 the PUBLIC_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>
  2. You can also customize the text elements of the widget by adding additional properties like below:
    <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>
    It should make a widget box that looks like this:chatbox dialogOur 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.

Calling the API directly in your code (advanced)

  1. If you want to call the API directly in your code, you can make a fetch call with the Public ID as a parameter:
    let 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!"); } });
    The maximum length of 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!
  2. You will need to design and create your own HTML form and hook into the onsubmit event to call our API.

Example API Call in JSFiddle