Options

JS Options

ThreadTalk.JS comes with quite a few options to configure and also uses sensible defaults. Most of the options are optional, but some are required.

let comments = new ThreadTalkJS({
  apiUrl: 'https://' + location.hostname + '/.netlify/identity',
  autoLoad: false,
  commentContainer: 'body',
  dateFormat: 'en-IN',
  form: '#comment-form', // Required
  loadButton: '#load-button', // Required
  scrollOffset: 15,
  textarea: '#comment-box',
  title: document.title.split(' ')[0] // Required
})

JS

apiUrl

(Optional - String)

The absolute URL to the endpoint of your Netlify Identity instance. It must not be followed by a trailing slash (/). Defaults to 'https://' + location.hostname + '/.netlify/identity'. You might have to specify this during local testing as Netlify Identity won’t connect over HTTP.

autoLoad

(Optional - Boolean)

Determines if the comments load automatically after the script is initialized. Defaults to false. It is recommended to leave it disabled so that you don’t end up depleting your API calls and database reads without actually being used.

commentContainer

(Optional - String)

Determines the container element to which the new comments are appended. Comments will be added just before closing the tag of the provided element. It requires a valid string for querySelector. Defaults to body.

dateFormat

(Optional - String)

Determines the format of the date to use in the comment meta. It requires a valid string for a locale. Defaults to en-US.

form

(Required - String)

Determines the form element to use. Please note that a form has to be generated by you. ThreadTalk.JS will just process it. It requires a valid string for getElementById. Defaults to #comment-form.

loadButton

(Required - String)

Determines the button to use to load the comments. Please note that a button has to be generated by you. ThreadTalk.JS will just process it. It requires a valid string for querySelector. Defaults to #load-button.

scrollOffset

(Optional - +ve integer)

Determines the offset to maintain from an element while smooth scrolling. Defaults to 15.

textarea

(Optional - String)

Determines the textarea to be used to write the comment body in. Please note that a textarea has to be generated by you and it must be a child of the form. The library will just process it. It requires a valid string for querySelector. Defaults to #comment-box.

title

(Required - String)

Determines the title to be used as an identifier of the current page. It’s used as the name of the collection (and index) in FaunaDB. It must not contain spaces. This option does not have a default and must be unique for every page in the same database.

SCSS Options

Because ThreadTalk.JS uses SCSS, it’s easy to change some default CSS values to further customise the look and feel. It might be interesting to note that, all classes and variables used by ThreadTalk.JS are prefixed with t-. This is to avoid any clashes with alread-used names. Furthermore, in case the variable you need is not available, you could always use CSS to style it your way, or open a feature request.

SCSS can be customised like this:

$t-spacing: 15px;
$t-primary: #fbbf24;
$t-light-muted: #e5e5e5;
$t-color-inverted: #f4f4f5;

@import 'node_modules/threadtalkjs';

SCSS

$t-spacing

Determines the default spacing for margins and padding between comments and their content. The value must be in px.

$t-primary

Determines the colour of buttons and notifications.

$t-light-muted

Determines the colour of comments and modal.

$t-color-inverted

Determines the text colour on dark or coloured backgrounds.