How to Embed an Interactive Tier List into Your Website or Blog

What You're Actually Embedding

OBPAI's open embed is an iframe that points to https://obpai.com/embed/tier/{templateID}. Visitors drag and rank options inside your article, while the interaction runs on our domain; your page only supplies the height and width. The full editor page remains https://obpai.com/tier/{templateID}.

The code copied from your site defaults to a height of 860px (you can change it in the embed dialog). Too short, and an internal scrollbar appears; too tall, and mobile visitors see a lot of blank space—here are recommended values by scenario.

Quickest Path: Copy and Paste

1. Open the target template page and click “Embed in website/blog”.
2. Adjust the height as needed; the decision to include the credit link is up to you (with it, readers can easily return to the full tier page; without it, the embed looks “cleaner”).
3. Paste the generated HTML into your article’s HTML / Custom HTML block. If your Markdown editor escapes tags, use Raw HTML or a shortcode plugin instead.

Example (swap in your own ID; this uses the programming-language tier template 1785642240285):

<iframe src="https://obpai.com/embed/tier/1785642240285" width="100%" height="860" frameborder="0" style="border:none;border-radius:12px;overflow:hidden;" allowfullscreen></iframe>

Height and Mobile: Don't Just Use 860

• Desktop long-form: 860 is usually enough; if you have an unusually large number of entries (nearly a hundred tiles), try 960–1100, and aim for at least two tiers visible on the first screen.
• Mobile: A fixed 860 is too tall and awkward to manipulate. A more robust approach: keep 860 on desktop, use a CSS media query to drop the iframe height to roughly 640–720 on mobile, or prompt readers to “rotate their phone / open the full page”.
• Width: Keep width="100%" and let the outer article container control the width; don't hard-code 1200px, or small screens will overflow horizontally.

Common Pitfalls by Publishing Platform

• WordPress block editor: Use the “Custom HTML” block; pasting an iframe directly into a “Classic Paragraph” sometimes gets filtered out. Some security plugins strip iframes—allowlist obpai.com or use an iframe shortcode plugin.
• Hexo / Hugo / static sites: Confirm your Markdown renderer allows raw HTML (e.g., a config like unsafe = true in Hugo). If your theme sanitizes with DOMPurify, you need to allow iframe src.
• Ghost: Use an HTML card; some paid themes occasionally restrict third-party iframes, so preview on a real device once.
• WeChat Official Account / some in-app browsers: Third-party iframes are heavily restricted and often render blank. A safer path is a cover image plus a button linking to the full page at /tier/{id}, rather than hard-embedding.
• Notion / some documentation products: Only allowlisted embeds are supported, and obpai may not be on the list—use an external link instead.

CSP, Cookies, and “White Screen” Troubleshooting

1. Open your browser's developer tools Console / Network tab: if CSP reports a frame-src / child-src block, allow https://obpai.com in your own site's CSP.
2. If the iframe shows but dragging doesn't work: first rule out a parent-page overlay covering pointer events (a mask or ad layer with pointer-events: none).
3. An HTTPS-only site embedding HTTP (mixed content) will be blocked outright by the browser—always use https://obpai.com.
4. Corporate networks or extensions (ad blockers, private mode) may block third-party frames: test once in an incognito window before concluding it's a code problem.

When Not to Embed

If a template is still being heavily revised or entry names haven't been proofread, don't embed it widely yet—screenshots your readers save will become outdated arguments. When there are very few entries (fewer than 8, say), a static image is usually lighter than an iframe. If your site's CSP is extremely strict and you can't change it, linking out to the full tier page is more respectable than “embedding a white box”.

Interactive Embed or Static Ranking Image?

If you need readers to re-sort, export, and argue over the ordering, use the embed. If you've finalized the list and only need to cite the conclusion, exporting a WebP/PNG as an image is more appropriate and loads lighter. In our own buying guides (for example, the gaming mouse tier list), we treat the interactive board as a “tool for changing opinions”, not as the article's only content.