Feedjoltdocs
DevelopersWidget

Widget overview

How the Feedjolt widget works: one async script tag mounts a launcher and lazy-loads a sandboxed iframe on click. Install, what loads, and page isolation.

The widget is a single <script> tag on your page that fetches a small config from your workspace, mounts a launcher button, and lazy-loads an iframe when the user clicks. Until clicked, zero iframe overhead.

Install

<script async src="https://www.feedjolt.com/widget-loader.js"
        data-workspace="YOUR_WORKSPACE_SLUG"></script>

That's the minimum. Reload the page; you'll see a floating button.

What gets loaded

  • widget-loader.js - ~5 KB. Reads your data-* attributes, fetches /api/widget/embed/{workspace}/config, mounts a launcher.
  • The iframe - only loads when the user clicks the launcher. Hosted at https://www.feedjolt.com/{locale}/portal/{workspace}?mode=widget&.... Until clicked, no iframe load.
  • Cross-frame postMessage - used by the iframe to ask the parent to close or resize. No third-party trackers.

How it isolates from your page

The widget runs in an <iframe>, so its CSS, fonts, and JS are sandboxed from yours. Your styles can't break the widget; the widget can't reach into your DOM.

That also means deep style customisation is limited. The launcher button's colour and position come from your per-workspace settings; the iframe's content is themed by the same palette.

Where to next

  • Configuration - the five data-* attributes and the per-workspace dashboard settings.
  • Customization - what you can tweak today.
  • CSP - Content Security Policy directives the widget needs.

On this page