Hayami has support for some websites out-of-the-box, but due to the plethora of rapidly-growing online forums, communities, and anime streaming websites globally, Hayami may not support everything at once. But, with custom websites, any site can support Hayami, setup by you. If you want a GIF instead of a wiki-style guide, an example is below for your convenience.
Note that the GIF below is one such example, and there’s many modes you can mount Hayami onto sites. See the full documentation for more details.
Choosing your mapping mode
See how each rendering mode performs down below.
Below element
Insert inline
Replace element
Icon/text trigger
Below element: This puts the Hayami comments section below such element. You might want to put it below an existing comments section, below a title on the page, or just literally at the end of the page (HTML “body”). Choice is yours. An example is shown on below on a simulated anime platform example with just a video player with nothing on-page. There are many other use-cases this mode works effectively. Insert inline: This puts Hayami inside such element. There are varying use cases for this depending on site layouts. Hayami works this way on Crunchyroll, situated where the site’s comments used to go, simulating a familiar feel. Replace element: This replaces the chosen element with Hayami’s comment section. You might want to use this if there’s an element on-page you don’t interact with, but would be perfect to mount Hayami. In the example below, where the comments section used to be there now is the Hayami comments section. Of course, you may still want to see the site’s comments, so you could choose another element, or head over to icon/text trigger or popup mode instead. Icon/text trigger: This mode allows interchangeable switching between the site’s comments and Hayami’s comments, intertwining with the site’s styles to make it appear natural. “Interchangeable” means it can swap out the site’s comments with Hayami’s (and vice-versa), or, allow popup mode on-click (instead of a floating icon). This “interchangeable” feature can be triggered via an icon-click or text-click. Icon-click is intended for full-screen video player websites (i.e. Netflix), and text-click is intended for sites that have an embedded video player with other elements surrounding it.This mode requires a bit more setup, but is worth it, depending if this is how you want Hayami to look on your given website. An example GIF is below on-use on Bilibili for replace mode. How to choose anime title and episode
Choosing the anime title and episode selector can vary by site, but Hayami should make it fairly straightforward. You can do this either via manually selecting it.
Anime title selector: Click ‘Pick’ and choose the name of the anime on the site.
Episode selector: Choose the episode number on the page. Refrain choosing elements added by other extensions (e.g. MAL-Sync).
For popup only, no extra configuration required, your all done from here.
Setting mount selector, and side padding
For all the other modes, one last step: you need to configure the rest.
Mount selector: Where comments should appear or icon should sit. You can put “body” to append Hayami to the end of the page, if desired.
Display target selector: This can be ignored.
Side padding: How much y-padding is added to each side of the Hayami comments section. I’d recommend 240 side padding, but you can adjust how you wish.
After clicking “Save & Embed” (might also need a page refresh), the comments section should be successfully embedded.
How to import & export custom website mappings
You can export custom site mappings by clicking on Hayami, clicking on:
Settings > Custom websites > (i) Info icon on website you want to export > Export
You can share this custom mapping file for others to import (on Custom websites settings page), if desired. Once you’ve imported a new custom website mapping, you may notice the Hayami extension with a (!) badge.
This indicates you need to allow the extension permission to access the site as a host. Open the Hayami popup, you should see a prompt to allow those permissions.
How to sync with custom website mappings
Community members who have combined multiple mappings into one may update their mappings regularly as a visitor of many sites and forums. If you want to import and sync regularly with these mappings, you can do so by going to Hayami settings > Custom websites > Custom Sites Sync > New source, and adding the URL to the sync location.
How to make your own custom website sync location
Using the above guide on importing/exporting your custom-made Hayami mappings, you can then make your own sync to share with others in the community by doing the following:
Export all the custom sites you want to export via Hayami custom websites.
Click on the info icon on each individual site, and export the sites you want to merge into one configuration intended for sync.
Merge all of these site mapping files into a single one using Hayami's site merger.
Using Hayami’s custom site merger (https://custom-site-merger.hayami.moe/), upload all of your site mapper configurations (it’s processed locally), and export them as one config by clicking ‘Download JSON’.If you’ve already got your exported JSON, the importer also supports expanding your existing mapping, so you can import that file in-future to expand it if desired, if your editing your gist. Upload this JSON to a Gist site, Pastebin, or web host - which you can edit.
GitHub Gist (https://gist.github.com/) will be used in the following example. Drag to import your exported JSON directly into GitHub Gist, or open up your JSON and just copy and paste it directly.Then click ‘Create secret gist’, which should create the Gist successfully. Click 'Raw' to get the URL to share with others, then change out the URL slightly.
The portion after /raw would mean we’d only sync to this version everytime, no matter if you update it. We don’t want that. Remove everything after /raw, so it looks like this.This URL can be shared with others to sync their custom sites with your mappings. Whenever you wish to edit your mapping, just click Edit.
Edit your mapping, hit save, and it’ll sync across to others as well whenever their weekly sync is due. Or you can tell your community you’ve updated it, and they can manually click ‘Sync now’ if they prefer. 
.jpg?fit=max&auto=format&n=mBxFhz2wwUMQQnxu&q=85&s=06d5ff9f5c32ecd46a4f3c31c6401708)
