Commentaires

<script async src="https://talk.hyvor.com/embed/embed.js" type="module"></script>

<hyvor-talk-comments website-id="YOUR_WEBSITE_ID" page-id=""></hyvor-talk-comments>

<hyvor-talk-comments
	website-id="x"
	page-badges='{
		"sso:user-id": 3,
		"htid:hyvor_x": 1,
		"htid:sso_x": 2
	}'
></hyvor-talk-comments>

<hyvor-talk-comments
	website-id="x"
	settings='{
		"custom_css":"#app { font-size: 18px }",
		"profiles": {
			"pictures": false
		}
	}'
></hyvor-talk-comments>

comments.settings = {
	name: 'John Doe', // website name
	custom_css: null, // or string of CSS
	auth: {
		sso_stateless_login_url: null // or URL string
	},
	comments_view: {
		note: 'This is a note', // note shown above the comments
		close_after_days: 0, // close the page after X days (0 for never)
		is_keyboard_navigation_on: true,
		nested_levels: 3, // number of nested levels (the rest will be collapsed)
		display_replied_to_type: 'none' | 'deep' | 'all' // when to show 'replied to' tag
	},
	profiles: {
		default_sort: null, // 'top' | 'newest' | 'oldest'
		pictures: true, // show profile pictures
		profiles: true, // show profile popup
		default_picture: null, // default profile picture URL
		display_name_type: 'name', // 'name' | 'username'
		mod_alias_name: 'Moderator', // alias for moderators for company representation
		mod_alias_picture: null,
		mod_badge_id: null // for showing a special badge for moderators
	},
	realtime: {
		on: true, // enable realtime updates
		count: true, // show online count
		users: false, // show online users list
		typing: 'off' // show if someone is typing = 'off' | 'on_without_typer' | 'on_with_typer'
	},
	voting: {
		type: 'both', // 'both' | 'up' | 'down'
		voters: true // show voters list
	},
	top_widget: 'reactions', // 'reactions' | 'ratings' | 'none'
	reactions: {
		configs: [
			{
				type: 'superb', // 'superb' | 'love' | 'wow' | 'sad' |  'laugh' | 'angry'
				is_shown: true,
				image_url: 'image.png',
				text: 'Superb'
			}
			// more items
		],
		display_type: 'image' // how to display reaction = 'image' | 'text' | 'both'
	},
	ratings: {
		star_color: '#f1c40f' // color of the rating stars
	},
	text: {
		// if a string is set, it will be shown *regardless* of the language.
		comment_box: null,
		reply_box: null,
		no_comments: null,
		reactions: null,
		ratings: null,
		comment_count_0: null,
		comment_count_1: null,
		comment_count_multi: null
	},
	editor: {
		emoji: true,
		images: true,
		gifs: true,
		embeds: true, // link embedding
		mentions: true,
		code_blocks: true,
		blockquotes: true,
		inline_styles: true, // bold, italic, inline code, strike, spoiler
		links: true,
		math: true
	},
	ui: {
		width: null, // null | number - width of the comments box in pixels, 100% if null
		box_shadow: 'string', // box-shadow CSS property for boxes
		box_radius: 'string', // border-radius CSS property for boxes
		box_border_size: 'string', // border-size CSS property for boxes
		box_border_color: 'string', // border-color CSS property for the comments and other boxes
		button_radius: 'string', // border-radius CSS property for buttons
		color_theme: 'os' | 'light' | 'dark' // default color theme
	},
	light_palette: {
		text: '#000000',
		accent: '#000000',
		accent_text: '#000000',
		box: '#000000',
		box_text: '#000000',
		box_text_light: '#000000',
		input: '#000000'
	},
	dark_palette: {}, // same properties as light_palette

	// comments highlighting
	highlight: {
		new: true, // whether to highlight new comments
		new_color: '#00ff00',
		// upvote-based highlighting
		upvote_1_threshold: null, // null | number
		upvote_2_threshold: 2, // null | number
		upvote_1_color: '#0000ff',
		upvote_2_color: '#ff0000'
	}
};

<hyvor-talk-comments t-as-guest="Comment without account" t-newest="Latest" />

const comments = document.createElement('hyvor-talk-comments');
comments.setAttribute('website-id', 'YOUR_WEBSITE_ID');
comments.setAttribute('page-id', page.id);

document.body.appendChild(comments);

customElements.whenDefined('hyvor-talk-comments').then(() => {
	// create the element
	const comments = document.createElement('hyvor-talk-comments');
	// set the settings
	comments.settings = {};
	// then append
	document.getElementById('wrap').appendChild(comments);
});

const comments = document.createElement('hyvor-talk-comments');

comments.translations = {
	sort: 'Order by',
	reactions_text: 'What do you think about this post?'
};

<hyvor-talk-comments website-id="YOUR_WEBSITE_ID" page-id="" loading="manual"></hyvor-talk-comments>

<button onclick="document.querySelector('hyvor-talk-comments').load()">Charger les commentaires</button>

const comments = document.querySelector('hyvor-talk-comments');
comments.api.auth.user();

interface Page {
	id: number;
	created_at: number;
	identifier: string;
	url: string;
	title: string;
	is_closed: boolean;
	is_premoderation_on: boolean;
	comments_count: number;
	reactions: Record<'superb' | 'love' | 'wow' | 'sad' | 'laugh' | 'angry', number>;
	ratings: {
		average: number;
		count: number;
	};
	online_count: number;
}

interface User {
	id: number;
	type: 'hyvor' | 'sso';
	name: string;
	username: string;
	picture_url: string | null;
	bio: string | null;
	location: string | null;
	website_url: string | null;
	badges: number[];
}