Install

Code

Platforms

WordPress Hyvor Blogs Squarespace Wix Blogger Ghost Framer

Tip: You can use the HTML method to install on any website.

Javascript

In some cases, you may want to dynamically create the embeds. Since Hyvor Talk embeds are Web Components, you can easily create them with Javascript.

First, load the script that registers the Web Component on your page.
```
function loadHyvorTalk() {
	// add embed script
	const script = document.createElement('script');
	script.src = 'https://talk.hyvor.com/embed/embed.js';
	script.type = 'module';
	document.head.appendChild(script);

	// create the element
}
```
These are the embed scripts:
- https://talk.hyvor.com/embed/embed.js - Comments
- https://talk.hyvor.com/embed/newsletter.js - Newsletters
- https://talk.hyvor.com/embed/memberships.js - Memberships
- https://talk.hyvor.com/embed/comment-counts.js - Comment Counts

Then, create the Web Component and append it to another element. Here is an example:

function loadHyvorTalk() {
	// add embed script
	// ...

	// create the element
	const comments = document.createElement("hyvor-talk-comments");
	comments.setAttribute('website-id', YOUR_WEBSITE_ID);
	comments.setAttribute('page-id', '');
	document.getElementById("comments-wrap").appendChild(comments);
}

You can also listen to events of each Web Component and use their APIs. See the documentation of each embed for more information.

Typescript

If you are using Typescript, you can use the @hyvor/hyvor-talk-base library to create the Web Component in a type-safe way. This library provides type-safe helper functions for the embeds. This is the base library we use in our React, Vue, and Svelte libraries.

NPM
Github

Note that installing this library will not bundle the embed scripts directly to your build. Rather, it will load the scripts from the Hyvor Talk servers at the runtime.