Rumour Widget

This page explains how to configure and embed the Rumour Widget on any website or app. It covers the embed code, URL parameters, customization, layout, and best‑practice guidance.

Overview

The Rumour Widget is an embeddable iframe that displays trending Rumours (posts) with live stats e.g views, comments, participants. You can customize dimension, colors and orientation and then copy a ready‑to‑paste <iframe> embed.

What you can configure

• Card color (optional)

• Background color

• Text color

• Orientation: Vertical / Horizontal

• Width, height, and other iframe attributes (responsive layout supported)

Locating the Widget Creator

You can access the widget configuration through Settings > Developer settings page. This section contains all customization options, including color pickers, orientation toggles, and the live preview. On the right, you’ll see a Preview panel that updates instantly as you adjust colors or layout options. The Code tab beside it shows your automatically generated <iframe> embed and a direct Widget URL you can copy to integrate with your site or app.

Quick Start

1. Choose your colors and orientation.

1. Click Copy to copy the embed code.

2. Paste it into your website where you want the widget to appear.

Tip: width="100%" makes the widget stretch to the width of its container. Adjust height to fit your layout.

Customization

Colors

• Card color (optional): Sets the card fill. If omitted, the widget uses its default card style.

• Background color: Page/chrome background within the widget. Use a contrasting value to make cards pop.

• Text color: Primary on‑card text color. Ensure sufficient contrast for readability.

Orientation

• Vertical: A feed with stacked cards.

• Horizontal: A row/rail layout (good for carousels or sidebars).

Security & Performance

• The widget is isolated in an iframe and runs with a restrictive sandbox to minimize risk.

• Use loading="lazy" to delay network work until the widget is visible.

• Prefer HTTPS pages to avoid mixed‑content warnings.

• Avoid nesting the iframe inside elements with overflow: hidden if you expect internal shadows to be visible.

Attribution

The widget automatically includes a “Powered by Rumour.app” line by default. Do not hide, obscure, or modify this attribution.

For additional context on how and where to display it appropriately, please refer to the Widget Placement Guidelines section.

Troubleshooting

The widget doesn’t appear

• Verify the URL and parameters (watch for missing %23 before hex colors).

• Check browser console for blocked mixed content (serve over HTTPS).

• Ensure no CSP rules block https://www.rumour.app in frame-src.

Colors look wrong

• Confirm you URL‑encoded the # as %23.

• Check for typos (e.g., textcolor vs textColor).

Layout is clipped

• Increase the iframe height or remove conflicting parent CSS (e.g., overflow: hidden).

FAQ

1. Can I dynamically change colors?

Yes. Update the query params in the src and reload the iframe.

1. Can I host the widget without the iframe?

No. The supported, secure integration is via iframe only.

1. Does it support dark mode automatically?

Theme colors come from your parameters; you can maintain two embed URLs (dark/light) and toggle based on your site’s theme.