> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hayami.moe/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom websites (Advanced)

> Some additional guides on setting up Hayami on more sophisticated websites.

## Configuring for metadata-less player site layouts

Some particular websites may not have metadata (i.e. anime name, or episode number) on your episode-related page which can be common within Asia/regional-specific sites or when sites use particular CMS (Content Management Systems). Hayami has *outside* episode page support (called episode index), but this only works by *manually* setting it up through the extension's popup, which may require some fiddling through Developer Tools (otherwise known as "Inspect Element") through your browser. The [tips on how to obtain variables for KomentoScript JSON](/contributing-komentoscript-sites) may help you complete this for your given site.

### Adding a new site to Hayami and using the Advanced Editor

<Steps>
  <Step title="On your episode listing page, right click > Map site with Hayami.">
    Select the anime name, then hit Save.
  </Step>

  <Step title="Open the Hayami popup > Settings > Custom websites > Choose your domain > Advanced" />
</Steps>

### Using the Advanced Editor

In the Advanced view, fill out the rest of the elements you usually do. So where is the episode page located (e.g. /episode/\*), then adding that in "Patch matching" > "Include path globs". In the following instance:

* /index.php/vod/detail/\* - where the episode listing page is
* /share/\* - where the video player is for each anime

<Frame>
  <img src="https://mintcdn.com/hayami/B9h0WAJH6TGhxK2E/images/Screenshot-2026-06-02-131953.png?fit=max&auto=format&n=B9h0WAJH6TGhxK2E&q=85&s=54281e57711f225223292fff11e64c93" alt="Screenshot 2026 06 02 131953" title="Screenshot 2026 06 02 131953" className="mx-auto" style={{ width:"68%" }} width="957" height="509" data-path="images/Screenshot-2026-06-02-131953.png" />
</Frame>

We'll be using the following simulated example. This is a listing of Wistoria Season 2 on a CMS.

<Frame>
  <img src="https://mintcdn.com/hayami/jUBLAC3SDcYYKhr5/images/wistoria_ep_linking_example.png?fit=max&auto=format&n=jUBLAC3SDcYYKhr5&q=85&s=315bfb57de5aea765ecf14341b4ebf01" alt="Wistoria Ep Linking Example" title="Wistoria Ep Linking Example" className="mx-auto" style={{ width:"34%" }} width="694" height="737" data-path="images/wistoria_ep_linking_example.png" />
</Frame>

This is rendered as a \<ul> element in the DOM, with each item contained in a child \<li>. Each \<li> represents an episode number. So Episode 01, 02, 03, etc. If the episode pages are extra domains, add them in the extra domains field.

<Frame>
  <img src="https://mintcdn.com/hayami/B9h0WAJH6TGhxK2E/images/Screenshot-2026-06-02-125709.png?fit=max&auto=format&n=B9h0WAJH6TGhxK2E&q=85&s=084fa2afa0c687bb61b8843bc77a8b6a" alt="Screenshot 2026 06 02 125709" title="Screenshot 2026 06 02 125709" className="mx-auto" style={{ width:"53%" }} width="979" height="759" data-path="images/Screenshot-2026-06-02-125709.png" />
</Frame>

Scroll and find "Cross-page episode index" and "Cross-page player lookup" and enable them. "Cross-page episode index" is where your episode listing is located. "Cross-page player lookup" is where the per-episode anime page is. Below is the configuration used for the above as an example.

<Frame>
  <img src="https://mintcdn.com/hayami/B9h0WAJH6TGhxK2E/images/Screenshot-2026-06-02-132525.png?fit=max&auto=format&n=B9h0WAJH6TGhxK2E&q=85&s=b8c9355f38235fa1a5a7f889051df291" alt="Screenshot 2026 06 02 132525" title="Screenshot 2026 06 02 132525" className="mx-auto" style={{ width:"34%" }} width="738" height="1498" data-path="images/Screenshot-2026-06-02-132525.png" />
</Frame>

## Schema

If you'd like the full JSON used in this instance, you can see [that example here >](/schema#cross-page-mapping-index-and-player-on-different-domains)

For the full schema on custom websites, you can [read more about the schema on its page >](/schema)
