JavaScript API Methods \ LoudVoice

LoudVoice allows you to easily integrate a powerful comments system that includes logging in with 40+ social networks, spam filters, automatic backups and Markdown styling and syntax.

The LoudVoice implementation guide is available here.

set_author_session_token

Per default the LoudVoice widget uses it's own authentication system. Users can simply login with their social network account, or enter their name and email address in order to post comments.

To integrate LoudVoice into your existing authentication system, you can also create LoudVoice sessions using the Session API and then send the corresponding information to the LoudVoice widget.

Default: no value

    /* 
    Signature 
        <author_session_token> : string 
    */
    _oneall.push(['loudvoice', 'set_author_session_token', <author_session_token>]);


    /* Example */
    _oneall.push(['loudvoice', 'set_author_session_token', 'd0c5aff7-4c06-474b-8a87-0259ff9484b7']);

set_providers

Sets the social networks than can be used to login into LoudVoice in order to leave a comment.

Default: no value

	/* 
	Signature 
		<providers> : array object 
	*/
	_oneall.push(['loudvoice', 'set_providers', <providers>]);


	/* Example */
	_oneall.push(['loudvoice', 'set_providers', ['facebook', 'twitter']]);

set_page

Sets the title and the url of the page on which the discussion is displayed. The page details are displayed in the comments moderation area and used when sharing the discussion on a social network.

Default: Derived from document.title and document.location.href

	/* 
	Signature 
		<page_title> : string
		<page_url> : string
	*/
	_oneall.push(['loudvoice', 'set_page', <page_title>, <page_url>]);


	/* Example */
	_oneall.push(['loudvoice', 'set_page', 'My Example', 'http://www.example.com/']);

set_reference

Sets the reference that uniquely identifies the discussion. A good value would per example be the identifier of the page on which the discussion is displayed. Comments are always tied to a single reference. If you change the reference of a discussion, the displayed comments will change too.

Default: no value

	/* 
	Signature 
		<reference> : string
	*/
	_oneall.push(['loudvoice', 'set_reference', <reference>]);


	/* Example */
	_oneall.push(['loudvoice', 'set_reference', 'PAGE-ID-135']);

set_offset_top

Indicates to LoudVoice that the page uses a fixed header and that an offset needs to to be added when scrolling to a comment.

Default: 0

	/* 
	Signature 
		<offset> : integer (pixels)
	*/
	_oneall.push(['loudvoice', 'set_offset_top', <offset>]);


	/* Example */
	_oneall.push(['loudvoice', 'set_offset_top', 140]);

set_comment_depth

Sets the maximum number of comments that are displayed for each level of the discussion tree. If more comments are available, a Load more comments button will displayed.

Default: [5, 3]

	/* 
	Signature 
		<offset> : array of integers (values must be greater than 0)
	*/
	_oneall.push(['loudvoice', 'set_comment_depth', <depth>]);


	/* Example */
	_oneall.push(['loudvoice', 'set_comment_depth', [5, 3]]);
	_oneall.push(['loudvoice', 'set_comment_depth', [10, 5, 4]]);

set_comment_direction

Sets the general direction of the comments listing , either ascending or descending.

Default: desc

	/* 
	Signature 
		<direction> : string (asc, desc)
	*/
	_oneall.push(['loudvoice', 'set_comment_direction', <direction>]);


	/* Example */
	_oneall.push(['loudvoice', 'set_comment_direction', 'asc']);

set_comment_area_placeholders

Sets the placeholder displayed in the new comment form.

Default: Join the discussion!

	/* 
	Signature 
		<placeholder> : string
	*/
	_oneall.push(['loudvoice', 'set_comment_area_placeholders', <placeholder>]);


	/* Example */
	_oneall.push(['loudvoice', 'set_comment_area_placeholders', 'Leave a comment']);

set_event

Advanced API Feature

Defines a custom JavaScript function that is executed whenever an event is triggered. This method will replace any functions that might already have been registered for the given event.

Default: no value

	/* 
	Signature 
		<event> : string (the event that will trigger the function)
		<function> : JavaScript function
	*/
	_oneall.push(['social_login', 'set_event', <event>, <function>]);


	/* Example */
	var my_function = function (){alert("Widget Loaded");}
	_oneall.push(['social_login', 'set_event', 'on_widget_loaded', my_function]);

set_custom_css_uri

Custom CSS Feature

Specifies the URL of a CSS stylesheet to be used in the LoudVoice widget. By using a custom stylesheet you can customize the look and feel of the LoudVoice widget. This method also accepts protocol-relative URLs.

Default: no value

	/* 
	Signature 
		<custom_css_uri> : string (a full URL to a CSS file on your server)
	*/
	_oneall.push(['loudvoice', 'set_custom_css_uri', <custom_css_uri>]);


	/* Example */
	_oneall.push(['loudvoice', 'set_custom_css_uri', 'https://secure.oneallcdn.com/css/api/themes/beveled_connect_w208_h30_wc_v1.css']);

	/* Example (Protocol-relative URL) */
	_oneall.push(['loudvoice', 'set_custom_css_uri', '//oneallcdn.com/css/api/themes/beveled_connect_w208_h30_wc_v1.css']);

enable_editor

LoudVoice includes an embedded WYSIWYG editor to easily format and preview new comments. Enabling the editor greatly improves the user experience but will include some additional CSS/JavaScript files required by the editor.

Default: false

    /* 
    Signature 
        <enable_editor> : boolean
    */
    _oneall.push(['loudvoice', 'enable_editor', <enable_editor>]);


    /* Example */
    _oneall.push(['loudvoice', 'enable_editor', true]);

render_collapsed

If this value is set to true, do_render_ui will display the discussion in a collapsed form. The comments listing will initially be hidden and users need to expand the discussion in order to view existing or leave new comments.

Default: false

    /* 
    Signature 
        <render_collapsed> : boolean
    */
    _oneall.push(['loudvoice', 'render_collapsed', <render_collapsed>]);


    /* Example */
    _oneall.push(['loudvoice', 'render_collapsed', true]);

do_render_ui

Renders the LoudVoice widget and displays the discussion in the DOM container with the specified id. This method should always be called last, as once the discussion has been rendered it's no longer possible modify it.

	/* 
	Signature 
		<dom-container-id> : string (identifier of a DOM element)
	*/
	_oneall.push(['loudvoice', 'do_render_ui', <dom-container-id>]);


	/* Example */
	_oneall.push(['loudvoice', 'do_render_ui', 'my_discussion']);
	/* Example container: <div id="my_discussion"></div> */

User Contributed Notes