diff --git a/docs/_config.yml b/docs/_config.yml index ace01188c..e564f618a 100644 --- a/docs/_config.yml +++ b/docs/_config.yml @@ -94,6 +94,8 @@ sidebar: url: /v5/integrating/cms/ - title: Single Sign On url: /v5/integrating/sso/ + - title: Comment Count + url: /v5/integrating/counts/ - title: API children: - title: GraphQL Overview diff --git a/docs/source/version-5-counts.md b/docs/source/version-5-counts.md new file mode 100644 index 000000000..ec566a53d --- /dev/null +++ b/docs/source/version-5-counts.md @@ -0,0 +1,38 @@ +--- +title: Comment Count Integration +permalink: /v5/integrating/counts/ +--- + +Add the `count.js` script to your `html` tree. On a page that includes the _Stream Embed_ this is done for you automatically, however for best performance we recommend to include it into the `
` tag. + +```html + +``` + +> **NOTE:** Replace the value of `{% raw %}{{ CORAL_DOMAIN_NAME }}{% endraw %}` with the location of your running instance of Coral. + +Insert an html element with the class `coral-count` and configure it using `data-coral-*` attributes. + +```html + +``` + +After successful injection it will become: + +```html + + 5 + Comments + +``` + +### Available `data-coral-*` attributes + +Set the class of your html element to `coral-count` in order to get story counts. The following `data-coral-*` attributes will configure the output: + +- `data-coral-id` – The id of the story of which counts should be injected. +- `data-coral-url` – The url of the story of which counts should be injected. +- `data-coral-notext` – If set to `"true"`, only the count number will be injected + +Either `data-coral-id` or `data-coral-url` should be set. If none are provided the story url +will be retrieved from the [canonical url reference](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs#Using_%3Clink_relcanonical%3E) `` or inferred using the current page url. diff --git a/docs/source/version-5-integrating.md b/docs/source/version-5-integrating.md index f4755eef8..fd4c0c420 100644 --- a/docs/source/version-5-integrating.md +++ b/docs/source/version-5-integrating.md @@ -3,25 +3,27 @@ title: Integrating on your site permalink: /v5/integrating/cms/ --- -With Coral setup and running locally you can test embeding the comment stream with this sample embed script: +With Coral setup and running you can embed the comment stream with this sample embed script: ``` + (function() { + var d = document, s = d.createElement('script'); + var url = '{{ CORAL_DOMAIN_NAME }}'; + s.src = '//' + url + '/assets/js/embed.js'; + s.async = false; + s.defer = true; + s.onload = function() { + Coral.createStreamEmbed({ + id: "coral_thread", + autoRender: true, + rootURL: '//' + url, + }); + }; + (d.head || d.body).appendChild(s); + })(); +`; ``` > **NOTE:** Replace the value of `{% raw %}{{ CORAL_DOMAIN_NAME }}{% endraw %}` with the location of your running instance of Coral.