JD Visitor Counter - API

How to add a counter to your HTML page

Insert this sample code on your website:

<div>Host All: <span class="host-all">-</span></div>
<div>Host Online: <span class="host-online">-</span></div>
<div>URL All: <span class="url-all">-</span></div>
<div>URL Online: <span class="url-online">-</span></div>

<script src="https://jd-visitor-counter.adaptable.app/script.min.js" async></script>
<script>
  window.addEventListener('load', () => {
    if ('VisitorCounter' in window) VisitorCounter({
      elements: {
        hostAll: '.host-all',
        hostOnline: '.host-online',
        urlAll: '.url-all',
        urlOnline: '.url-online'
      }
    })
  })
</script>

Note: If the user's browser has "Do Not Track" enabled, it will not be counted

Types of counters

• hostAll: Counts people who have visited any page on the domain
• hostOnline: Only counts people who are online on any page of the domain
• urlAll: Counts people who have only visited this site page
• urlOnline: Count people who are online on this page of the site

VisitorCounter

VisitorCounter(options)

options

• elements: object

  Selectors where the counter numbers will appear

  • hostAll: string (CSS selectors)
  • hostOnline: string (CSS selectors)
  • urlAll: string (CSS selectors)
  • urlOnline: string (CSS selectors)

  Example:

   {
     elements: {
       hostAll: '.host-all',
       hostOnline: '#host-online, .online',
       urlAll: '.url-all .users',
       urlOnline: 'span.url-online'
     }
   }

• onUpdate: object

  Run a function when updating the data

  • hostAll: function
  • hostOnline: function
  • urlAll: function
  • urlOnline: function

  Example:

   {
     onUpdate: {
       hostAll: (n) => console.log(n),
       hostOnline: updateOnlineUsersCounter,
       urlAll: function (numberOfUsers) {
   		document.querySelector('.url-all').innerText = numberOfUsers
   	},
       urlOnline: console.log
     }
   }

• onLoad: function

  Execute a function when loading the counter

  Example:

   {
     onLoad: function () {
       alert('Counter loaded!')
     }
   }

• doNotUseWebSocket: boolean

  Does not use WebSocket to update data in real time Default: false

  Example:

   {
     doNotUseWebSocket: true
   }

Full example

VisitorCounter({
  elements: {
    hostAll: '.host-all',
    hostOnline: '#host-online, .online',
    urlAll: '.url-all .users',
    urlOnline: 'span.url-online'
  },

  onUpdate: {
    hostAll: (n) => console.log(n),
    hostOnline: updateOnlineUsersCounter,
    urlAll: function (numberOfUsers) {
      document.querySelector('.url-all').innerText = numberOfUsers
    },
    urlOnline: console.log
  },

  onLoad: function () {
    alert('Counter loaded!')
  },

  doNotUseWebSocket: true
})

Custom counter

This returns an animated SVG image with the amount of visitors

Useful for putting on GitHub or pages that don't allow scripting

GET https://jd-visitor-counter.adaptable.app/custom/<id>/count.svg

<id> Any string

Example for GitHub:

![Visitor counter](https://jd-visitor-counter.adaptable.app/custom/github:YOURUSERNAME/count.svg)

Customizations

Customize the counter through query parameters

• primaryColor: string (CSS color)

  Change the background color of the primary boxes

• secondaryColor: string (CSS color)

  Change the background color of the secondary boxes

• textColor: string (CSS color)

  Change text color

• minDigits: number

  Minimum number of digits to be displayed (min. 1 / max. 20)

Examples:

• https://jd-visitor-counter.adaptable.app/custom/foo/count.svg?primaryColor=red
• https://jd-visitor-counter.adaptable.app/custom/foo/count.svg?primaryColor=red&secondaryColor=green&textColor=yellow&minDigits=10
• https://jd-visitor-counter.adaptable.app/custom/foo/count.svg?primaryColor=%23ff0000

  Note: To use hash character (#) use %23 instead

Visitors

_{Developed by Jefferson Dantas}