Developer guide

Embed the trending widget

Drop one line of JavaScript on any page. The widget loads in a sandboxed iframe, auto-resizes, and refreshes ~4× a day. Free for commercial use as long as the attribution stays visible.

1. Install in 30 seconds

Paste this anywhere in your page's HTML — body or footer, both work. Swap the data-platform value for whichever platform you want.

<script src="https://www.tinshub.com/trending-widget.js"
        data-platform="tiktok"
        data-size="standard"
        data-theme="auto" async></script>

Need a different platform? Pick one from the hub and grab the snippet from "Get embed code".

2. Live preview

Here's exactly what your visitors will see — this iframe uses the same loader your script will inject.

3. Attributes reference

Attribute	Default	Accepted values
data-platformrequired	—	tiktok, youtube, instagram, x, linkedin, threads, pinterest, bluesky, substack, twitch Required. Slug of the platform to display.
data-size	standard	compact \| standard \| full Compact shows 3 trends, standard 5, full 10.
data-theme	auto	auto \| light \| dark Auto follows the visitor's prefers-color-scheme. Light/dark force a palette.

All three attributes can also be passed as query params on the script src (e.g. ?platform=tiktok&size=full) — useful when your CMS strips custom data-* attributes.

Why no niche / audience / layout attributes?

The public widget is intentionally audience-agnostic — every visitor sees the same per-platform list. Niche-, audience-, and format-targeted trends (with hooks and outlines written for your audience) live in the signed-in dashboard. Sign up free if that's what you need.

4. Sizing & responsive behavior

The iframe always renders at 100% width of its container.
Height is set automatically via postMessage (clamped between 80px and 5000px). You don't need to set a min-height.
For readability, wrap the script in a container with a max-width (480-640px works well for compact/standard).
The widget never imports your site's CSS, so it can't conflict with your styles — and your styles can't break it.

5. Theming

With data-theme="auto" (the default), the widget follows the visitor's prefers-color-scheme. Force a palette with light or dark if your site forces one mode.

6. Attribution

Every embed includes a small "Powered by TINS HUB" link. This must stay visible — it's the only condition for free commercial use, per §10a of our Terms of Service.

7. Troubleshooting

Widget shows a static fallback card, never the live trends

Usually a host-site CSP blocking our iframe. Open DevTools → Console; if you see "Refused to frame 'https://www.tinshub.com/'…", add our origin to your site's CSP:

# Add to your site's Content-Security-Policy header:
frame-src https://www.tinshub.com;
# If your script-src is restrictive, also allow:
script-src https://www.tinshub.com;

Iframe never grows past 200px

The loader refuses to send height updates if it detects the iframe is hidden (display:none, 0×0, opacity 0). Un-hide it, or ensure it has a visible container with at least 100×50 px.

"This page can't be displayed in a frame"

Old browser cache of our headers. Hard-refresh (Cmd/Ctrl+Shift+R). Verify our headers are correct:

curl -sI https://www.tinshub.com/embed/trending/tiktok | grep -iE 'x-frame|frame-ancestors'

You should see frame-ancestors * and no X-Frame-Options: DENY on that path.

Widget loads but is blank

Most likely no trends are cached yet for that platform (rare — happens for newly added platforms). Visit the live trending hub for that platform; if it loads there, the widget will pick up the cache on its next refresh (within ~6 hours).

How to verify it's rendering correctly

Your <script> tag is in the DOM.
An <iframe> appears immediately after it.
Within ~5 seconds, the iframe's height grows past 200px.
At least one trend title is visible and the "Powered by TINS HUB" link is in the footer.

Need something more powerful?

For trends scored against your specific niche, audience and format — with hooks and outlines ready to post — use the signed-in dashboard.

Get personalized trends →